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

Prueba el método de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información para trabajar con diseños en Compose.
ConstraintLayout en Compose →

ConstraintLayout te permite crear diseños grandes y complejos con una jerarquía de vistas plana, sin grupos de vistas anidadas. Es similar a RelativeLayout en el sentido de que todas las vistas se presentan de acuerdo con las relaciones entre las vistas del mismo nivel y el diseño de nivel superior, pero es más flexible que RelativeLayout y más fácil de usar con el editor de diseño de Android Studio.

Toda la potencia de ConstraintLayout está disponible directamente desde las herramientas visuales del editor de diseño, ya que la API y el editor de diseño son especialmente diseñadas el uno para el otro. Puedes crear tu diseño con ConstraintLayout arrastrando en lugar de editar XML.

En esta página, se muestra cómo compilar un diseño con ConstraintLayout en Android Studio 3.0 o una versión posterior Para obtener más información sobre el editor de diseño, consulta Cómo compilar una IU con un editor de diseño.

Para ver una variedad de diseños que puedes crear con ConstraintLayout, haz lo siguiente: consulta la Proyecto de ejemplos de Constraint Layout en GitHub.

Descripción general de las restricciones

Para definir la posición de una vista en ConstraintLayout, agrega lo siguiente: al menos una restricción horizontal y una vertical para la vista. Cada restricción representa una conexión o alineación con otra vista, el diseño de nivel superior o una un lineamiento invisible. Cada restricción define la posición de la vista a lo largo del en el eje vertical u horizontal. Cada vista debe tener al menos una restricción para cada eje, pero a menudo se necesitan más.

Cuando sueltas una vista en el editor de diseño, esta permanece incluso donde la dejas si no tiene restricciones. Esto es solo para facilitar la edición. Si una vista no tiene Cuando ejecutas tu diseño en un dispositivo, este se dibuja en la posición [0,0]. (esquina superior izquierda).

En la figura 1, el diseño se ve bien en el editor, pero no hay orientación vertical. restricción de la vista C. Cuando este diseño dibuje en un dispositivo, ver C horizontalmente se alinea con los bordes izquierdo y derecho de la vista A, pero aparece en la parte superior de la pantalla porque no tiene restricción vertical.

Figura 1: El editor muestra la vista C debajo de la A, pero no tiene restricción vertical.

Figura 2: La vista C ahora tiene restricción vertical debajo de la vista A.

Aunque una restricción faltante no causa un error de compilación, el diseño El editor indica que faltan restricciones como un error en la barra de herramientas. Para ver y otras advertencias, haz clic en Mostrar advertencias y errores. Para ayudarte a evitar que falten restricciones, el editor de diseño agrega automáticamente limitaciones para ti con la Infiere y conecta automáticamente restricciones atributos.

Cómo agregar ConstraintLayout a tu proyecto

Para usar ConstraintLayout en tu proyecto, sigue estos pasos:

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

    Groovy

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

    Kotlin

        dependencyResolutionManagement {
      ...
      repositories {
          google()
      }
    }
  2. Agrega la biblioteca como una dependencia en el módulo build.gradle, como se muestra en el siguiente ejemplo. Novedades podría ser diferente de la que se muestra en el ejemplo.

    Groovy

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

    Kotlin

    dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01")
    // To use constraintlayout in compose
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01")
}
  3. En la barra de herramientas o notificación de sincronización, haz clic en Sync Project with Gradle. Archivos

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

Cómo convertir un diseño

Figura 3: El menú para convertir un diseño en ConstraintLayout

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 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 Convierte LinearLayout en 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 Archivo > Nuevo > XML > XML de diseño.
  2. Ingresa un nombre para el archivo de diseño y, luego, ingresa "androidx.constraintlayout.widget.ConstraintLayout" para el directorio Root Etiqueta:
  3. Haz clic en Finish.

Cómo agregar o quitar una restricción

Para agregar una restricción, haz lo siguiente:

Video 1: El lado izquierdo de la vista está restringido a la izquierda del elemento superior.

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

    Cuando agregas una vista en una ConstraintLayout, se muestra en un cuadro delimitador con controladores de cambio de tamaño cuadrados en cada esquina y circulares controladores de restricciones 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. Este punto puede ser el borde de otra vista, el borde del diseño o lineamientos. Ten en cuenta que, a medida que arrastras el controlador de restricciones, la sección de Layout El editor muestra posibles anclas de conexión y superposiciones azules.

    • Haz clic en una de las pestañas Crear una conexión botones de la sección Layout de la ventana Attributes, como se muestra a continuación. en la figura 4.

      Figura 4: El diseño de la ventana Attributes te permite crear conexiones de red.

