Cómo crear una IU responsiva con ConstraintLayout   Parte de Android Jetpack.

Si bien la ausencia de restricciones no causa errores de compilación, el editor de diseño mostrará un error en la barra de herramientas. Para ver los errores y otras advertencias, haz clic en Show Warnings and Errors . Para evitar que falten restricciones, el editor de diseño agrega restricciones automáticamente con las funciones Infer Constraints y Autoconnect.

Cómo agregar ConstraintLayout a tu proyecto

Para usar ConstraintLayout en tu proyecto, sigue estos pasos:

1. Asegúrate de tener el repositorio maven.google.com declarado en el archivo settings.gradle:

   Groovy

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. Agrega la biblioteca como una dependencia en el archivo build.gradle a nivel del módulo, como se muestra en el siguiente ejemplo. La versión más reciente puede ser diferente de la que se muestra en el ejemplo.

   Groovy

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0")
   }
   

3. En la barra de herramientas o notificación de sincronización, haz clic en Sync Project with Gradle Files.

Ya está todo listo para crear el diseño con ConstraintLayout.

Cómo convertir un diseño

Para convertir un diseño existente en uno de ConstraintLayout, sigue estos pasos:

1. Abre tu diseño en Android Studio y haz clic en la pestaña Design, en la parte inferior de la ventana del editor.
2. En la ventana Component Tree, haz clic con el botón derecho en el diseño y, luego, en Convert LinearLayout to ConstraintLayout.

Cómo crear un nuevo diseño

Para iniciar un archivo de diseño con restricciones nuevo, sigue estos pasos:

1. En la ventana Project, haz clic en la carpeta del módulo y selecciona File > New > XML > Layout XML.
2. Ingresa un nombre para el archivo de diseño y "androidx.constraintlayout.widget.ConstraintLayout" en Root Tag.
3. Haz clic en Finish.

Cómo agregar o quitar una restricción

Para agregar una restricción, haz lo siguiente:

1. Arrastra una vista desde la ventana Palette hasta el editor.

   Cuando agregas una vista en un ConstraintLayout, se muestra en un cuadro de límite con controladores de cambio de tamaño cuadrados en cada esquina y controladores de restricciones circulares en cada lado.

2. Haz clic en la vista para seleccionarla.
3. Realiza una de las siguientes acciones:
   • Haz clic en un controlador de restricción y arrástralo hasta un punto de anclaje disponible. Ese punto puede ser el borde de otra vista, el borde del diseño o una guía. Ten en cuenta que, a medida que arrastras el controlador de restricciones, el editor de diseño muestra posibles anclas de conexión y superposiciones azules.

   • Haz clic en uno de los botones de Create a connection en la sección Layout de la ventana Attributes, como se muestra en la figura 4.

     

     Figura 4: La sección Layout de la ventana Attributes te permite crear conexiones.

Cuando se crea la restricción, el editor le otorga un margen predeterminado para separar las dos vistas.

Cuando crees restricciones, recuerda las siguientes reglas:

• Cada vista debe tener al menos dos restricciones: una horizontal y otra vertical.
• Puedes crear restricciones solo entre un controlador de restricción y un punto de anclaje que compartan el mismo plano. Un plano vertical (los lados izquierdo y derecho) de una vista solo se puede restringir a otro plano vertical, y los modelos de referencia pueden limitarse solo a otras líneas de base.
• Cada identificador de restricción se puede usar para una sola restricción, pero es posible crear múltiples restricciones desde diferentes vistas en el mismo punto de anclaje.

Para borrar una restricción, puedes optar por alguna de las siguientes alternativas:

• Haz clic en una restricción para seleccionarla y, luego, en Borrar.

• Presiona Ctrl y haz clic (Comando y clic en macOS) en un ancla de restricción. La restricción se vuelve roja para indicar que puedes hacer clic para borrarla, como se muestra en la figura 5.

  

  Figura 5: Cuando una restricción se muestra de color rojo, puedes hacer clic para borrarla.

• En la sección Layout de la ventana Attributes, haz clic en un anclaje de restricción, como se muestra en la figura 6.

  

  Figura 6: Haz clic en un anclaje de restricción para borrarlo.

Si agregas restricciones opuestas en una vista, estas se enrollan como un resorte para indicar las fuerzas opuestas, como se muestra en el video 2. El efecto es más visible cuando el tamaño de la vista se define como "Fixed" o "Wrap content", en cuyo caso la vista se centra entre las restricciones. En cambio, si quieres que la vista se estire para ajustarse a las restricciones, cambia el tamaño a "Match constraints". Si quieres mantener el tamaño actual, pero mover la vista para que no esté centrada, ajusta el sesgo de restricciones.

