Espaciar uniformemente las vistas usando ConstraintLayout

Hay dos maneras de lograr esto usando ConstraintLayout : Cadenas y Directrices . Para usar las cadenas, asegúrate de usar ConstraintLayout Beta 3 o posterior y, si quieres usar el editor de diseño visual en Android Studio, asegúrate de utilizar Android Studio 2.3 Beta 1 o posterior.

Método 1 – Uso de cadenas

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

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

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

A continuación, haga clic con el botón derecho en las vistas y seleccione "Centrar horizontalmente":

Esto establece una conexión bidireccional entre las vistas (que es cómo se define una Cadena). Por defecto el estilo de la 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 a 0dp permite que las vistas llenen el espacio disponible, extendiéndose uniformemente a través del padre:

Esto es más notable en la vista del paisaje:

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_toLeftOf="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 padre (opcional)
• Las vistas deben estar unidas entre sí de forma bidireccional (derecho de guardar vínculos de botón al botón de compartir, a la izquierda de los enlaces de botón de compartir para guardar el botón), esto sucederá automáticamente a través del editor de diseño al elegir "Center Horizontalmente"
• La primera vista de la cadena puede especificar el estilo de la cadena a través de layout_constraintHorizontal_chainStyle , consulte la documentación de los diversos estilos de cadenas, 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 las cadenas verticales

Método 2 – Uso de una guía

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

A continuación, seleccione "Añadir guía vertical":

Aparecerá una nueva guía que, por defecto, probablemente se anclará 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 y, a continuación, arrastre la línea de guía hasta la marca del 50%

Ahora se puede utilizar la guía como ancla para otras vistas. En mi ejemplo, adjunto la derecha del botón de guardar y la izquierda del botón de compartir a la directriz:

Si desea que las vistas llenen el espacio disponible, 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 ).

Una directriz también se puede crear en XML con bastante facilidad en lugar de utilizar 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" /> 

Bueno, si ayuda a alguien

La clave está aquí app:layout_constraintHorizontal_weight="1" y
La mejor cosa sobre la disposición de la restricción es que apoya la dependencia circular y aquí 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 demostración 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>