android - tutorial - ¿Cómo usar las nuevas características en el diseño de restricción 1.1?

constraintlayout linearlayout

Question

¿Alguien sabe cómo usar las nuevas funciones en el diseño de restricción 1.1, a saber, barreras y dimensiones basadas en porcentajes? No hay absolutamente ninguna documentación disponible en línea, y la reciente charla de Google I / O sobre herramientas de diseño se cubre en detalle solo los marcadores de posición. Por cierto, descubrí cómo usar grupos, que también son una característica nueva. Usted necesita simplemente añadir

<android.support.constraint.Group
    app:constraint_referenced_ids="button1, button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

a su diseño de constricción, donde app: constric_referenced_ids es una cadena, donde debe enumerar los identificadores de vistas separados por comas, que desea asociar a este grupo. Ahora, alternar la visibilidad de un grupo cambia la visibilidad de todas las vistas a las que hace referencia, lo cual creo que es el propósito principal de esta característica en este momento.

Answer 1

Aquí está el documento oficial que explica perfectamente todas las características nuevas agregadas en el diseño de restricción 1.1

Pero una cosa más a tener en cuenta para los Grupos es que si da su vista como un ID de referencia en el Grupo, su visibilidad individual no funcionará, para que eso funcione deberá crear un Grupo separado para él. Corrígeme si me equivoco. Aquí está el código de muestra que usa Grupo , como puede ver aquí . La visibilidad de view1 no funcionará como se asigna a un grupo.

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

    <android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="view1,view2" />

    <View
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/black"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view1" />

    <View
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

    <View
        android:id="@+id/view4"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view3" />

</android.support.constraint.ConstraintLayout>

Ahora, para superar esto, podemos crear un nuevo grupo para manejar la visibilidad de view1, como se indica a continuación.

<android.support.constraint.Group
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:constraint_referenced_ids="view1" />

Esta es la solución que encontré, si hay un escenario en el que queremos manejar la visibilidad de un grupo así como la visibilidad de la vista individual en diferentes casos.

Answer 2

Hay alguna información sobre la barrera here .

Answer 3

Actualización: ¡Finalmente está aquí un lanzamiento oficial de Constraint Layout 1.1.0 , completo con documentación oficial!

Documentation de las nuevas funciones era muy escasa cuando se hizo esta pregunta por primera vez. ¡Lo mejor que pude encontrar fue en esta publicación de Reddit ! Pero la información allí me dio suficientes pistas para crear un diseño de restricción con una barrera horizontal. Realmente funcionó, y el nuevo diseño de restricción (beta) también solucionó algunos problemas con wrap_content . Mi primera impresión muy positiva de la versión Beta de diseño de restricciones se ha mantenido bajo muchas pruebas adicionales.

Antes de usar las cosas nuevas, agregue ConstraintLayout 1.1.0 al proyecto.

En app / build.gradle , cambie la dependencia de diseño de restricción a esto:

implementation ''com.android.support.constraint:constraint-layout:1.1.0''

Es posible que también deba agregar el repositorio de Maven al build.gradle de su proyecto (que es un archivo diferente, en el directorio raíz de su proyecto). Busque la sección de repositorios de todos los proyectos y agregue esto: maven { url ''https://maven.google.com'' } Por lo tanto, toda la sección debería verse así:

allprojects {
     repositories {
         jcenter()
         maven { url ''https://maven.google.com'' }
     }
}

¡Ahora por las cosas divertidas! El siguiente fragmento de bottom_textview crea una barrera horizontal , por lo que bottom_textview está debajo de included_layout y multiline_textview .

<android.support.constraint.Barrier
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/barrier1"
    app:barrierDirection="bottom"
    app:constraint_referenced_ids="included_layout, multiline_textview" />

<TextView
    android:id="@+id/bottom_textview"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/barrier1"
    android:layout_width="0dp"
    android:layout_height="wrap_content" />

Primera impresión: ¡Las barreras son geniales! Mi nuevo diseño es más plano y más simple, y aún parece hacer exactamente lo que quiero. Definitivamente vale la pena intentarlo.

Documentación más detallada se está volviendo gradualmente disponible:

• Resumen de las nuevas características en 1.1.0.

• Un excelente artículo sobre posicionamiento circular, completo con animación.

• un buen artículo detallado sobre las barreras en constrictlayout.com (!)

• un artículo sobre los nuevos widgets 1.1.x (incluidos muchos detalles y código de muestra) en medium.com

• un artículo de androidtkt.com con ejemplos de barreras, grupos, marcadores de posición y dimensiones porcentuales

La respuesta de @Vyacheslav A también tiene un gran resumen de lo que pueden hacer las nuevas funciones.

Answer 4

1. Porcentaje de dimensiones

El comportamiento predeterminado de los widgets de ancho 0dp (o match_constraint) se propaga (configurable a través de la propiedad layout_constraintWidth_default). En ConstraintLayout 1.0.x, tuvimos la opción de cambiarlo para ajustarlo, y en 1.1.x, tenemos un nuevo valor, porcentaje, que nos permite configurar un widget para tomar un porcentaje del espacio disponible.

    <!-- the widget will take 40% of the available space -->
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.4"

2. Barreras

De este nuevo widget, tenemos algunos ejemplos de ConstraintLayout.com. Las barreras evitarán que uno o más widgets pasen por alto la barrera. Cuando esto ocurra, la barrera se moverá y evitará que los widgets se coloquen encima de ella. En el siguiente ejemplo, la propiedad final de text1 y text2 no puede pasar por alto la barrera. Cuando esto ocurra, la barrera se moverá hacia la derecha (o hacia la izquierda, si está en un diseño RTL). Esto es particularmente útil cuando se trata de diferentes tamaños de widgets, dependiendo de alguna configuración o internacionalización.

<android.support.constraint.ConstraintLayout...>
  <TextView
    android:id="@+id/text1" ... />
  <TextView
    android:id="@+id/text2" ... />
  <android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end" <!-- start, top, bottom, right... -->
    app:constraint_referenced_ids="text1,text2" />
  <TextView
    android:id="@+id/text3"
    ...
    app:layout_constraintStart_toEndOf="@+id/barrier" />
</android.support.constraint.ConstraintLayout>

3. grupo

Los grupos, como las Pautas, son widgets con tamaño 0. Pero Group ayuda a aplicar alguna acción a un conjunto de widgets. El caso más común, es controlar la visibilidad de una colección de widgets. Cuando se trata de este escenario, la solución más común era mantenerse una lista o un conjunto de vistas dentro de la Actividad o Fragmento, o incluso agregar un Grupo de Vistas y poner todas las vistas dentro de él, controlando la visibilidad del contenedor. Ahora, solo necesita agregar sus ID al grupo, y el grupo propagará las acciones a todas las vistas conectadas.

<android.support.constraint.ConstraintLayout ...>
  <TextView
    android:id="@+id/text1" ... />
  <TextView
    android:id="@+id/text2" ... />
  <android.support.constraint.Group
    android:id="@+id/group"
    ...
    app:constraint_referenced_ids="text1,text2" />
</android.support.constraint.ConstraintLayout>

En este caso, si llamamos.

group.setVisibility(View.GONE);

luego, text1 y text2 recibirán la visibilidad GONE.

Texto original aquí .

Documentos oficiales con descripción aquí.