Custom view para Android – O que é e como criar
O Android possui diversos componentes para a criação de interfaces de usuário, mas será que esses componentes são suficientes para atender as necessidades dos desenvolvedores?
Divido entre Widgets e ViewGroups, o framework de Views do android disponibiliza vários modelos pré-construidos para atender as necessidades de layout do desenvolvedor.
Entre os Widgets estão o ImageView, WebView, ProgressBar e outros. Já entre os ViewGroups, temos o ConstraintLayouts, LinearLayouts e por aí vai.
Entretanto, se nenhum dos modelos pré-construídos atender as suas necessidades, ainda existe uma outra opção: criar uma view customizada.
Custom View
De acordo com a documentação oficial, uma view é um bloco de construção básico com vários modelos de componentes para a interface gráfica do Android.
Assim sendo, podemos definir uma Custom View como um componente que, diferentemente de uma view “tradiconal”, terá o comportamento e a aparência esperada pelo desenvolvedor.
A princípio a criação de uma Custom View se dá de duas maneiras:
- Criando uma classe que estenda a view, apenas criando um novo comportamento para ela.
- Desenvolvendo um layout em XML com uma classe que controle seu comportamento.
Nesse artigo utilizaremos a primeira opção para criar um botão com uma progressBar, que indicará ao usuário que o conteúdo está sendo carregado.
Passo a passo
Primeiramente vamos segmentar o comportamento que esperamos do botão com o objetivo de garantir as alterações necessárias.
- Alteração da largura para que ela acompanhe a altura do botão;
- Alteração dos cantos para que eles tenham a metade da altura/largura, deixando o botão redondo;
- Texto oculto durante a exibição da ProgressBar;
- Reversão de todas as alterações quando a animação terminar.
Agora que já sabemos as necessidades, criaremos uma classe que estenda a Widget Button para que não seja preciso recriar todos os comportamentos que ela já possui.
Em segundo lugar, também criaremos atributos adicionais que podem ser definidos no XML.
Em seguida, iremos inserir as variáveis que serão responsáveis por conter as prioridades dos componentes. Elas serão definidas como públicas para que possam ser alteradas programaticamente e sem a necessidade de métodos get e set.
Outras variáveis serão usadas apenas internamente, por isso serão declaradas como privadas.
Além disso, teremos uma extensão para alterar a cor e as bordas do botão de maneira similar aos do Material Design.
Assim como também teremos uma classe para controlar a largura do botão, que também terá uma animação para deixar a transição mais suave e controlar o comportamento ao iniciar e finalizar a animação.
Depois, logo abaixo das nossas variáveis, iremos obter os atributos caso eles estejam definidos no XML.
Assim nosso componente terá duas novas funções publicas para controlar a animação: a startAnimation() e o revertAnimation().
- startAnimation(): nela iremos definir a largura do botão durante a animação, desabilitar o botão enquanto a animação estiver rodando, alterar as bordas e esconder o texto.
- revertAnimation(): função que retorna os atributos do botão para os valores iniciais ao término da animação.
Para terminar, iremos usar o Canvas para exibir uma ProgressBar dentro do botão assim que a animação de redimensionamento não estiver sendo aplicada.
Pronto! Agora nosso botão customizado já pode ser adicionado ao xml do layout e controlado pela activity ou fragment
Como vimos, mesmo que o framework de Views do android não atenda a todas as necessidades do desenvolvedor, ainda sim, de maneira relativamente fácil, existe a alternativa de customizarmos esses Widgets e ViewGroups afim de atender às expectativas do usuário final.
Links uteis:
