0

Controle visibilidade de elementos da UI usando databinding

Francisco Rasia
Francisco Rasia

O componente Databinding permite controlar a visibilidade de elementos da UI a partir de mudanças de estado em variáveis do ViewModel.

Essa funcionalidade é um pouco mais avançada, mas conhecendo um ou dois truques fica simples de implementar.




🧙‍♂️O truque mágico

Para controlar a visibilidade de elementos da UI é preciso importar a classe View para o arquivo de layout. Depois, podemos usar o operador ternário para modificar a visibilidade do elemento.


1. Criar uma variável do tipo Boolean no ViewModel usando Transformation


Nesse exemplo, queremos mostrar um TextView toda vez que o usuário errarum desafio no jogo. Para isso, passamos nosso LiveData como parâmetro da transformação e, no bloco entre '{ }', indicamos o teste que queremos fazer.


class MainViewModel : ViewModel() {
  //...
  val acerto = MutableLiveData<Boolean?>(null)

  //não funciona usar o LiveData diretamente, precisamos transformá-la
  val respostaVisible = Transformations.map(acerto) { acerto ->
      acerto == false
  }
  


Por meio da Transformation, convertemos um valor 'false' em um valor 'true'.


2. Importar a classe View para o arquivo de layout

Como estamos trabalhando com um databinding layout, vamos usar a tag '<import>' para incorporar a classe View ao nosso XML.


<data>
  //...
    <import type="android.view.View"/>
</data>


Com isso temos acesso às constantes de visibilidade: 'View.VISIBLE', 'View.GONE' e 'View.INVISIBLE'.


3. Usar um operador ternário para controlar a visibilidade

Agora que temos acesso às constantes da classe View e também temos uma propriedade observável no ViewModel, podemos usar uma expressão com operador ternário para definir o valor da propriedade 'android:visibility' da TextView:


<TextView
    android:id="@+id/resultadoTv"
   //...
    android:visibility="@{mainViewModel.respostaVisible ? View.VISIBLE : View.INVISIBLE}"
   //...
 />


A sintaxe do operador ternário é bem simples: '{ variavel ? valor_se_verdadeiro : valor_se_falso }'.


E pronto! Agora a visibilidade da TextView é controlada diretamente pelo valor da variável no ViewModel, o Fragment ou Activity sequer precisa inicializar a TextView ou observar o LiveData.


🌋Um exemplo prático

É mais fácil entender todos esses passos com um exemplo prático. Vou utilizar como exemplo o app Anagrama.


💻 Repositório no github: https://github.com/chicorasia/anagrama


Use o commit ae4cb89 e a branch main.


Confira o passo-a-passo no vídeo: 💊Databinding e visibilidade de componentes no Android com Kotlin

- https://youtu.be/fbbJnAgMY5U


🗻Conclusão

Nesse artigo vimos como usar Transformations e Databinding para manipular a visibilidade de componentes da UI no Android com Kotlin.



🌌Para saber mais

Playlist: Databinding 📼


📸

Photo by Ashley Anthony on Unsplash


0
0

Comentários (1)

0
Isaias Bueno

Isaias Bueno

20/06/2021 17:37

Melhor conteúdo da DIO sobre Kotlin como sempre! muito obrigado pelas dicas!

Arquiteto, urbanista, desenvolvedor Kotlin, Java & Android e criador em chefe na chicorialabs.com.br

Brasil