0

Databinding bidirecional e Listener Bindings

Francisco Rasia
Francisco Rasia

Venha comigo explorar mais possibilidades do componente Databinding e mude a forma como os dados trafegam no seu app.

Nesse artigo, o terceiro da série sobre fluxo de informações entre elementos de um app Android, vamos criar vínculos bidirecionais entre o XML e o ViewModel. Também vamos criar um Listener Binding, para disparar comportamentos diretamente a partir do XML sem a necessidade dos listeners de onClick().


🧙‍♂️Revisando a teoria

Quem está familiarizado com a arquitetura MVVM já conhece essa organização:


img


Os componente visuais (textos, buttons, listas, etc...) são definidos em um arquivo de layout XML, enquanto os dados são mantidos em um ViewModel. O Fragment, por meio de observers, listeners, setters e outras funções atualiza os componentes a partir das alterações nos dados mantidos no ViewModel.

Agora, imagine que fosse possível eliminar o Fragment/Activity e vincular diretamente os dados do ViewModel aos componentes visuais da UI. Algo mais ou menos assim:


img


Pois é justamente isso que o componente Databinding permite fazer. Essa vinculação pode ser unidirecional, bidirecional, pode acontecer por meio de Listener bindings (atribuindo compotamentos como onClick() diretamente no arquivo XML), pode ser usado para formatar Strings, só para citar alguns exemplos.


🚀Liguem seus motores!

Esse passo-a-passo pressupõe que a função DataBinding já está habilitada no seu app. Se não estiver, siga o guia do artigo anterior para habilitá-la.

1. Definir um campo MutableLiveData<String>

É uma boa prática fazer o encapsulamento dos campos do tipo MutableLiveData<> mas, nesse caso, vamos manter o campo público porque queremos alterá-lo à partir da UI. O campo deve ser criado dentro do ViewModel:


class MeuViewModel : ViewModel() {
​
 val texto = MutableLiveData<String>()
​
 //... resto do ViewModel 
}


2. Criar o binding bidirecional no arquivo de Layout

Nesse exemplo vamos vincular a variável a um campo do tipo EditText em nosso layout. Para tornar vínculo bidirecional começamos a expressão com "@={}" - repare que foi incluído um símbolo = entre o arroba e a primeira chave!


<com.google.android.material.textfield.TextInputEditText
 //...
 android:text="@={meuViewModel.texto}"
 //... />


Com isso, o texto digitado pelo usuário é refletido automaticamente na variável do ViewModel. Simples, não é mesmo?


3. Definir um Listener Binding para onClick()

Vamos utilizar esse recurso para disparar um comportamento de onClick() a partir da UI. Para isso, adicionamos a propriedade android:onClick ao componente (no caso um MaterialButton). A expressão tem o formato de lambda, ou seja "@{ () -> funcao()}". Repare que, nessa implementação, invocamos diretamente a função definida no ViewModel:


 <com.google.android.material.button.MaterialButton
     //...
     android:onClick="@{() -> meuViewModel.facaAlgumaCoisa()}"
     //... />


Pronto! Agora você pode eliminar as inicializações dos componentes e e os ClickListeners de seu fragmento ou atividade.


🛸Um exemplo prático

Pareceu complicado, não? É mais fácil entender todos esses passos com um exemplo prático. Vou utilizar como app Anagrama. Você pode baixar o projeto no meu repositório ou seguir o passo-a-passo em qualquer projeto seu que utilize Fragments e ViewModels.

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

Use o commit 01d52fe e a branch main.

Confira o passo-a-passo no vídeo: 💊 Databinding bidirecional e onClick() no Android com Kotlin - https://youtu.be/Yz454730i54


🪐Conclusão

Nesse artigo vimos como usar mais duas capacidades do componente DataBinding para deixar o fluxo de informações no app ainda mais simples, reduzindo as responsabilidades das Activities e Fragments.

📷

Photo by Pablo García Saldaña on Unsplash

0
0

Comentários (1)

0
Isaias Bueno

Isaias Bueno

04/06/2021 17:07

Vou conferir mais sobre, muito obrigado por compartilhar!

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

Brasil