Introdução ao MotionLayout
A animação tem um papel especial no design de interfaces, ela é uma das ferramentas mais importantes para uma boa interação. É especialmente boa para os aplicativos moveis, que devem ser desenvolvidos com uma interface informativa e funcional.
O ConstraintLayout é uma ferramenta fundamental nos dias de hoje, pois além de ser extremamente poderosa nos permite criar layouts complexos de forma muito simples. Contudo, fazer animações complexas com o ConstraintLayout pode ser um bocado complicado e pode nos consumir muito tempo.
Há pouco tempo a Google anunciou o ConstraintLayout 2.0 e deu bastante ênfase ao MotionLayout, pois este permite animar as nossas telas com muito pouco trabalho.
Este é o primeiro artigo da serie e eu irei explicar afinal de contas o que é o MotionLayout e como podemos usa-lo. Esta serie será composta por 4 artigos:
- Introdução ao MotionLayout (Estamos aqui)
- Animações com o MotionLayout Parte I (Básico)
- Animações com o MotionLayout Parte II (Intermédio)
- Animações com o MotionLayout Parte III (Complexo)
Motion
Como o nome sugere, Motion (movimento) é a acção e o efeito de mover um objecto ou um ponto, isto é, fazer com que o objecto deixe o seu lugar inicial e passe a ocupar outro.
Layout
Como expliquei neste artigo, um layout define a estrutura visual da interface do usuário. É composto por uma ou várias Views, que juntas, formam o design do aplicativo e interagem com o usuário (LinearLayout, RelativeLayout, ConstraintLayout, etc).
MotionLayout
O MotionLayout é uma subclasse do ConstraintLayout desenhada especialmente para facilitar na criação de animações e tornar a aplicação mais interativa. Possui as mesmas propriedades que o ConstraintLayout permitindo-nos posicionar os elementos e com a ajuda do layout editor maximizar a nossa produtividade.
Porque o MotionLayout?
Animações e transições podem ser feitas de varias formas no android, através do TransitionManager ou mesmo ate com o CoordinatorLayout, se alguma vez tentaste fazer uma animação qualquer deves ter utilizado uma delas.
O MotionLayout não foge muito a regra, na verdade, ele a junção das melhores propriedades do TransitionManager e do CoordinatorLayout.
Assim como no TransitionManager, o MotionLayout permite definir transições entre dois layouts e anima as suas propriedades. Como no CoordinatorLayout, ele permite conduzir transições através do toque e permite personalizá-las de acordo com as suas necessidades.
A parte mais interessante de tudo isso é que o MotionLayout é totalmente declarativo, isto é, podemos definir as animações e transições a partir de um ficheiro XML sem necessidade de algum código.
Quando devemos usar?
Animações são sempre bem-vindas mas não podemos exagerar nem utilizá-las de forma arbitrária. Elas existem por um motivo, que é guiar e ajudar ao utilizador a perceber o que o teu aplicativo está a fazer.
Use o MotionLayout apenas quando quiseres mudar o tamanho ou animar uma elemento da tua interface como imagens, botões e outros.
Utilize o MotionLayout para animar os elementos que irão interagir com o utilizador.
Requisitos
Tudo que precisas para começar a utilizar o MotionLayout:
- Android Studio 3.1.3 (ou versão superior)
- Adicionar a dependência do ConstraintLayout 2.0 ao teu gradle:
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'É isso!
Esta foi apenas uma breve introdução ao MotionLayout, espero que tenha despertado alguma curiosidade e interesse em aprender mais sobre esta ferramenta extremante útil e poderosa. No próximo artigo eu irei dar uma introdução ás animações com o MotionLayout e trarei alguns exemplos pra ti.
Se tiver alguma questão ou sugestão deixe aí nos comentários e não hesite em contactar-me pelo email: edilsonngulele@gmail.com ou twitter: @edilson_ngulele
Obrigado e até a próxima!
