sábado, 19 de março de 2016

Customizando o TextInputLayout com ImageSpan

Olá povo,

 Post curto do dia. Estava querendo customizar o erro do TextInputLayout (TIL) e só consegui graças a ajuda da Lisa Wray, que deu a ótima sugestão de utilizar as classes SpannableStringBuilder + ImageSpan, que eu não conhecia.

 Muitos devs Android, quando vêm algum método que recebe um objeto CharSequence como parâmetro, pensam imediatamente é o mesmo que passar uma String. Mas na verdade o CharSequence é bem mais poderoso, pois permite ir além de textos planos. A classe SpannableStringBuilder é uma subclasse de CharSequence que permite adicionar Spannable's como o ImageSpan.
Vejamos o código a seguir.
TextInputLayout textInputLayout = (TextInputLayout) editText.getParent();
if (campoInvalido()) { // sua verificação do campo vem aqui.
    // Cria a imagem que será incluída no texto do erro.
    // O alinhamento poderia ser ALIGN_BASELINE
    ImageSpan imageSpan = new ImageSpan(
        this, R.drawable.ic_erro, DynamicDrawableSpan.ALIGN_BOTTOM);
    // O SpannableStringBuilder substituirá o primeiro caracter pela imagem
    // por isso o " " no começo.
    SpannableStringBuilder ssbErrorMessage = 
        new SpannableStringBuilder(" "+ getString(R.string.msg_erro));
    // Adicionando a imagem como texto do erro
    ssbErrorMessage.setSpan(imageSpan, 0, 1, 0);

    // Habilita o erro do TIL
    textInputLayout.setErrorEnabled(true);
    // define a mensagem de erro
    textInputLayout.setError(ssbErrorMessage);
    // Atualiza o componente
    textInputLayout.refreshDrawableState();
}
O resultado ficará como a imagem abaixo.
Dois detalhes importantes nesse exemplo:
1) essa abordagem pode ser utilizada por qualquer componentes que receba um CharSequence \o/
2) Podemos utilizar qualquer Bitmap como imagem ;)

 4br4ç05,
nglauber

Nenhum comentário: