¿Por qué no estás usando ConstraintLayout?

Ya van casi dos años desde que se anunció ConstraintLayout. Sin embargo no todo el mundo está familiarizado con el uso del layout y los conceptos nuevos que trae. Si queres empezar a usarlo de forma efectiva, entender cómo funciona y en qué se parece/diferencia con LinearLayout y RelativeLayout entonces no te podes perder esta meetup. El único requisito es haber utilizado otros layouts para diseñar pantallas y tener ganas de aprender 🙌 Charla dada en Android Devs Buenos Aires Meetup

Transcript

1. ¿Por qué no estás usando ConstraintLayout? Facundo Rodríguez Arceri @facundomr
2. Agenda • Introducción • Versiones y planes futuros • Agregar ConstraintLayout al proyecto • Tips para aprender más rápido • Constraints básicos ◦ Relative positioning ◦ Margins ◦ Center positioning ◦ Dimension constraints ◦ Novedades: Circular positioning, Percents, Ratio • Temas avanzados ◦ Virtual Helper Objects: Guideline, Barrier y Group ◦ Chains
4. Introducción • Nuevo layout presentado en el I/O 2017 • Forma parte de Android Jetpack, disponible como una Support Library • Compatible con API Level > 9 (Gingerbread / 2.3) • Diseñado para ser utilizado con el editor gráfico de layouts de Android Studio ◦ No es 100% necesario conocer el XML que genera el Layout Editor. • Se basa en el concepto de Constraint • El ConstraintLayout debería ser el único ViewGroup necesario ◦ Árbol de altura 1 ó jerarquía plana de Views
5. Versiones y planes futuros • Esta charla se basa en la versión 1.1.3 • Hay muchos features disponibles en 1.1.x que no estaban en 1.0.x ◦ Barriers, Groups, Circular Positioning, Percent Dimensions… • Y encima… ya se viene la 2.0! • Indispensable a futuro ◦ MotionLayout está basado en ConstraintLayout 2.0 ◦ RelativeLayout ya está deprecado
7. Agregar ConstraintLayout al proyecto • Agregar el repositorio Maven de Google en el build.gradle del proyecto repositories { google() } • Agregar la dependencia en el build.gradle del módulo app implementation 'com.android.support.constraint:constraint-layout:1.1.3' • Sincronizar el proyecto y… listo!
8. Constraints Una constraint define una relación uno-a-uno entre dos Views, y es la regla que determina cómo se van a ubicar y qué tamaño tendrán esos Views en el layout Reglas: • No están permitidas las dependencias circulares ♻ • Es necesario definir al menos una constraint en el eje vertical y otra en el eje horizontal ◦ Si no cumplimos esta regla los Views van al origen, pero el Layout Editor no lo muestra • La falta de un Constraint no produce un error de compilación (aún), pero se muestran en la Toolbar • Los Views pueden tener una única constraint por punto de anclaje, pero múltiples constraints de otros Views pueden apuntar hacia el mismo punto de anclaje de un View
9. Tips para aprender más rápido • Infer Constraints ◦ Acomodar las cosas en el editor gráfico y dejar que el IDE defina las Constraints ✨ ◦ Generalmente requiere modificar alguna de las cosas generadas • Autoconnect ◦ Agrega constraints automáticamente a cada View que se agrega al layout ◦ Sólo puede agregar constraints que apuntan al parent ‍ ◦ Desactivado por default • Convertir un layout existente a ConstraintLayout
10. Constraints básicos
11. • Es lo más parecido a usar RelativeLayout • Permite ubicar un View en forma relativa a otro, o a su padre • Útil para ubicar el View tanto horizontal como verticalmente Relative positioning
12. Relative positioning: Constraints disponibles • layout_constraintLeft_toLeftOf • layout_constraintStart_toStartOf • layout_constraintLeft_toRightOf • layout_constraintStart_toEndOf • layout_constraintRight_toLeftOf • layout_constraintEnd_toStartOf • layout_constraintRight_toRightOf • layout_constraintEnd_toEndOf • layout_constraintTop_toTopOf • layout_constraintTop_toBottomOf • layout_constraintBottom_toTopOf • layout_constraintBottom_toBottomOf • layout_constraintBaseline_toBaselineOf
13. Margins: La misma historia de siempre • android:layout_marginStart • android:layout_marginLeft • android:layout_marginRight • android:layout_marginEnd • android:layout_marginTop • android:layout_marginBottom
14. Gone Margins • Son la novedad • Se aplicarán cuando el View apuntado por el Constraint de margen esté con visibilidad GONE • Permite ahorrar trucos programáticos • Pero… qué significa que la visibilidad sea GONE en un ConstraintLayout? • layout_goneMarginLeft • layout_goneMarginStart • layout_goneMarginRight • layout_goneMarginEnd • layout_goneMarginTop • layout_goneMarginBottom
15. Center positioning • Si usamos constraints de posicionamiento relativo en ambos sentidos, podemos generar un efecto de “fuerzas opuestas” • Bias: permite alinear el View de alguna forma que no sea exactamente centrada <Button android:id="@+id/button" ... app:layout_constraintHorizontal_bias="0.3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent />
16. Dimensions constraints • Se pueden definir los minHeight/minWidth y maxHeight/maxWidth, y se utilizarán cuando las dimensiones esten definidas como wrap_content • layout_height y layout_width pueden usarse de tres formas: ◦ wrap_content ◦ Un literal específico. Ejemplo: 200dp ◦ 0dp, ahora conocida como match_constraint (chau match_parent! ) • layout_constraintWidth_default ◦ spread ◦ wrap
17. Novedades
18. Circular Positioning Posibilidad de posicionar un View en forma relativa a otro, indicando a qué distancia y con qué ángulo. <Button android:id="@+id/button" ... app:layout_constraintCircle="@+id/otroView" app:layout_constraintCircleRadius="100dp" app:layout_constraintCircleAngle="45" />
19. http://bit.ly/juego-pasapalabra
20. Percents Para utilizar pocentajes en los tamaños hay que cumplir dos reglas: 1. Utilizar match_constraint (0dp) en la dimensión que será definida con un porcentaje 2. Utilizar el atributo correspondiente: layout_constraintWidth_percent o layout_constraintHeight_percent , con un valor entre 0 y 1
21. Ratio Ahora los tamaños pueden definirse en forma proporcional. Para esto deben seguirse dos reglas: 1. Utilizar match_constraint (0dp) en la dimensión que se va a calcular 2. Utilizar el atributo layout_constraintDimensionRatio de alguna de las siguientes formas: a. Un literal específico. Ej: 1.5 (50% más grande) b. Forma ancho:alto. Ej: 2:1
22. Ratio <Button android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintDimensionRatio="H,16:9" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent"/>
23. Temas avanzados
24. Virtual Helper Objects Son objetos que no son visibles en la pantalla, pero sirven para estructurar el layout de alguna forma que resultaría compleja si sólo usáramos los constraints disponibles. Actualmente existen tres objetos de este tipo: • Guideline • Barrier • Group
25. Guideline • Líneas horizontales o verticales invisibles que pueden utilizarse para definir constraints contra ellas • Pueden posicionarse en forma relativa a los bordes del ConstraintLayout utilizando medidas en dp o porcentajes.
26. Barrier • Similar a las Guidelines, pero en lugar de estar fijas estas se mueven dependiendo del tamaño de otros Views. • Útil para cuando se quiere dejar un margen entre un View y un grupo de Views sin tener que agruparlos, por ejemplo, dentro de un LinearLayout.
27. Group • Útiles cuando se necesite cambiar la visibilidad de más de un View programáticamente. • En lugar de utilizar ViewGroups (LinearLayout, RelativeLayout, etc), se crea este objeto que hace referencia a más de un View de la jerarquía. • Cualquier transformación o método que se invoca sobre un Group afecta a todos los widgets referenciados en su atributo app:constraint_referenced_ids
28. Group <android.support.constraint.Group android:id="@+id/selected" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="gone" app:constraint_referenced_ids="frameLayout,send" />
29. Chains
30. Chains ⛓ • Permiten agrupar Views para alinearlos horizontal o verticalmente • Una chain se forma cuando dos Views tienen constraints bidireccionales entre ellos. • El primer View de la cadena se considera la cabecera (head) • Una chain se controla con atributos definidos en el head view.
31. Chains El comportamiento por default de una chain es tratar de utilizar todo el espacio disponible a lo ancho/alto. La forma en la que se realiza esto se define como “Chain Style”, y puede controlarse con los atributos layout_constraintHorizontal_chainStyle o layout_constraintVertical_chainStyle en la chain head.
32. Chain Style • SPREAD (default) ◦ Los elementos se espacian lo necesario para ocupar todo el lugar disponible, incluyendo márgenes. • SPREAD_INSIDE ◦ El primer y último elemento de la chain quedan contra los bordes del ConstraintLayout, y el espacio disponible se distribuye entre los Views. • WEIGHTED ◦ Combinable con SPREAD y SPREAD_INSIDE. ◦ Si algunos Views tienen match_constraint, ellos son los que van a tratar de utilizar el espacio disponible, en partes iguales. Esto puede tunearse utilizando layout_constraintHorizontal_weight y layout_constraintVertical_weight. • CHAIN_PACKED ◦ En lugar de utilizar el espacio para dejar márgenes proporcionales, se “empaquetan” todos los Views juntos y se utiliza el bias para alienar la chain según convenga.
33. Chains: Tips • Un View puede ser parte de una Chain horizontal y, al mismo tiempo, de otra Vertical. (Grids?) • La orientación de la Chain no implica que los Views estén alineados apropiadamente. Asegurate de incluir otras constraints para lograr esto.
34. ¿Preguntas?
35. ¡Muchas gracias! @facundomr