Uma nova forma de construir layouts

Slides da palestra apresentada na trilha Android do The Developer's Conference 2017 em Florianópolis.

Transcript

1. Uma nova forma de construir layouts David Tiago Conceição Android Dev BR Involves @davidtiagocon
2. ConstraintLayout
3. O que queremos? • Performance
4. Três etapas • Measure • Layout • Draw
5. Measure • Cálculo das dimensões • ViewGroups ◦ Dimensões dos filhos ◦ Auto ajuste
6. Layout • Posicionamento em tela • Atributos de layout ◦ LayotParams
7. Draw • Desenho em tela • Mínimo overhead
8. • onMeasure(widthMeasureSpec, heightMeasureSpec) Na prática
9. Na prática • onMeasure(widthMeasureSpec, heightMeasureSpec)
10. Na prática • onMeasure(widthMeasureSpec, heightMeasureSpec)
11. Na prática • onLayout(changed, left, top, right, bottom)
12. Na prática • onLayout(changed, left, top, right, bottom)
13. Na prática • onLayout(changed, left, top, right, bottom)
14. Na prática • onDraw(canvas)
15. Na prática • onDraw(canvas)
16. Na prática • onDraw(canvas)
17. Na prática • layout_weight=”1”
18. Na prática • layout_weight=”1” • onMeasure(widthMeasureSpec, heightMeasureSpec)
19. Na prática • onMeasure(widthMeasureSpec, heightMeasureSpec)
20. Na prática
21. Na prática
22. O que queremos? • Performance
23. Custom Views • Subclasse ViewGroup ou View • Regras específicas • Mais código • Complexidade
24. O que queremos? • Performance • Simplicidade • Pixel perfect • Previews • ...
26. O que é? • ViewGroup complexo • Constraints • Independente • Android Studio
27. Primeiros passos • SDK Manager • Dependência • android.support.constraint.ConstraintLayout • Templates
28. A base: Constraints • Restrições • Conectam ◦ Parent ◦ Views “irmãs” ◦ Guidelines
29. A base: Constraints • X & Y
30. A base: Constraints • Criação
31. A base: Constraints • Baseline
32. A base: Constraints • Atributos XML ◦ Leitura ◦ Edição ... <android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/details_image" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginLeft="0dp" android:layout_marginRight="0dp" android:layout_marginTop="0dp" android:scaleType="centerInside" app:layout_constraintDimensionRatio="h,1:1" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" ...
33. O novo editor
34. O novo editor • Constraints manuais
35. O novo editor • Infer Constraints
36. O novo editor • Infer Constraints
37. O novo editor • Autoconnect
38. O novo editor • Autoconnect
39. O novo editor • Alertas
40. Design e Blueprint
41. Design
42. Blueprint
43. Design e Blueprint
44. Propriedades • Contexto • Relevância • Favoritas
45. Propriedades • Contexto • Relevância • Favoritas • Lista Pesquisável
46. Combinando constraints • Centralizando
47. Bias • Desloca a view
48. Chains https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html
49. Chains
50. Chains https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html
51. Chains https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html
52. Guidelines • View auxiliar • onDraw vazio
53. Guidelines
54. Guidelines
55. Guidelines
56. Escala • Proporção das dimensões • Altura ou largura
57. Escala
58. Ainda sobre dimensões • match_parent ◦ Constraints + 0dp ◦ match_constraint • Limitadas ◦ layout_constraintWidth_default • Baseadas em outra view
59. Ainda sobre dimensões
60. Comportamento dinâmico • VISIBILITY_GONE • layout_goneMargin...
61. Comportamento dinâmico • wrap_content
62. Via Java • Constraint sets @BindView(R.id.details_root_constraint) ConstraintLayout rootConstraintLayout; // … ConstraintSet constraintSet = new ConstraintSet(); constraintSet.clone(rootConstraintLayout); // ... constraintSet.applyTo(rootConstraintLayout);
63. Via Java • Constraint sets • ConstraintSet.connect(startID, startSide, endID, endSide, margin)
64. Via Java • Constraint sets • ConstraintSet.connect(startID, startSide, endID, endSide, margin) • Animações TransitionManager.beginDelayedTransition( rootConstraintLayout); constraintSet.applyTo(rootConstraintLayout);
65. E como isso tudo funciona? • Equation solver • Equações balanceadas • Cassowary
66. E como isso tudo funciona? http://wiresareobsolete.com/2016/07/constraintlayout-part-2/
67. E o futuro? • Android Studio • Performance • Padronização • Barriers ◦ Limites • Operações em grupo
68. E o passado? • Fácil aprendizado • Estável • Mudanças API ◦ Beta • wrap_content ◦ Pequenas falhas
69. O que queremos? • Performance ◦ Hierarquia plana ◦ Execução única • Simplicidade ◦ Drag and drop ◦ Constraints • Pixel perfect ◦ Flexibilidade ◦ Componentes auxiliares • Previews
70. Para saber mais? • Build a Responsive UI with ConstraintLayout: https://developer.android.com/training/constraint-layout/index.html • ConstraintLayout: https://developer.android.com/reference/android/support/constraint/Constra intLayout.html • Using ConstraintLayout to design your views: https://codelabs.developers.google.com/codelabs/constraint-layout/index.ht ml?index=..%2F..%2Findex#0 • ConstraintLayout, Inside and Out: http://wiresareobsolete.com/2016/07/constraintlayout-part-1/
71. slack.AndroidDevBR.org Android Dev BR
72. Obrigado! David Tiago Conceição Android Dev BR @davidtiagoconceicao twitter.com/@davidtiagocon github.com/davidtcdeveloper Desenvolvedor Android @ Involves