Ejemplo de tutorial de ConstraintLayout de Android

En este tutorial, discutiremos las complejidades de android ConstraintLayout. Google había presentado el editor de android constraint layout en la Conferencia Google I/O 2016. El nuevo Editor de Diseño tiene un conjunto de herramientas poderosas que permiten a los desarrolladores crear jerarquías de interfaz de usuario planas para sus diseños complejos.

Android ConstraintLayout

Para usar ConstraintLayout en Android, asegúrate de estar utilizando la versión más reciente de Android Studio. Idealmente, Android Studio 2.2 o superior. Necesitamos descargar las herramientas SDK necesarias para ConstraintLayout desde el Administrador de SDK. Crea un nuevo proyecto de actividad vacío y agrega la siguiente dependencia dentro del archivo build.gradle. compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' Crea un nuevo diseño con la clase raíz configurada como ConstraintLayout como se muestra en la imagen a continuación. Para convertir un diseño antiguo en un ConstraintLayout, abre el panel de diseño del diseño respectivo, haz clic derecho en el componente raíz y elige la opción relevante como se muestra en la imagen a continuación.

Visión general de Constraint Layout en Android

ConstraintLayout de Android se utiliza para definir un diseño asignando restricciones para cada vista/widget hijo con respecto a otras vistas presentes. Un ConstraintLayout es similar a un RelativeLayout, pero con más potencia. El objetivo de ConstraintLayout es mejorar el rendimiento de las aplicaciones al eliminar las vistas anidadas con un diseño plano y flexible. Una vista dentro del ConstraintLayout tiene manijas (o puntos de anclaje) en cada lado que se utilizan para asignar las restricciones. Arrastremos y soltemos un TextView en el diseño y asignémosle las restricciones. El TextView anterior tiene tres tipos de manijas:

Manija de redimensionamiento – Está presente en las cuatro esquinas y se utiliza para redimensionar la vista, manteniendo intactas sus restricciones. Manija lateral – Es la manija circular presente en el centro de cada lado. Se utiliza para establecer las restricciones superior, izquierda, inferior y derecha de la vista. Manija de línea base – Se utiliza para alinear la línea base con otro textview en el diseño.

Asignemos las restricciones en el TextView y veamos el código xml de éste. Observa el panel del inspector de propiedades en el lado derecho: Muestra los márgenes establecidos para cada lado de la vista. También permite cambiar el tamaño de la vista alternando entre los siguientes modos:

• Wrap Content – Esto ajusta la vista para llenar su contenido.
• Any Size – Esto es similar a match parent.
• Fixed Size – Esto nos permite establecer ancho y alto constantes.

El código xml para el diseño anterior se ve así: sample.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>

• app:layout_constraintLeft_toLeftOf="parent" – constraintLeft es el punto de anclaje a la izquierda de la vista. toLeftOf significa alinear la vista a la izquierda de la vista asignada, que en este caso es “parent”.
  Cuando se establecen las posiciones absolutas en la vista, las propiedades xml que se utilizan son –

tools:layout_editor_absoluteY="48dp"
tools:layout_editor_absoluteX="40dp"

Agreguemos otro TextView y alineemos sus líneas de base. El código xml para el diseño anterior es:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        app:layout_constraintRight_toLeftOf="@+id/textView"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp" />

</android.support.constraint.ConstraintLayout>

Hay otras dos herramientas, Auto-connect e Inference, que se utilizan para crear restricciones automáticamente.

1. Auto-Connect – Esta función se puede habilitar haciendo clic en: Como sugiere el nombre, Auto-connect crea restricciones automáticamente entre dos vistas vecinas
2. Inference – Esta función se habilita haciendo clic en: El motor de inferencia crea restricciones entre todos los elementos en un diseño. El motor de inferencia intenta encontrar y crear conexiones óptimas basadas en diversos factores como las posiciones de los widgets y su tamaño.

A demo of Auto-Connect layout is given below: As you can see in the above gif, The constraints are animated automatically. Notice the horizontal and vertical sliders in the properties pane. They are called horizontal and vertical bias respectively. They allow us to position a view along the horizontal or vertical axis using a bias value, this will be relative to it’s constrained position. The xml code for the above demo is given below:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView7"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.58000004"
        app:layout_constraintHorizontal_bias="0.47" />
</android.support.constraint.ConstraintLayout>

Demo de un diseño con inferencia habilitada se muestra a continuación: El código XML para el gif anterior es:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView22"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="59dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginEnd="31dp"
        app:layout_constraintRight_toRightOf="@+id/textView22"
        android:layout_marginTop="178dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="31dp" />
</android.support.constraint.ConstraintLayout>

tools:layout_constraintTop_creator="1": Los atributos del creador sirven para realizar un seguimiento de quién creó las restricciones, especialmente si son creadas por el motor de inferencia, se asignan como 1.

Eliminar restricciones

Para eliminar una restricción individual, coloca el cursor sobre el asa circular y haz clic cuando se vuelva rojo. Para eliminar todas las restricciones de una vista, haz clic en el símbolo debajo de ella que se parece a: Se muestra a continuación un gif de demostración de muestra: Esto concluye este tutorial. Puedes seguir adelante e intentar reemplazar algunos de tus propios diseños con un diseño de restricción.