Constraint Layout - Será que Vale a Pena?

Apresentado no Android Meetup do GDG-SP

Transcript

1. Constraint Layout será que vale a pena? Rafael Toledo @_rafaeltoledo
2. Containers de Layout LinearLayout RelativeLayout FrameLayout
3. Containers de Layout LinearLayout RelativeLayout FrameLayout AbsoluteLayout GridLayout TableLayout
4. Containers de Layout LinearLayout RelativeLayout FrameLayout AbsoluteLayout GridLayout TableLayout DrawerLayout GridLayout (v7) LinearLayoutCompat
5. Containers de Layout LinearLayout RelativeLayout FrameLayout AbsoluteLayout GridLayout TableLayout DrawerLayout GridLayout (v7) LinearLayoutCompat AppBarLayout CoordinatorLayout
6. Containers de Layout LinearLayout RelativeLayout FrameLayout AbsoluteLayout GridLayout TableLayout DrawerLayout GridLayout (v7) LinearLayoutCompat AppBarLayout CoordinatorLayout ConstraintLayou t
7. Precisamos de mais um container?
8. Evitando Layouts Hadouken Hierarquia de Views profunda
9. Performance Weights no LinearLayout Âncoras com Relative Layout Double-measurement (dupla medição do layout)
10. Amigável ao Editor Visual
11. www.concretesolutions.com.br Rio de Janeiro – Rua São José, 90 – cj. 2121 Centro – (21) 2240-2030 São Paulo - Av. Nações Unidas, 11.541 3º andar - Brooklin - (11) 4119-0449 Ajudamos empresas a criar produtos digitais de sucesso
12. Amigável ao Editor Visual Os atributos XML, apesar de verbosos, ainda são bastante legíveis SIM, é possível escrever layouts tranquilamente via XML
13. E como utilizo o ConstraintLayout no meu layout?
14. Convertendo para ConstraintLayout Abra um layout Mude para a aba Design Clique com o botão direito Selecione Convert X to ConstraintLayout
15. www.concretesolutions.com.br Rio de Janeiro – Rua São José, 90 – cj. 2121 Centro – (21) 2240-2030 São Paulo - Av. Nações Unidas, 11.541 3º andar - Brooklin - (11) 4119-0449 Ajudamos empresas a criar produtos digitais de sucesso
16. Constraint Layout criando constraints
17. Constraints âncoras layout_constraintBottom layout_constraintLeft layout_constraintTop layout_constraintRight text baseline - para TextViews layout_constraintBaseline
18. Constraints _toLeftOf _toRightOf _toTopOf _toBottomOf pode referenciar um outro widget (id) ou o container (parent)
19. Constraints _toLeftOf _toRightOf _toTopOf _toBottomOf pode referenciar um outro widget (id) ou o container (parent) indica que uma constraint foi criada
20. <android.support.constraint.ConstraintLayout ... android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:theme="@style/TextAppearance.AppCompat.Headline" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
22. Constraint Layout bias
23. Bias Deslocamento do widget dentro de um determinado eixo É o tipo de posicionamento difícil de fazer com os containers default - opção: PercentLayout
24. <android.support.constraint.ConstraintLayout ... android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:theme="@style/TextAppearance.AppCompat.Headline" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHorizontal_bias="0.25" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.75" /> </android.support.constraint.ConstraintLayout>
26. Constraint Layout chains
27. Chains Permite “amarrar” duas ou mais views, e controlar o posicionamento das views na forma de grupo Em uma chain, as contraints de uma view referenciam outra view
28. <android.support.constraint.ConstraintLayout ...> <TextView android:id="@+id/text1" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/text2" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/text2" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/text1" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
29. <TextView android:id="@+id/text1" ... app:layout_constraintHorizontal_chainStyle="spread" />
30. <TextView android:id="@+id/text1" ... app:layout_constraintHorizontal_chainStyle="packed" />
31. <TextView android:id="@+id/text1" ... app:layout_constraintHorizontal_chainStyle="spread_inside" />
32. <TextView android:id="@+id/text1" ... app:layout_constraintHorizontal_chainStyle="spread_inside" /> Gam biarra evitada!!!
33. Constraint Layout guidelines
34. Guidelines É um widget de tamanho zero, utilizado para o posicionamento de outros widgets Pode ser horizontal ou vertical, característica controlada pelo atributo orientation
35. <android.support.constraint.ConstraintLayout ...> <TextView android:id="@+id/text1" ... app:layout_constraintLeft_toLeftOf="@+id/guideline" /> <TextView android:id="@+id/text2" ... app:layout_constraintRight_toRightOf="@+id/guideline" /> <android.support.constraint.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.5" /> </android.support.constraint.ConstraintLayout>
36. <android.support.constraint.ConstraintLayout ...> <TextView android:id="@+id/text1" ... app:layout_constraintLeft_toLeftOf="@+id/guideline" /> <TextView android:id="@+id/text2" ... app:layout_constraintRight_toRightOf="@+id/guideline" /> <android.support.constraint.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.5" /> </android.support.constraint.ConstraintLayout>
37. <android.support.constraint.ConstraintLayout ...> <TextView android:id="@+id/text1" ... app:layout_constraintLeft_toLeftOf="@+id/guideline" /> <TextView android:id="@+id/text2" ... app:layout_constraintRight_toRightOf="@+id/guideline" /> <android.support.constraint.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.5" /> </android.support.constraint.ConstraintLayout>
38. <android.support.constraint.ConstraintLayout ...> <TextView android:id="@+id/text1" ... app:layout_constraintLeft_toLeftOf="@+id/guideline" /> <TextView android:id="@+id/text2" ... app:layout_constraintRight_toRightOf="@+id/guideline" /> <android.support.constraint.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_begin="15dp" /> </android.support.constraint.ConstraintLayout>
39. <android.support.constraint.ConstraintLayout ...> <TextView android:id="@+id/text1" ... app:layout_constraintLeft_toLeftOf="@+id/guideline" /> <TextView android:id="@+id/text2" ... app:layout_constraintRight_toRightOf="@+id/guideline" /> <android.support.constraint.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_end="6dp" /> </android.support.constraint.ConstraintLayout>
41. Constraint Layout dimension ratio
42. Dimension Ratio (Finalmente) temos uma forma de especificar uma dimensão a partir de outra A parte ruim é que ele utiliza uma notação meio “peculiar”
43. <ImageView android:layout_width="wrap_content" android:layout_height="0dp" ... app:layout_constraintDimensionRatio="1:1" /> <ImageView android:layout_width="0dp" android:layout_height="0dp" ... app:layout_constraintDimensionRatio="H,16:9" />
44. E como fica o Git?
45. <android.support.constraint.ConstraintLayout ... android:layout_width="match_parent" android:layout_height="match_parent" tools:layout_editor_absoluteX="0dp" tools:layout_editor_absoluteY="25dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:theme="@style/TextAppearance.AppCompat.Headline" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" tools:layout_editor_absoluteX="0dp" tools:layout_editor_absoluteY="25dp" /> </android.support.constraint.ConstraintLayout>
46. <android.support.constraint.ConstraintLayout ... android:layout_width="match_parent" android:layout_height="match_parent" tools:layout_editor_absoluteX="0dp" tools:layout_editor_absoluteY="25dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:theme="@style/TextAppearance.AppCompat.Headline" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" tools:layout_editor_absoluteX="257dp" tools:layout_editor_absoluteY="108dp" /> </android.support.constraint.ConstraintLayout>
47. <android.support.constraint.ConstraintLayout ... android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:theme="@style/TextAppearance.AppCompat.Headline" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
49. Mas Toledo, pode por em produção?
50. Testado e Aprovado!
51. Referências & Links Documentação developer.android.com/reference/android/support/constraint/ConstraintLayout.html Styling Android blog.stylingandroid.com Constraint Layout, Inside and Out youtube.com/watch?v=qwSs1uPRBiI Codelab https://codelabs.developers.google.com/codelabs/constraint-layout/index.html
52. www.concretesolutions.com.br Rio de Janeiro – Rua São José, 90 – cj. 2121 Centro – (21) 2240-2030 São Paulo - Av. Nações Unidas, 11.541 3º andar - Brooklin - (11) 4119-0449 Ajudamos empresas a criar produtos digitais de sucesso Rafael Toledo @_rafaeltoledo