Cuando se crea la restricción, el editor le otorga default margin para separar las dos vistas.

Cuando crees restricciones, recuerda las siguientes reglas:

  • Cada vista debe tener al menos dos restricciones: una horizontal y una vertical.
  • Solo puedes crear restricciones entre un controlador de restricciones y un ancla punto que comparten el mismo plano. Un plano vertical, a ambos lados lados, de una vista puede restringirse solo a otro plano vertical, y los modelos de referencia pueden limitarse solo a otros modelos de referencia.
  • Cada controlador de restricciones puede usarse para una sola restricción, pero puedes crear varias restricciones desde diferentes vistas al 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.

  • Control y clic (Comando y clic en macOS) de la restricción. La restricción se vuelve roja para indicar que puedes hacer clic como se muestra en la figura 5.

    Figura 5: Una restricción roja indica en el que puedes hacer clic para borrarlos.

  • 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 una restricción ancla para borrarlo.

Video 2: Agrega una restricción opuesta a una existente.

Si agregas restricciones opuestas en una vista, las líneas de restricción se vuelven como un resorte para indicar las fuerzas opuestas, como se muestra en el video 2. El El efecto es más visible cuando el tamaño de la vista se establece como "fijo" o "envolver contenido", en cuyo caso, la vista se centra entre las restricciones. Si prefieres que la vista se estire para ajustarse a las restricciones cambiar el tamaño a “coincidir con restricciones”. Si quieres mantener el tamaño actual y mover la vista para que no esté centrada, ajustar el sesgo de restricciones.

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

Posición superior

Restringe el lado de una vista al borde correspondiente del diseño.

En la figura 7, el lado izquierdo de la vista está conectado al borde izquierdo de la elemento superior. Puedes definir la distancia desde el borde con margen.

Figura 7: Una restricción horizontal para el elemento superior.

Posición de orden

Define el orden de aparición de dos vistas, ya sea de forma vertical o horizontalmente.

En la figura 8, la B está restringida para estar siempre a la derecha de A, y la C tiene restringido debajo de A. Sin embargo, estas restricciones no implican alineación, por lo que B puede moverse hacia arriba y hacia abajo.

Figura 8: Horizontal y vertical “compute.vmExternalIpAccess”.

Alineación

Alinea el borde de una vista con el mismo borde de otra vista.

En la figura 9, el lado izquierdo de B está alineado con el lado izquierdo de A. Si quieres para alinear los centros de vistas, crea una restricción en ambos lados.

Puedes compensar la alineación arrastrando la vista desde la restricción hacia adentro. Por ejemplo, en la figura 10, se muestra B con una alineación de desplazamiento de 24 dp. El desplazamiento es definida por el margen de la vista restringida.

También puedes seleccionar todas las vistas que deseas alinear y, luego, hacer clic Alinear en la barra de herramientas para seleccionar el tipo de alineación.

Figura 9: Alineación horizontal “compute.vmExternalIpAccess”.

Figura 10: Un desplazamiento horizontal restricción de alineación.

Alineación de línea de base

Alinea la línea de base de texto de una vista con la línea de base de texto de otra.

En la figura 11, la primera línea de B está alineada con el texto de A.

Para crear una restricción de modelo de referencia, haz clic con el botón derecho en la vista de texto que desees limitar y, luego, en Show Baseline. Luego, haz clic en el texto línea de base y arrastra la línea a otra línea de base.

Figura 11: Una alineación de línea de base “compute.vmExternalIpAccess”.

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

Puedes agregar una guía vertical u horizontal que te permita restringir tu y es invisible para los usuarios de tu app. Puedes posicionar la guía dentro del diseño en función de unidades dp o un porcentaje relativo a la borde del diseño.

Para crear un lineamiento, haz clic en Lineamientos. en la barra de herramientas y haz clic en Add Vertical Guideline o Add Lineamiento horizontal.

Arrastra la línea punteada para reubicarla y haz clic en el círculo que está en el borde de el lineamiento para activar o desactivar el modo de medición.

Figura 12: Una vista limitada a una lineamientos.

Cómo aplicar una restricción a una barrera

Similar a una guía, una barrera es una línea invisible que puedes restringir la vista, salvo que una barrera no define su propia posición. En cambio, la barrera se mueve según la posición de las vistas que contiene. Este es útil cuando deseas restringir una vista a un conjunto de vistas en lugar de a una vista específica.

