Constraint Layout - Dicas e Truques (Luiz Cristófori)

CONSTRAINTLAYOUT - DICAS E TRUQUES

Coders on Beers - Android

Apresentação

Luiz Cristofori

•Desenvolvedor Android na Concrete a 2 anos

•Ex-desenvolvedor Java web

•Participação em diversos projetos

•Jogador semi profissional de Street Fighter 5 -Zangief/Vega

CONSTRAINTLAYOUT? O QUE É? PRA QUE SERVE? O QUE VEIO RESOLVER?

•O que é? Pra que serve? Quais problemas veio resolver?

• Um novo tipo de layout (ViewGroup) apresentado no Google I/O de 2016 -juntando-se a outros ViewGroups como: LinearLayout, RelativeLayout, FrameLayout etc.

•Atributos mais intuitivos que tornam o layout simples de ser “montado”

•Facilita o uso do editor gráfico usando drag n’ drop para montar a tela

•Bem mais performático

•Layout com menor hierarquia - mais flat

•Suporte a diferentes tamanhos de tela simplificado

PERFORMANCE

•Performance

•Etapas do SO para desenhar uma tela:

•Measure - Leitura top-down de toda a árvore de views para determinar a largura de cada ViewGroup e consequentemente de seus respectivos filhos

•Layout - Outra leitura top-down para cada ViewGroup determinando a posição de cada filho usando o tamanho da etapa anterior

•Draw - Mais uma leitura top-down que cria um objeto do tipo Canvas para cada elemento na árvore de views enviando uma lista de comandos para a GPU desenhá-lo na tela. Esses comandos contém tamanho e posição obtido nas etapas anteriores

•Performance

SYSTRACE

•Systrace

• Script em python que possibilita a coleta e análise de informações dos processos que estão sendo executados no device

•Possível através do Android Studio

•Gera relatórios contendo alertas e informações detalhadas dado um período de tempo enquanto usa o app

•Combina informações do kernel do Android tais como: uso de CPU, atividade de discos, threads, etapas de layout, etc.

•Performance

•Layout “tradicional”

•ConstraintLayout

•Performance

•Performance

QUANDO USAR?

•Quando usar?

•Layouts complexos e com grande hierarquia entre ViewGroups

•Layout simples - uma view em baixo de outra, por exemplo, pode ser usado o LinearLayout

COMEÇANDO A USAR

•Começando a usar

•Importar lib

e pronto...

CONECTANDO VIEWSCONSTRAINTS

•Conectando views - constraints

•A base de todo ConstraintLayout

•Maneira intuitiva e simples de posicionar diferentes elementos na tela em relação a outros ou ao próprio pai (parent)

•Pode ser feito através do XML ou pelo próprio editor do Android Studio

•Constraints possuem apenas um caminho. Ex.: TextView1 TextView2

•Caso possuam “mão dupla” temos um exemplo de chain

•Conectando views - constraints

•Constraint relacionando uma view com outra

•Constraint relacionando uma view com o parent

•Deletando uma constraint

•Conectando views - constraints

•Tags XML:

•app:layout_constraintStart_toStartOf="@id/view"

•app:layout_constraintLeft_toLeftOf="@id/view"

•app:layout_constraintEnd_toEndOf="@id/view"

•app:layout_constraintRight_toRightOf="@id/view"

•app:layout_constraintTop_toTopOf="@id/view"

•app:layout_constraintBaseline_toBaselineOf="@id/view"

•app:layout_constraintBottom_toBottomOf="@id/view"

•app:layout_constraintStart_toEndOf="@id/view"

•app:layout_constraintLeft_toRightOf="@id/view"

•app:layout_constraintEnd_toStartOf="@id/view"

•app:layout_constraintRight_toLeftOf="@id/view"

•app:layout_constraintTop_toBottomOf="@id/view"

•app:layout_constraintBottom_toTopOf="@id/view"

POSICIONANDO VIEWS

•Posicionando views

•Usando um dos conectores em relação ao parent ou outras views

•Posicionando views

•Bias - Vertical e/ou horizontal

•Valor float entre 0 e 1 que determina a posição de uma view em relação às suas constraints

•Facilita o espaçamento entre views para diferentes tamanhos de telas

DEFININDO O TAMANHO DE UMA VIEW

•Definindo o tamanho de uma view

•O antigo match_parent deu lugar ao match_constraint ou 0dp

•Com isso a view usa todo o espaço possível para seu conteúdo levando em consideração os limites dado pelas suas constraints

ASPECT RATIO

•Aspect Ratio

•Sendo a largura ou altura de alguma view 0dp ou match_constraint podemos dar uma determinada proporção para essa view

•Através do atributo layout_constraintDimensionRatio definimos essa porporção que será mantida para diferentes tamanhos de tela

•Muito usado em ImageViews

•Uma medida (altura ou largura) recebe um valor proporcional a outra medida definida pelo aspect ratio

•Aspect Ratio

ALINHANDO VIEWS

•Alinhamento horizontal

•Horizontal com uma margem

•Alinhamento usando baseline

•Alinhando views

•Maneira fácil de centralizaruma view em relação a outra de maneira bem simples

•Conecta-se o contraint top e bottom de uma view com a que deseja centralizar

•O editor ajuda bastante

•Alinhando views

CHAINS

•Similar ao LinearLayout quando usado peso (weight) ao invés de uma largura ou altura pré definida

•Posiciona as views conectadas pelas chains de maneira organizada na tela

•Muito usado em views que precisam ficar alinhadas uma com outra. Ex.: 3 botões separados por espaços iguais

•Possui 4 modos possíveis de exibição e alinhamento entre as views

•Chains

•1 - Spread (default) - Views são posicionadas com espaçamento igual entre elas

•2 - Spread inside - Views da ponta ficam mais próximas do parent

•3 -Weighted - Pode ser usado junto com o modo Spread e/ou Spread inside onde podemos definir um peso maior para alguma view que queremos dar mais destaque

•4 - Packed - Views ficam mais próximas uma da outra

•Chains

•Chains

GUIDELINE

•Linha usada como referência para organizar e alinhar outras views

•Pode ser horizontal e vertical

•Aceita valor de porcentagem para determinar a sua posição

•Similar as linhas guias de softwares disponíveis para designers

•Guideline

•Guideline

•Guideline com valor fixo - start ou end

•Guideline

•Guideline com percentual

•Guideline

•Relacionando uma view com uma guideline

BARRIERS

•Muito usado quando existe a possibilidade de acontecer uma mudança de layout dado a localização do device, por exemplo

•Mantém as views selecionadas dentro de um espaço que é respeitado pelas demais views

•Evita que uma view fica por baixo da outra

•Introduzido na versão beta do constraintLayout

•Barriers

•Barriers

GROUPS

•Usado para agrupar diferentes views e aplicar o mesmo comportamento a elas

•Exemplo, quando nosso layout muda dado alguma resposta da API e devemos esconder algumas views e exibir outras

•Adicionado na versão beta do constraintLayout

•Groups

•Groups

FINALIZANDO

•Finalizando

PERGUNTAS?!

Centro

Av. Presidente Wilson,

231 - 29º andar

(21) 2240-2030

Cidade Monções

Av. Nações Unidas,

11.541 - 3º andar

(11) 4119-0449

Savassi

Av. Getúlio Vargas, 671

Sala 800 - 8º andar

(31) 3360-8900

www.concrete.com.br