android - tutorial - Espaciado uniforme de vistas usando ConstraintLayout

constraint layout vs relative layout

Question

Un uso común para LinearLayout es LinearLayout uniformemente (ponderar) vistas, por ejemplo:

¿Cómo implementar vistas espaciadas uniformemente como esta usando el nuevo ConstraintLayout ?

Enlaces de ConstraintLayout diseño para referencia: publicación de blog , video de sesión de E / S

Answer 1

Deberías leer sobre cadenas pesadas. Un ejemplo de código está aquí.

<android.support.constraint.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="wrap_content"
    >

    <TextView
        android:id="@+id/figure_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="1"
        />

    <TextView
        android:id="@+id/figure_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_1"
        tools:text="2"
        />

    <TextView
        android:id="@+id/figure_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_2"
        tools:text="3"
        />

    <TextView
        android:id="@+id/figure_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_3"
        tools:text="4"
        />
</android.support.constraint.ConstraintLayout>

Por lo tanto, configure android:layout_width="0dp" , app:layout_constraintHorizontal_weight="1" y vincule cada vista con vecinos como:

app:layout_constraintStart_toEndOf="@id/figure_2"
app:layout_constraintEnd_toStartOf="@id/figure_4"

Answer 2

Hay dos formas de lograr esto usando ConstraintLayout : Chains and Guidelines . Para usar Chains, asegúrese de estar usando ConstraintLayout Beta 3 o más reciente y si desea usar el editor de diseño visual en Android Studio, asegúrese de estar usando Android Studio 2.3 Beta 1 o más reciente.

Método 1 - Usando cadenas

Abra el editor de diseño y agregue sus widgets de manera normal, agregando restricciones principales según sea necesario. En este caso, he agregado dos botones con restricciones en la parte inferior del padre y el lado del padre (lado izquierdo para el botón Guardar y lado derecho para el botón Compartir):

Tenga en cuenta que en este estado, si volteo a la vista horizontal, las vistas no llenan el padre sino que están ancladas a las esquinas:

Resalte ambas vistas, ya sea haciendo clic con Ctrl / Cmd o arrastrando un cuadro alrededor de las vistas:

Luego haga clic derecho en las vistas y elija "Centrar horizontalmente":

Esto establece una conexión bidireccional entre las vistas (que es cómo se define una cadena). Por defecto, el estilo de cadena es "spread", que se aplica incluso cuando no se incluye ningún atributo XML. Seguir con este estilo de cadena pero establecer el ancho de nuestras vistas en 0dp permite que las vistas llenen el espacio disponible, extendiéndose uniformemente entre los padres:

Esto es más notable en la vista horizontal:

Si prefiere omitir el editor de diseño, el XML resultante se verá así:

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

<Button
    android:id="@+id/button_save"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_save_text"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="4dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button_share"
    app:layout_constraintHorizontal_chainStyle="spread" />

<Button
    android:id="@+id/button_share"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_share_text"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toRightOf="@+id/button_save"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Detalles:

• establecer el ancho de cada elemento en 0dp o MATCH_CONSTRAINT permite que las vistas llenen el elemento primario (opcional)
• las vistas se deben vincular bidireccionalmente (a la derecha de los enlaces del botón Guardar para compartir, a la izquierda de los enlaces del botón Compartir para guardar el botón), esto sucederá automáticamente a través del editor de diseño al elegir "Centrar horizontalmente"
• la primera vista en la cadena puede especificar el estilo de la cadena a través de layout_constraintHorizontal_chainStyle , consulte la Chains de varios estilos de cadena, si se omite el estilo de cadena, el valor predeterminado es "spread"
• la ponderación de la cadena se puede ajustar a través de layout_constraintHorizontal_weight
• este ejemplo es para una cadena horizontal, hay atributos correspondientes para cadenas verticales

Método 2: uso de una directriz

Abra su diseño en el editor y haga clic en el botón de la guía:

Luego seleccione "Agregar directriz vertical":

Aparecerá una nueva directriz, que por defecto, probablemente estará anclada a la izquierda en valores relativos (indicados por la flecha hacia la izquierda):

Haga clic en la flecha hacia la izquierda para cambiarla a un valor porcentual, luego arrastre la guía a la marca del 50%:

La guía ahora se puede usar como un ancla para otras vistas. En mi ejemplo, adjunté la derecha del botón Guardar y la izquierda del botón Compartir a la guía:

Si desea que las vistas llenen el espacio disponible, entonces la restricción debe establecerse en "Cualquier tamaño" (las líneas onduladas que se ejecutan horizontalmente):

(Esto es lo mismo que establecer el layout_width en 0dp ).

También se puede crear una guía en XML con bastante facilidad en lugar de usar el editor de diseño:

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

Answer 3

Para crear 2 vistas en la misma línea, igual ancho, solo necesita definir

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"  
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button1" />

</android.support.constraint.ConstraintLayout>

Nota

• ancho = 0dp ( MATCH_CONSTRAINT )
• La restricción de button1 y button2 debe gustar arriba

Resultado

MÁS
Si desea que View1 más grande que View2 , puede usar weight o percent .
Ejemplo, View1 ancho = 2 * View2 ancho usar peso

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button3"
        />

</android.support.constraint.ConstraintLayout>

Resultado

Ejemplo, View1 width = 2 * View2 width use percent

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 5"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.667"
        />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintWidth_percent="0.333"
        />

</android.support.constraint.ConstraintLayout>

Resultado

Answer 4

Pues si ayuda a alguien

la clave está aquí app:layout_constraintHorizontal_weight="1" y
Lo mejor del diseño de restricción es que admite la dependencia circular y esto es lo que he hecho usando exactamente eso.

Para el primer hijo
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

Para el segundo hijo

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

aquí está la demo completa

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputParent"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <EditText
        android:id="@+id/editTextParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/state" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputFirstChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/pin_code" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputSecondChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/country" />
</android.support.design.widget.TextInputLayout>