Por ejemplo, en la figura 13, la vista C está restringida a la derecha de una barrera. La barrera se fija en el "fin". (o en el lado derecho, de izquierda a derecha, de las vistas A y B. La barrera se mueve según el lado derecho de la vista A o de la vista B es el más a la derecha.

Para crear una barrera, sigue estos pasos:

  1. Haz clic en Lineamientos. en la barra de herramientas y haz clic en Add Vertical Barrier. Agrega una barrera horizontal.
  2. En la ventana Component Tree, selecciona las vistas que desees. barrera y arrastrarlas al componente de barrera.
  3. Selecciona la barrera en Component Tree, abre la Atributos y, luego, establece barrierAddress.

Ahora puedes crear una restricción desde otra vista hasta la barrera.

También puedes restringir las vistas que están dentro de la barrera a los barrera. Así, puedes alinear todas las vistas de la barrera entre sí incluso si no sabes qué vista es la más larga o la más alta.

También puedes incluir una guía dentro de una barrera para garantizar un "mínimo" para la barrera.

Figura 13: La vista C está restringida a una barrera, que se mueve según la posición y el tamaño de las vistas A y B.

Cómo ajustar el sesgo de restricciones

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

En cambio, si deseas que la vista se estire para ajustarse a las restricciones, cambiar el tamaño a “coincidir con restricciones”.

Video 3: Ajustar el sesgo de restricciones

Cómo ajustar el tamaño de la vista

Figura 14: Cuando seleccionas una vista, La ventana Attributes incluye controles para 1 proporción de tamaño, 2 borrar restricciones, 3 modo de alto o ancho, 4 márgenes y 5 Sesgo de restricción. También puedes destacar restricciones individuales en el editor de diseño si haces clic en ellas en el 6.

Puedes usar los controladores de las esquinas para cambiar el tamaño de una vista, pero esto codifica la tamaño: la vista no cambia de tamaño para diferentes tamaños de contenido o pantalla. Para Selecciona un modo de tamaño diferente, haz clic en una vista y abre la sección Atributos. a la derecha 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. Este es solo está disponible para vistas con un diseño de restricción.

Para cambiar la forma en que se calculan la altura y el ancho, haz clic en el indicados con el 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 activar o desactivar entre estas configuraciones:

  • Fija: Puedes especificar una dimensión específica en el siguiente cuadro de texto o por cambiar el tamaño de la vista en el editor.
  • Wrap Content: La vista se expande solo lo necesario para ajustarse a su contenidos.
    • layout_constraintWidth

      • Configúralo en true para permitir que se cambie la dimensión horizontal a respetar las restricciones. De forma predeterminada, un widget se establece en WRAP_CONTENT no se ve limitada por restricciones.

  • Match Constraints: la vista se expande tanto como sea posible para cumplir con restricciones a cada lado, después de considerar los márgenes de la vista. Sin embargo, modificar ese comportamiento con los siguientes atributos y valores. Estos Los atributos solo tienen efecto cuando estableces el ancho de la vista en "match constraints":
    • 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 solo una restricción, la vista se expande para adaptarse a su contenido. Usar este modo en el alto o el ancho también te permite establecer una proporción de tamaño.

Establecimiento del tamaño como proporción

Figura 15: La vista está configurada en un aspecto de 16:9 con el ancho según una proporción de la altura.

Puedes establecer el tamaño de la vista en una proporción, como 16:9, si al menos uno de los Ver dimensiones se estableció en "coincidir con restricciones" (0dp). Para habilitar el proporción, haz clic en Toggle Aspect Ratio Constraint (texto destacado). 1 en la figura 14) y, luego, ingresa el width:height en la entrada que aparece.

Si tanto el ancho como la altura están configurados para coincidir con las restricciones, Puedes hacer clic en Toggle Aspect Ratio Constraint para seleccionar qué dimensión se basa en una relación entre sí. El inspector de vistas indica qué dimensión está configurada como conectando los bordes correspondientes con una línea sólida.

Por ejemplo, si estableces ambos lados como “coincidir restricciones”, haz clic en Activar o desactivar Aspect Ratio Constraint dos veces para establecer el ancho como una proporción de la altura. El tamaño completo está determinado por la altura de la vista, que se puede definir en de ninguna manera, como se muestra en la figura 15.

Cómo ajustar los márgenes de la vista

