ConstraintLayout facilita la creación de diseños complejos en Android, lo que le permite crear la mayor parte de su interfaz de usuario con un editor visual en Android Studio. A menudo se le llama el RelativeLayout más poderoso. Con ConstraintLayout, puede evitar muchos niveles de anidamiento al diseñar pantallas complejas.
La versión estable de ConstraintLayout 1.1 se ha lanzado recientemente y ahora parece muy madura. Su optimización completa aumenta aún más su rendimiento, y los nuevos elementos, como barreras y grupos, convierten la creación de un diseño realmente genial en una tarea bastante trivial.
Android Gradle
Para usar las nuevas funciones en el proyecto, debe agregar ConstraintLayout 1.1 al proyecto como dependencia:
dependencies { implementation 'com.android.support.constraint:constraint-layout:1.1.2' }
Nueva funcionalidad en 1.1
Interés
Para que la Vista ocupe un cierto porcentaje de la pantalla, en ConstraintLayout 1.0 era necesario tener al menos dos dependencias. En ConstraintLayout 1.1, la solución a este problema se simplificó simplemente especificando un porcentaje de ancho o alto.
El ancho del botón se establece como un porcentaje, y ocupa todo el espacio libre y conserva su apariencia:
Todos los componentes de Vista admiten los atributos layout_constraintWidth_percent y layout_constraintHeight_percent . Le permiten limitar el componente Ver a un valor porcentual dentro de todo el espacio disponible. Para que el botón se estire en un 70% dentro del espacio libre para él, solo necesita unas pocas líneas:
<Button android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintWidth_percent="0.7" />
Cadenas
Al colocar varios componentes usando una cadena , es posible controlar el espacio entre ellos. En 1.1 , se corrigieron varios errores de encadenamiento y ahora pueden funcionar con una gran cantidad de componentes View . Para crear una cadena, debe agregar dependencias en ambos lados del componente Ver :
El componente de vista principal ( cabeza ) de la cadena tiene la propiedad de la aplicación: layout_constraintVertical_chainStyle , que se puede establecer en spread , spread_inside o empaquetado .
- spread distribuye uniformemente todos los componentes de View en la cadena
- spread_inside coloca el primer y el último componente en los bordes y distribuye uniformemente el resto
- embalado agrupa todos los componentes en el centro de la cadena
Barreras
Cuando tiene varios componentes de Vista que pueden cambiar de tamaño dinámicamente, puede usar una barrera para limitarlos. La barrera se puede colocar al principio, al final, a la parte superior o inferior de varios componentes. Esto es muy similar a crear un grupo de componentes virtuales. Virtual, porque este grupo no existe físicamente y, por lo tanto, no complica la jerarquía de componentes.
Las barreras son realmente útiles cuando crea cadenas localizadas o muestra contenido creado por un usuario cuyo tamaño no puede predecir.
Las barreras le permiten crear dependencias en varios componentes de Vista :
La barrera siempre se encuentra directamente fuera del grupo virtual y se puede usar para crear dependencias con otros componentes de View . En este ejemplo, el componente Ver a la derecha siempre está al final del componente más largo del grupo virtual.
Grupos
A veces necesita mostrar u ocultar varios componentes a la vez. Por eso se agregaron grupos a ConstraintLayout .
El grupo no agrega un nivel adicional de anidamiento a la jerarquía de componentes de Vista . Un grupo es solo una forma de unificación virtual. En el siguiente ejemplo, combinamos profile_name y profile_image bajo un id - profile .
Esto es útil cuando tiene varios componentes que aparecen u ocultan juntos.
<android.support.constraint.Group android:id="@+id/profile" app:constraint_referenced_ids="profile_name,profile_image" />
Después de haber creado el grupo de perfiles , puede cambiar la visibilidad de todo el grupo, y se aplicará tanto a profile_name como profile_image .
profile.visibility = GONE profile.visibility = VISIBLE
Dependencias circulares
En ConstraintLayout, la mayoría de las dependencias y restricciones están establecidas por el tamaño de la pantalla: horizontal y vertical. Restraint Layout 1.1 introduce un nuevo tipo de dependencia: restrictintCircle , que le permite especificar dependencias en un círculo. En lugar de sangrías horizontales y verticales, puede especificar el ángulo y el radio del círculo. ¡Esto es conveniente para componentes de Vista en ángulo, como un menú radial!
Al crear dependencias circulares, los ángulos comienzan en la parte superior y cambian en sentido horario. Por ejemplo, de esta manera debe describir el botón central en el ejemplo anterior:
<android.support.design.widget.FloatingActionButton android:id="@+id/middle_expanded_fab" app:layout_constraintCircle="@+id/fab" app:layout_constraintCircleRadius="50dp" app:layout_constraintCircleAngle="315" />
Animación con Restricción
ConstraintLayout se puede usar con ConstraintSet para animar múltiples elementos a la vez. ConstraintSet solo funciona con dependencias de ConstraintLayout . ConstraintSet se puede crear en código o agregar directamente a un archivo xml .
Para iniciar la animación, use TransitionManager.beginDelayedTransition () `de la biblioteca de soporte . Esta función iniciará todas las animaciones definidas en ConstraintSet **.
En este video puedes aprender un poco más sobre este tema:
Nuevas optimizaciones
ConstraintLayout 1.1 agrega varias optimizaciones nuevas que aumentan su rendimiento. Las optimizaciones se realizan para reducir la cantidad de dependencias requeridas para la ubicación de los componentes de Vista en la pantalla.
La esencia de las optimizaciones es deshacerse de las constantes redundantes en los diseños.
Ha aparecido un nuevo atributo: layout_optimizationLevel , que ajusta el nivel de optimización. Se puede establecer en los siguientes valores:
- barreras localiza barreras y las reemplaza con dependencias más simples
- Direct optimiza los componentes directamente conectados a otros componentes fijos, como los lados de la pantalla, y continúa optimizando los componentes directamente relacionados con ellos.
- estándar es la optimización predeterminada, que incluye barreras y directa
- Dimensiones es actualmente una optimización experimental y puede dar lugar a algunos problemas. Optimiza el diseño calculando dimensiones
- Las cadenas también se encuentran actualmente en una fase experimental. Optimiza el encadenamiento de componentes con dimensiones fijas.
Si desea probar optimizaciones experimentales de dimensiones y cadenas , debe incluirlas en ConstraintLayout con
<android.support.constraint.ConstraintLayout app:layout_optimizationLevel="standard|dimensions|chains"