Puedes usar restricciones para lograr diferentes tipos de comportamiento de diseño, como se describe en las siguientes secciones.

Posición superior

Posición de orden

Alineación

Alineación de línea de base

Cómo aplicar una restricción a una guía

Cómo aplicar una restricción a una barrera

Cómo ajustar el sesgo de restricciones

Cuando agregas una restricción a ambos lados de una vista, y el tamaño de la misma dimensión es "Fixed" o "Wrap content", la vista se centra entre las dos restricciones con un sesgo del 50% de forma predeterminada. Para ajustar el sesgo, arrastra el control deslizante en la ventana Attributes o arrastra la vista, como se muestra en el video 3.

En cambio, si quieres que la vista se estire para ajustarse a las restricciones, cambia el tamaño a "Match constraints".

Cómo ajustar el tamaño de la vista

Puedes usar los controladores de las esquinas para cambiar el tamaño de una vista, pero esta acción fija el tamaño dentro del código, por lo que la vista no cambia de tamaño para diferentes contenidos o tamaños de pantalla. Para seleccionar un modo de tamaño diferente, haz clic en una vista y abre la ventana Attributes en el lado derecho del editor.

Cerca de la parte superior de la ventana Attributes, se encuentra el inspector de vistas, que incluye controles para varios atributos de diseño, como se muestra en la figura 14. Esto solo está disponible para vistas en un diseño de restricción.

Para cambiar la forma en que se calculan la altura y el ancho, haz clic en los símbolos indicados con texto destacado 3 en la Figura 14. Estos símbolos representan el modo de tamaño de la siguiente manera. Haz clic en el símbolo para alternar entre estas opciones de configuración:

• Fixed: Especifica una dimensión específica en el siguiente cuadro de texto o cambia el tamaño de la vista en el editor.
• Wrap Content: La vista se expande solo lo necesario para ajustarse a su contenido.
• layout_constrainedWidth

Establece este valor en true para permitir que la dimensión horizontal cambie para respetar las restricciones. De forma predeterminada, un widget configurado en WRAP_CONTENT no está limitado por restricciones.

• Match Constraints: la vista se expande tanto como sea posible para cumplir con las restricciones de cada lado, después de considerar los márgenes de la vista. Sin embargo, puedes modificar ese comportamiento con los siguientes atributos y valores. Estos atributos solo tienen efecto cuando estableces que el ancho de la vista coincida con las restricciones:
  • layout_constraintWidth_min

    Toma una dimensión en dp para el ancho mínimo de la vista.

  • layout_constraintWidth_max

    Toma una dimensión en dp para el ancho máximo de la vista.

  Sin embargo, si la dimensión determinada tiene una sola restricción, la vista se expande para ajustarse a su contenido. El uso de este modo en el ancho o la altura también te permite establecer una proporción de tamaño.

Establecimiento del tamaño como proporción

Puedes establecer el tamaño de la vista en una proporción, como 16:9, si al menos una de las dimensiones de la vista está configurada en "Match Constraints" (0dp). Para habilitar la proporción, haz clic en Toggle Aspect Ratio Constraint (leyenda 1 en la figura 14) y, luego, ingresa la proporción width:height en la entrada que aparece.

Si tanto el ancho como la altura están configurados para ajustarse a las restricciones, puedes hacer clic en Toggle Aspect Ratio Constraint para seleccionar qué dimensión se basa en una proporción de la otra. El inspector de vistas conecta los bordes correspondientes con una línea continua para indicar qué dimensión se establece como proporción.

Por ejemplo, si estableces ambos lados como "Match Constraints", haz clic en Toggle Aspect Ratio Constraint dos veces para definir el ancho como proporción de la altura. El tamaño total depende de la altura de la vista, que se puede definir de cualquier forma, como se muestra en la figura 15.

Cómo ajustar los márgenes de la vista

Para que tus vistas estén espaciadas de manera uniforme, haz clic en Margin en la barra de herramientas para seleccionar el margen predeterminado para cada vista que agregues al diseño. Cualquier cambio que realices en el margen predeterminado se aplicará solo a las vistas que agregues a partir de ese momento.

Para controlar el margen de cada vista en la ventana Attributes, haz clic en el número de la línea que representa cada restricción. En la figura 14, la leyenda 4 muestra que el margen inferior se estableció en 16 dp.

Figura 16: Botón Margin de la barra de herramientas

Todos los márgenes que ofrece la herramienta son factores de 8 dp, lo que te ayudará a alinear las vistas con las recomendaciones de cuadrícula cuadrada de 8 dp de Material Design.

Cómo controlar grupos lineales con una cadena

