android - vehiculos - Diseño de restricción Centro de alineación vertical

restricciones de movilidad en bogota

Question

¿Cómo alinear verticalmente y centrar objetos en un diseño de restricción? Es posible alinear vertical u horizontalmente, pero no he encontrado una forma de centrar al mismo tiempo además de restringir las vistas entre dos líneas de cuadrícula.

Centro de alineación vertical:

Parece que el centrado es un gran problema con el diseño de restricción que me obliga a volver al diseño relativo de "centerInParent", "centerVertical" y "centerHorizontal".

Me gustaría crear el diseño encuadrado en rojo usando el diseño de restricción:

Desafortunadamente, la única forma en que encontré sin usar dos líneas de cuadrícula es con Relative y LinearLayouts anidados (¡qué diseño de restricción se suponía que resolvería este escenario exacto!).

Diseño con diseño relativo y lineal:

<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="@id/user_points"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:id="@+id/stat_1_layout"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/divider_1"
android:orientation="vertical">
<TextView
android:id="@+id/stat_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="10"
android:textSize="16dp"
android:textColor="@color/textSecondaryDark"
android:maxLines="1"/>
<TextView
android:id="@+id/stat_detail_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="Streak"
android:textSize="8sp"
android:textColor="@color/textSecondary"
android:maxLines="1"/>
</LinearLayout>
<View
android:id="@+id/divider_1"
android:layout_width="1dp"
android:layout_height="38dp"
android:layout_toLeftOf="@+id/stat_2_layout"
android:background="@drawable/linedivider"/>
<LinearLayout
android:id="@+id/stat_2_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:layout_marginRight="18dp"
android:layout_centerInParent="true"
android:orientation="vertical">
<TextView
android:id="@+id/stat_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="243"
android:textSize="16dp"
android:textColor="@color/textSecondaryDark"
android:maxLines="1"/>
<TextView
android:id="@+id/stat_detail_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="Calories Burned"
android:textSize="8sp"
android:textColor="@color/textSecondary"
android:maxLines="1"/>
</LinearLayout>
<View
android:id="@+id/divider_2"
android:layout_width="1dp"
android:layout_height="38dp"
android:layout_toRightOf="@+id/stat_2_layout"
android:background="@drawable/linedivider"/>
<LinearLayout
android:id="@+id/stat_3_layout"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_toRightOf="@+id/divider_2"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:id="@+id/stat_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="3200"
android:textSize="16dp"
android:textColor="@color/textSecondaryDark"
android:maxLines="1"/>
<TextView
android:id="@+id/stat_detail_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="Steps"
android:textSize="8sp"
android:textColor="@color/textSecondary"
android:maxLines="1"/>
</LinearLayout>
</RelativeLayout>

Answer 1

Es posible establecer la vista alineada al centro como un ancla para otras vistas. En el siguiente ejemplo, "@ + id / stat_2" está centrado horizontalmente en el elemento primario y sirve como un ancla para otras vistas en este diseño.

<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/stat_1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="center"
android:maxLines="1"
android:text="10"
android:textColor="#777"
android:textSize="22sp"
app:layout_constraintTop_toTopOf="@+id/stat_2"
app:layout_constraintEnd_toStartOf="@+id/divider_1" />
<TextView
android:id="@+id/stat_detail_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Streak"
android:textColor="#777"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="@+id/stat_1"
app:layout_constraintStart_toStartOf="@+id/stat_1"
app:layout_constraintEnd_toEndOf="@+id/stat_1" />
<View
android:id="@+id/divider_1"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:background="#ccc"
app:layout_constraintTop_toTopOf="@+id/stat_2"
app:layout_constraintEnd_toStartOf="@+id/stat_2"
app:layout_constraintBottom_toBottomOf="@+id/stat_detail_2" />
<TextView
android:id="@+id/stat_2"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:text="243"
android:textColor="#777"
android:textSize="22sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="@+id/stat_detail_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="Calories Burned"
android:textColor="#777"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="@+id/stat_2"
app:layout_constraintStart_toStartOf="@+id/stat_2"
app:layout_constraintEnd_toEndOf="@+id/stat_2" />
<View
android:id="@+id/divider_2"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:background="#ccc"
app:layout_constraintBottom_toBottomOf="@+id/stat_detail_2"
app:layout_constraintStart_toEndOf="@+id/stat_2"
app:layout_constraintTop_toTopOf="@+id/stat_2" />
<TextView
android:id="@+id/stat_3"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:maxLines="1"
android:text="3200"
android:textColor="#777"
android:textSize="22sp"
app:layout_constraintTop_toTopOf="@+id/stat_2"
app:layout_constraintStart_toEndOf="@+id/divider_2" />
<TextView
android:id="@+id/stat_detail_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="Steps"
android:textColor="#777"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="@+id/stat_3"
app:layout_constraintStart_toStartOf="@+id/stat_3"
app:layout_constraintEnd_toEndOf="@+id/stat_3" />
</android.support.constraint.ConstraintLayout>

