android - dev - Vistas de grupo en ConstraintLayout para tratarlas como una vista única

constraint layout vs relativelayout

Question

Necesito aplicar algunas restricciones a un grupo de vistas en ConstraintLayout . Quiero agrupar estas vistas y continuar editando mientras el diseñador de diseño en Android studio las trata como una sola vista. ¿Hay una manera de hacerlo sin realmente envolver las vistas con un grupo de ViewGroup (otro diseño)? Si tal envoltorio es necesario, tal vez exista un diseño de envoltorio que venga con ConstraintLayout y permita agrupar objetos sin crear diseños pesados ​​como RelativeLayout .

Answer 1

Cadenas de restricción

Los desarrolladores de Android lanzaron recientemente una nueva versión de ConstraintLayout ( 1.0.2 a partir de hoy). Esta versión contiene una nueva característica principal: las Chains , que nos permite agrupar vistas en ConstraintLayout .

Las cadenas proporcionan un comportamiento grupal en un solo eje (horizontal o verticalmente).

Un conjunto de widgets se considera una cadena si se unen mediante una conexión bidireccional

Una vez que se crea una cadena, hay dos posibilidades:

• Difundir los elementos en el espacio disponible.
• Una cadena también se puede "empaquetar", en ese caso los elementos se agrupan

Actualmente, necesitas usar la siguiente dependencia de Gradle para usar esta función (ya que es un alfa):

 compile ''com.android.support.constraint:constraint-layout:1.0.0-alpha9''

Here puede encontrar la versión más reciente de ConstraintLayout para usar en sus proyectos.

Hasta Android Studio 2.3 , el diseñador de la interfaz de usuario de Android Studio no admitía la creación de cadenas, ya que no se podían agregar restricciones bidireccionales. La solución fue crear estas restricciones en XML manualmente, como lo menciona TranslucentCloud . Desde Android Studio 2.3 (actualmente solo en canal canario), las cadenas también son compatibles con un editor de IU (como GoRoS menciona GoRoS en los comentarios).

Ejemplo

A continuación se muestra un ejemplo de cómo colocar dos vistas juntas en medio de una pantalla usando ConstraintLayout y cadenas :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5"
        app:layout_constraintVertical_chainPacked="true"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"/>
</android.support.constraint.ConstraintLayout>

Actualización (enero de 2018) por @Mateus Gondim

En las versiones recientes, debe usar la app:layout_constraintVertical_chainStyle="packed" lugar de la app:layout_constraintVertical_chainPacked="true"

Answer 2

Puedes usar

android.support.constraint.Guideline

para agrupar elementos juntos.

Agregue una Guía (vertical u horizontal) y luego úselo como un ancla para las otras vistas. Este es un ejemplo simple de centrar horizontalmente dos vistas de texto agrupadas: (mostrando la vista de diseño en AS)

<?xml version="1.0" encoding="utf-8"?>
<ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:background="@android:color/white"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">


    <TextView
        android:id="@+id/top_text"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@android:color/holo_red_light"
        android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:text="Above"
        tools:text="Above" />

    <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" />

    <TextView
        android:id="@+id/bottom_text"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_bright"
        android:textSize="16sp"
        app:layout_constraintTop_toBottomOf="@+id/guideline"
        android:text="Below"
        tools:text="Below" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Right vertically centered"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Right vertically centered"/>
</ConstraintLayout>