Una cadena es un grupo de vistas que están vinculadas entre sí con restricciones de posición bidireccionales. Dentro de una cadena, se pueden distribuir las vistas de manera horizontal o vertical.

Las cadenas se pueden diseñar de una de las siguientes maneras:

1. Spread: Las vistas se distribuyen uniformemente después de restar los márgenes. Es el valor predeterminado.
2. Distribuido en el interior: La primera y la última vista se fijan a las restricciones de cada extremo de la cadena y el resto se distribuye de manera uniforme.
3. Ponderada: Cuando la cadena está configurada en spread o spread inside, puedes completar el espacio restante configurando una o más vistas para que "coincidan con las restricciones" (0dp). De forma predeterminada, el espacio se distribuye de manera uniforme entre cada vista configurada para "coincidir con las restricciones", pero puedes asignar un peso de importancia a cada vista con los atributos layout_constraintHorizontal_weight y layout_constraintVertical_weight. Esto funciona de la misma manera que layout_weight en un diseño lineal: la vista con el valor de ponderación más alto obtiene la mayor cantidad de espacio, y las vistas que tienen el mismo peso obtienen la misma cantidad de espacio.
4. Packed: Las vistas se agrupan después de restar los márgenes. Puedes ajustar el sesgo de toda la cadena (izquierda/derecha o arriba/abajo) cambiando el sesgo de la vista de extremo de la cadena.

La vista de "extremo" de la cadena (la vista más a la izquierda en una cadena horizontal [en un diseño de izquierda a derecha] y la vista más arriba en una cadena vertical) define el estilo de la cadena en XML. Sin embargo, puedes seleccionar cualquier vista en la cadena y hacer clic en el botón de la cadena que aparece debajo de la vista para alternar entre Spread, Spread inside y Packed.

Para crear una cadena, haz lo siguiente, como se muestra en el video 4:

1. Selecciona todas las vistas que se incluirán en la cadena.
2. Haz clic con el botón derecho en una de las vistas.
3. Selecciona Cadena.
4. Selecciona Centrar horizontalmente o Centrar verticalmente.

A continuación, se mencionan algunos aspectos que debes tener en cuenta cuando usas cadenas:

• Una vista puede formar parte de una cadena horizontal y vertical, por lo que puedes crear diseños de cuadrícula flexibles.
• La cadena funciona correctamente solo si cada extremo está restringido a otro objeto en el mismo eje, como se muestra en la figura 14.
• Aunque la orientación de una cadena es vertical u horizontal, cuando se la usa no se alinean las vistas en esa dirección. Para lograr la posición adecuada de cada vista en la cadena, incluye otras restricciones, como las restricciones de alineación.

Cómo crear restricciones automáticamente

En lugar de agregar restricciones a cada vista a medida que las colocas en el diseño, puedes mover cada vista a las posiciones que deseas en el editor de diseño y, luego, hacer clic en Infer Constraints para crear restricciones de manera automática.

Infer Constraints analiza el diseño para determinar el conjunto de restricciones más eficaz para todas las vistas. Restringe las vistas a sus posiciones actuales y proporciona flexibilidad. Es posible que debas realizar ajustes para que el diseño responda como lo deseas ante distintos tamaños de pantalla y orientaciones.

Autoconnect to Parent es una función independiente que puedes habilitar. Cuando está habilitada y agregas vistas secundarias a una superior, esta función crea automáticamente dos o más restricciones para cada vista a medida que las agregas al diseño, pero solo cuando sea apropiado restringir la vista al diseño de nivel superior. La conexión automática no crea restricciones para otras vistas del diseño.

La conexión automática está inhabilitada de manera predeterminada. Para habilitarla, haz clic en Enable Autoconnection to Parent en la barra de herramientas del editor de diseño.

Animaciones de fotogramas clave

Dentro de un ConstraintLayout, puedes animar los cambios de tamaño y posición de los elementos usando ConstraintSet y TransitionManager.

Un ConstraintSet es un objeto ligero que representa las restricciones, los márgenes y el padding de todos los elementos secundarios dentro de un ConstraintLayout. Cuando aplicas un ConstraintSet a un ConstraintLayout que se muestra, el diseño actualiza las restricciones de todos sus elementos secundarios.

Para compilar una animación con ConstraintSet, especifica dos archivos de diseño que actúen como fotogramas clave de inicio y fin para la animación. Luego, puedes cargar un ConstraintSet del segundo archivo de fotogramas clave y aplicarlo al ConstraintLayout que se muestra.

En el siguiente ejemplo de código, se muestra cómo mover un solo botón hasta la parte inferior de la pantalla para realizar una animación.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Recursos adicionales

ConstraintLayout se usa en la app de demostración de Sunflower.