Así es como funciona en el teléfono inteligente más pequeño (3.7 480x800 Nexus One) frente al teléfono inteligente más grande (5.5 1440x2560 Pixel XL)

Answer 2

Puede centrar fácilmente varias cosas creando una cadena. Funciona tanto vertical como horizontalmente.

Enlace a documentación oficial sobre cadenas

Editar para responder comentario :

<?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/first_score"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:text="10"
app:layout_constraintEnd_toStartOf="@+id/second_score"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/second_score"
app:layout_constraintBottom_toTopOf="@+id/subtitle"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintVertical_chainStyle="packed"
android:gravity="center"
/>
<TextView
android:id="@+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subtitle"
app:layout_constraintTop_toBottomOf="@+id/first_score"
app:layout_constraintBottom_toBottomOf="@+id/second_score"
app:layout_constraintStart_toStartOf="@id/first_score"
app:layout_constraintEnd_toEndOf="@id/first_score"
/>
<TextView
android:id="@+id/second_score"
android:layout_width="60dp"
android:layout_height="120sp"
android:text="243"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/thrid_score"
app:layout_constraintStart_toEndOf="@id/first_score"
app:layout_constraintTop_toTopOf="parent"
android:gravity="center"
/>
<TextView
android:id="@+id/thrid_score"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:text="3200"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/second_score"
app:layout_constraintTop_toTopOf="@id/second_score"
app:layout_constraintBottom_toBottomOf="@id/second_score"
android:gravity="center"
/>
</android.support.constraint.ConstraintLayout>

Tiene la cadena horizontal: first_score <=> second_score <=> third_score . second_score está centrado verticalmente. Los otros puntajes se centran verticalmente de acuerdo con él.

Definitivamente, puede crear un first_score <=> subtitle cadena vertical y centrarlo según second_score

Answer 3

Puede ser que no entendí completamente el problema, pero centrar toda la vista dentro de un RestraintLayout parece muy simple. Esto es lo que usé:

<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"
android:layout_gravity="center">

¡Las últimas dos líneas hicieron el truco!

Answer 4

Si tiene un ConstraintLayout con algún tamaño y una View secundaria con un tamaño más pequeño, puede lograr el centrado al restringir los dos bordes del niño a los mismos dos bordes del padre. Es decir, puedes escribir:

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

o

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

Debido a que la vista es más pequeña, estas restricciones son imposibles. Pero ConstraintLayout hará lo mejor que pueda, y cada restricción "atraerá" a la vista secundaria por igual, centrándola.

Este concepto funciona con cualquier vista de destino, no solo el padre.

Actualizar

A continuación se muestra XML que logra la IU deseada sin anidamiento de vistas y sin Guideline (aunque las pautas no son intrínsecamente malas).

<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="wrap_content"
android:background="#eee">
<TextView
android:id="@+id/title1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:gravity="center"
android:textColor="#777"
android:textSize="22sp"
android:text="10"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/divider1"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="@+id/label1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#777"
android:textSize="12sp"
android:text="Streak"
app:layout_constraintTop_toBottomOf="@+id/title1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/divider1"/>
<View
android:id="@+id/divider1"
android:layout_width="1dp"
android:layout_height="55dp"
android:layout_marginTop="12dp"
android:layout_marginBottom="12dp"
android:background="#ccc"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/title1"
app:layout_constraintRight_toLeftOf="@+id/title2"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="@+id/title2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:gravity="center"
android:textColor="#777"
android:textSize="22sp"
android:text="243"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/divider1"
app:layout_constraintRight_toLeftOf="@+id/divider2"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="@+id/label2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#777"
android:textSize="12sp"
android:text="Calories Burned"
app:layout_constraintTop_toBottomOf="@+id/title2"
app:layout_constraintLeft_toRightOf="@+id/divider1"
app:layout_constraintRight_toLeftOf="@+id/divider2"/>
<View
android:id="@+id/divider2"
android:layout_width="1dp"
android:layout_height="55dp"
android:layout_marginTop="12dp"
android:layout_marginBottom="12dp"
android:background="#ccc"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/title2"
app:layout_constraintRight_toLeftOf="@+id/title3"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="@+id/title3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:gravity="center"
android:textColor="#777"
android:textSize="22sp"
android:text="3200"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/divider2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="@+id/label3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#777"
android:textSize="12sp"
android:text="Steps"
app:layout_constraintTop_toBottomOf="@+id/title3"
app:layout_constraintLeft_toRightOf="@+id/divider2"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

Answer 5

Mostrándolo gráficamente.

El centrado en el padre se realiza restringiendo ambos lados al padre. Puede restringir objetos adicionales fuera del objeto centrado.

Nota. Cada flecha representa un atributo "app: layout_constraintXXX_toYYY =". (6 en la imagen)

Answer 6

 <TextView
android:id="@+id/tvName"
style="@style/textViewBoldLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Welcome"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>