0

Otimize o fluxo de informações no app usando Databinding (vídeo)

Francisco Rasia
Francisco Rasia

Databinding é um componente do Android Jetpack que propõe reduzir as responsabilidades do Fragment ou da Activity em um app construído segundo o framework MVVM. Como ele, é possíve vincular os dados do ViewModel diretamente aos elementos da UI, sem ter o Fragment (ou Activity) como intermediário.

Nesse artigo, o segundo da série sobre fluxo de informações entre elementos de um app Android, vamos aprender os primeiros passos utilizar Databinding.


🧭Um pouco de 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.

Mas, como esse é um artigo de introdução, vamos experimentar apenas a vinculação mais simples: atualizar um campo de texto usando LiveData<String> mantido no ViewModel.


🦑Libertem o Kraken!

Há dois grandes segredos para se utilizar o Databinding:

  • Importar o ViewModel para o arquivo de Layout
  • Vincular o binding.lifeCycleOwner ao viewLifeCycleOwner

Não se preocupe, vamos passar por esses pontos no passo-a-passo:


1. Habilitar a databinding

Adicionar a seguintes linhas ao arquivo build.gradledo app, logo antes da declaração de dependências:


 buildFeatures{
 dataBinding true
 }


2. Envolver os componentes do Layout em uma tag <layout>

O arquivo XML provavelmente já tem um ConstraintLayout, FrameLayout ou LinearLayout como seu elemento base. Vamos envolver esse elemento em um tag <layout>, criando uma espécie de cabeçalho do arquivo. Mover as definições de name space para dentro desse tag.


3. Adicionar um campo <data> e um campo <variable>

Adicionar esses tags dentro do <layout> criado no passo anterior.


 <layout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools">
​
​
 <data>
   <variable
     name="..."
     type="..." />
 </data>
 //corpo do layout
</layout>


4. Definir a <variable>

Precisamos definir o nome e o tipo dessa variável; nesse exemplo, vamos chamá-la de ViewModel; o tipo da variável deve receber o FQN (fully qualified name) da classe:


<data>
   <variable
     name="viewModel"
     type="br.com.exemplo.ViewModel" />
</data>


E como eu sei que você é muito esperta ou muito esperto já conseguiu sacar que podemos ter mais de um ViewModel vinculado ao arquivo XML. Go pirate ninja! 🐱‍👤


5. Vincular um dado do ViewModel a um elemento do layout

Agora que temos o ViewModel como uma variável dentro do XML, podemos acessar os seus atributos. Vamos fazer um exemplo simples: um vínculo unidirecional para definir o texto de um campo a partir de um dado no ViewModel:


<TextView
     //...
     android:text="@{viewModel.textoLiveData}"
     //...
     />


Para fazer isso, substituímos o texto hardcoded ou a referência "@string" por uma expressão "@{...}". Repare que, no exemplo, o vínculo vai ser feito diretamente com o LiveData<String> - não precisamos nos preocupar em apontar para o value.

Estamos quase lá. Agora só falta ativar o binding no Fragment ou Activity.


6. Inicializar o binding

De volta ao Fragment, vamos inicializar o binding e inflar o layout:


class MainFragment : Fragment() {
​
 //...
 
 private val binding: MainFragmentBinding by lazy {
     MainFragmentBinding.inflate(layoutInflater)
   } //usando uma inicialização tardia
 
 }
  


Também precisamos atribuir o binding.root à view antes de retorná-la. Fazemos isso no método onCreateView():


val view = binding.root


7. Atribuir um viewModel e um lifeCycleOwner ao binding

Atenção! Esses passos são essenciais para que a atualização com LiveData funcione. Fazemos as atribuições no método onCreateView() depois de inicializar o ViewModel:


override fun onCreateView(
 inflater: LayoutInflater, container: ViewGroup?,
 savedInstanceState: Bundle?
): View {
​
 mViewModel = ViewModelProvider(this).get(ViewModel::class.java)
​
 val view = binding.root
 binding.mMainViewModel = mMainViewModel 
 binding.lifecycleOwner = viewLifecycleOwner
​
 return view
}


E pronto! Você acaba de vincular os dados do ViewModel diretamente ao TextView. Repare que o Fragment nem mesmo precisa saber que existe um TextView e fica somente com a responsabilidade de manter o ViewModel.


🏴‍☠️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 59c27a7 e a branch main.

Confira o passo-a-passo no vídeo: 💊 Databinding: primeiros passos (Kotlin + Android) - https://youtu.be/NydDrUOtqKY


⚓Conclusão

Nesse não tão breve artigo vimos como habilitar um projeto de app Android para o uso do componente databinding. Também vimos como fazer uma referência a um ViewModel dentro de um arquivo XML, como inicializar o Databinding no Fragment ou Activity e como fazer uma vinculação unidirecional entre LiveData e uma view no arquivo XML.

Nos próximos vídeos e artigos vamos continuar explorando esse tema, com os vínculos bidirecionais.

📷

Photo by Zoltan Tasi on Unsplash

0
0

Comentários (1)

0
Isaias Bueno

Isaias Bueno

29/05/2021 15:38

Excelente, é sempre bom ver novas formas de ser fazer o Databinding.

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

Brasil