Para espaciar las vistas de manera uniforme, haz clic en Margen. en la barra de herramientas para seleccionar el margen predeterminado de cada vista que agregues al . Cualquier cambio que realices en el margen predeterminado se aplicará solo a las vistas que agregar a partir de ese momento.

Puedes controlar el margen de cada vista en la ventana Attributes: haciendo clic en el número de la línea que representa cada restricción. En la Figura 14, el texto destacado 4 muestra que el margen inferior está establecido en 16dp.

Figura 16: El margen de la barra de herramientas .

Todos los márgenes que ofrece la herramienta son factores de 8 dp para ayudar a alinear tus vistas. según las recomendaciones de cuadrícula cuadrada de 8 dp de Material Design.

Cómo controlar grupos lineales con una cadena

Figura 17: Una cadena horizontal con dos vistas.

Una cadena es un grupo de vistas que están vinculadas entre sí con de posición. Las vistas dentro de una cadena se pueden distribuir en sentido horizontal o vertical.

Figura 18: Ejemplos de cada cadena estilo.

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

  1. Spread: Las vistas se distribuyen uniformemente después de que los márgenes se distribuyen. tener en cuenta. Es el valor predeterminado.
  2. Distribuir por dentro: La primera y la última vista se fijan en la restricciones en cada extremo de la cadena, y el resto se distribuidos.
  3. Ponderada: Cuando la cadena está configurada en spread, o bien profundo, puedes llenar el espacio restante estableciendo uno o más vistas para “coincidir con restricciones” (0dp). De forma predeterminada, el espacio es distribuida de forma uniforme entre cada vista que esté configurada como “ajustar restricciones”, pero puedes asignar un peso de importancia a cada vista usando el 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 con el mismo peso tienen la misma cantidad de espacio.
  4. Empaquetados: Las vistas se agrupan después de que se contabilizan los márgenes. . Puedes ajustar el sesgo de toda la cadena: izquierda o derecha, o arriba o hacia abajo; se debe cambiar el "cabezal" de la cadena sesgo de vista.

La "cabeza" de la cadena (la vista del extremo izquierdo en una cadena horizontal) (en un diseño de izquierda a derecha) y la vista superior en una cadena vertical: define el estilo de la cadena en XML. Sin embargo, puedes alternar entre spread, spread through y pack seleccionando cualquier vista de la cadena y haciendo clic en el botón de la cadena que aparece debajo de la vista.

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 Cadenas.
  4. Selecciona Center Horizontally o Center Vertically.

Video 4: Creación de una cadena horizontal

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

  • Una vista puede formar parte de una cadena horizontal y de una vertical, de modo que crear diseños de cuadrícula flexibles.
  • Una 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 horizontal o vertical, usar una no alinea las vistas en esa dirección. Para lograr la posición correcta para cada vista en la cadena, incluyen otras restricciones, como restricciones de alineación.

Cómo crear restricciones automáticamente

En lugar de agregar restricciones a cada vista a medida que las ubicas en el diseño, puedes mover cada vista a las posiciones que desees en el editor de diseño y Luego, haz clic en Infer Constraints. para crear restricciones automáticamente.

Infer Constraints analiza el diseño para determinar el conjunto más eficaz. de restricciones para todas las vistas. Limita las vistas a sus posiciones actuales. a la vez que ofrece flexibilidad. Es posible que debas realizar ajustes para realizar la responde como lo deseas a diferentes tamaños y orientaciones de pantalla.

Autoconnect to Parent es una función independiente que puedes habilitar. Cuándo está habilitada y agregas vistas secundarias a una superior, esta función crea dos o más restricciones para cada vista a medida que las agregas al solo cuando sea apropiado restringir la vista al elemento 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 Habilitar Conexión automática con la red superior en la barra de herramientas del editor de diseño.

Animaciones de fotogramas clave

Dentro de una ConstraintLayout, puedes animar los cambios de tamaño y la posición de los elementos ConstraintSet y TransitionManager

Un ConstraintSet es un objeto liviano que representa la límites, márgenes y relleno de todos los elementos secundarios dentro de una ConstraintLayout Cuando aplicas un ConstraintSet a una ConstraintLayout mostrado, el diseño actualiza las restricciones de a todos sus hijos.

Para compilar una animación con ConstraintSet, especifica dos diseños. que actúan como fotogramas clave de inicio y finalización de la animación. Luego, puedes cargar un ConstraintSet del segundo archivo de fotogramas clave y aplícalo al se muestra ConstraintLayout.

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

// 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 el Girasol app de demo.