Constraint Layout - um layout para a todos governar?

Apresentado no aniversário de 4 anos do Android Meetup do GDG-SP

Transcript

1. Constraint Layout um layout para a todos governar? Rafael Toledo @_rafaeltoledo
2. Constraint Layout? Anunciado no Google I/O 2016 Flexibilidade para a criação de layouts Layouts mais rasos Integração com a IDE - editor visual
3. Constraint Layout? É uma biblioteca - atualização independe do SO Compatível com 99% dos dispositivos Maior performance Substitui todos os outros layouts
4. Constraint Layout? É uma biblioteca - atualização independe do SO Compatível com 99% dos dispositivos Maior performance Substitui todos os outros layouts
5. Constraint Layout? É uma biblioteca - atualização independe do SO Compatível com 99% dos dispositivos Maior performance Substitui todos os outros layouts
6. É uma biblioteca - atualização independe do SO Compatível com 99% dos dispositivos Maior performance Substitui todos os outros layouts
7. Compatível com 99% dos dispositivos Maior performance Substitui todos os outros layouts
8. Substitui todos os outros layouts
9. Substitui todos os outros layouts?
10. ?
11. ?
12. Constraint Layout features
13. Constraints? âncoras layout_constraintBottom layout_constraintLeft layout_constraintTop layout_constraintRight text baseline - para TextViews layout_constraintBaseline
14. Constraints _toLeftOf _toRightOf _toTopOf _toBottomOf pode referenciar um outro widget (id) ou o container (parent)
15. Constraints _toLeftOf _toRightOf _toTopOf _toBottomOf pode referenciar um outro widget (id) ou o container (parent) indica que uma constraint foi criada
16. <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>
17. <android.support.constraint.ConstraintLayout ... android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" 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>
18. <android.support.constraint.ConstraintLayout ... android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" 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>
20. <android.support.constraint.ConstraintLayout ... android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="0dp" <!-- match constraint --> 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>
21. Dica do Toledo wrap_content x constraints
22. Dica do Toledo wrap_content x constraints
23. wrap_content x constraints wrap_content mede o componente, mas não respeita contraints <!-- default --> app:layout_constraintWidth_default="spread" app:layout_constraintWidth_default="wrap"
24. wrap_content x constraints wrap_content mede o componente, mas não respeita contraints <!-- 1.1.0-beta1 --> app:layout_constraintWidth_default="percent" app:layout_constraintWidth_percent="0.5"
25. Bias Deslocamento do widget dentro de um determinado eixo É o tipo de posicionamento difícil de fazer com os containers default - opção: PercentLayout
26. <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>
27. Chains Permite “amarrar” duas ou mais views, e controlar o espaçamento 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. Chains - weight É possível com as chains, criar pesos para as views, muito parecido com o que fazemos com o LinearLayout app:layout_width="0dp" <!-- match constraint --> app:layout_constraintHorizontal_weight="1"
33. Guidelines É um widget de tamanho zero, utilizado para o posicionamento de outros widgets Pode ser horizontal ou vertical, característica controlada pelo atributo orientation
34. <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>
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="horizontal" 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="horizontal" 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="horizontal" app:layout_constraintGuide_end="6dp" /> </android.support.constraint.ConstraintLayout>
40. Dimension Ratio (Finalmente) temos uma forma de especificar uma dimensão a partir de outra Utiliza uma notação meio “peculiar”, mas salva trabalho ao manter a proporção de widgets
41. <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" />
42. Barriers - 1.1.0-beta1 Parecida com uma Guideline, porém não permite que outros widgets sobreponham a propriedade configurada da barrier É útil para widgets que podem ter seu tamanho variável, e comprometer o layout por causa das constraints
43. <android.support.constraint.ConstraintLayout ...> <TextView android:id="@+id/text1" ... /> <TextView android:id="@+id/text2" ... /> <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="end" app:constraint_referenced_ids="text1,text2" /> <TextView android:id="@+id/text3" ... app:layout_constraintStart_toEndOf="@+id/barrier" /> </android.support.constraint.ConstraintLayout>
44. <android.support.constraint.ConstraintLayout ...> <TextView android:id="@+id/text1" ... /> <TextView android:id="@+id/text2" ... /> <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="end" <!-- start, top, bottom, right, left --> app:constraint_referenced_ids="text1,text2" /> <TextView android:id="@+id/text3" ... app:layout_constraintStart_toEndOf="@+id/barrier" /> </android.support.constraint.ConstraintLayout>
45. Groups - 1.1.0-beta1 É uma forma de manipular diversos widgets de uma forma conjunta, sem precisar de criar um ViewGroup exclusivo para este fim Widget "invisível", assim como a Guideline Ajuda a manter a hierarquia do Constraint Layout rasa
46. <android.support.constraint.ConstraintLayout ...> <TextView android:id="@+id/text1" ... /> <TextView android:id="@+id/text2" ... /> <android.support.constraint.Group android:id="@+id/group" ... app:constraint_referenced_ids="text1,text2" /> </android.support.constraint.ConstraintLayout> // Irá aplicar essa visibilidade a text1 e text2 group.setVisibility(View.GONE);
47. Placeholder - 1.1.0-beta1 É um widget que pode ser usado para a criação de templates, referenciando ids de outros widgets de forma dinâmica
48. Placeholder - 1.1.0-beta1 É um widget que pode ser usado para a criação de templates, referenciando ids de outros widgets de forma dinâmica
49. // res/layout <merge ...> <android.support.constraint.Placeholder android:id="@+id/text1" ... /> <android.support.constraint.Placeholder android:id="@+id/template_main_image" ... app:content="@+id/top_image" /> <android.support.constraint.Placeholder android:id="@+id/templace_action" ... app:constent="@+id/action_button" /> </merge>
50. // res/layout-land <merge ...> <android.support.constraint.Placeholder android:id="@+id/text1" ... /> <android.support.constraint.Placeholder android:id="@+id/template_main_image" ... app:content="@+id/top_image" /> <android.support.constraint.Placeholder android:id="@+id/templace_action" ... app:constent="@+id/action_button" /> </merge>
51. // res/layout <android.support.constraint.ConstraintLayout ...> <!-- não precisa de constraints --> <ImageView android:id="@+id/top_image" ... /> <!-- não precisa de constraints --> <ImageButton android:id="@+id/action_button" ... /> <include layout="@layout/template" /> </merge>
52. public class MainActivity extends AppCompatActivity { private Placeholder placeholder; private ConstraintLayout root; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... } public void onClick(View view) { TransitionManager.beginDelayedTransition(root); placeholder.setContentId(view.getId()); } }
53. ConstraintSets É possível clonar constraints criadas no XML para modificá-las e alternar em runtime
54. ConstraintSet apply = new ConstraintSet(); ConstraintSet reset = new ConstraintSet(); ... constraint = (ConstraintLayout) findViewById(...); apply.clone(constraint); reset.clone(constraint); ... void applyOnClick() { TransitionManager.beginDelayedTransition(constraint); apply.setMargin(R.id.button, ConstraintSet.START, 8); apply.applyTo(constraint); } void resetOnClick() { TransitionManager.beginDelayedTransition(constraint); reset.applyTo(constraint); }
55. ConstraintSet apply = new ConstraintSet(); ConstraintSet reset = new ConstraintSet(); ... constraint = (ConstraintLayout) findViewById(...); apply.clone(constraint); reset.clone(constraint); ... void applyOnClick() { TransitionManager.beginDelayedTransition(constraint); apply.setMargin(R.id.button, ConstraintSet.START, 8); apply.applyTo(constraint); } void resetOnClick() { TransitionManager.beginDelayedTransition(constraint); reset.applyTo(constraint); }
56. ConstraintSet apply = new ConstraintSet(); ConstraintSet reset = new ConstraintSet(); ... constraint = (ConstraintLayout) findViewById(...); apply.clone(this, R.layout.another_constraint); reset.clone(constraint); ... void applyOnClick() { TransitionManager.beginDelayedTransition(constraint); apply.setMargin(R.id.button, ConstraintSet.START, 8); apply.applyTo(constraint); } void resetOnClick() { TransitionManager.beginDelayedTransition(constraint); reset.applyTo(constraint); }
59. Substitui todos os outros layouts?
61. RelativeLayout? Sim! Tempo de rendering ~ -35%
62. LinearLayout? Se utilizar weight, sim! Tempo de rendering ~ -45% Se não, o tempo é muito similar (resultados inconclusivos)
63. Wrap Content / ScrollView / Item de lista Bem resolvido (1.1.0-beta1) Funcionou sem problemas
64. Substitui todos os outros layouts?!
65. ¯\_(ツ)_/¯ Depende
67. 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
68. Referências & Links What's New in Android Design Tools - I/O 2017 www.youtube.com/watch?v=nYb4FUdlLZE Cool Constraint Layout www.youtube.com/watch?v=Xx4aRI3oQbM Constraint Layout www.constraintlayout.com
69. 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