Пример использования ConstraintLayout в Android

Android

В этом руководстве мы рассмотрим тонкости использования ConstraintLayout в Android. Google представила редактор ConstraintLayout на конференции Google I/O в 2016 году. Новый редактор макетов содержит набор мощных инструментов, позволяющих разработчикам создавать иерархии макетов с плоским пользовательским интерфейсом для сложных макетов.

ConstraintLayout в Android

Чтобы использовать ConstraintLayout в Android, убедитесь, что вы используете последнюю версию Android Studio. Идеально подходит Android Studio 2.2 и выше. Нам необходимо загрузить необходимые инструменты SDK для ConstraintLayout из менеджера SDK. Создайте новый пустой проект активности и добавьте следующую зависимость внутри файла build.gradle. compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' Создайте новый макет с корневым классом, установленным в ConstraintLayout, как показано на изображении ниже. Чтобы преобразовать старый макет в ConstraintLayout, откройте панель дизайна соответствующего макета, щелкните правой кнопкой мыши корневой компонент и выберите соответствующий вариант, как показано на изображении ниже.

Обзор Android Constraint Layout

ConstraintLayout в Android используется для определения макета путем назначения ограничений для каждого дочернего представления/виджета относительно других присутствующих видов. ConstraintLayout похож на RelativeLayout, но обладает большей функциональностью. Цель ConstraintLayout состоит в улучшении производительности приложений путем устранения вложенных представлений с помощью плоского и гибкого дизайна. Внутри ConstraintLayout представление имеет “ручки” (или якорные точки) на каждой стороне, которые используются для назначения ограничений. Давайте перетащим и отпустим TextView на макет и назначим для него ограничения. У TextView выше есть три типа “ручек”:

Ручка изменения размера – она присутствует во всех углах и используется для изменения размера представления, сохраняя при этом его ограничения. Боковая ручка – это круглая ручка, находящаяся в центре каждой стороны. Она используется для установки ограничений сверху, слева, снизу и справа для представления. Ручка базовой линии – она используется для выравнивания базовой линии с другим TextView в макете.

Давайте назначим ограничения на TextView и рассмотрим его xml-код. Обратите внимание на панель свойств справа: Она показывает отступы, установленные для каждой стороны представления. Также можно изменить размер представления, переключаясь между следующими режимами:

Wrap Content – Это обертывает представление, чтобы заполнить его содержимое.
Any Size – Это похоже на match parent.
Fixed Size – Это позволяет установить постоянную ширину и высоту.

Xml-код для указанного макета выглядит следующим образом: 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 является точкой привязки к левой стороне представления. toLeftOf указывает на выравнивание представления слева от назначенного представления, которым в данном случае является “parent”.
Когда абсолютные позиции установлены на представлении, используются следующие свойства XML –

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

Давайте добавим еще один TextView и выровняем их базовые линии. 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"
    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>

Есть еще два инструмента: Auto-connect и Inferences, которые используются для автоматического создания ограничений.

Auto-Connect – Эта функция может быть включена, нажав: Как следует из названия, Auto-connect автоматически создает ограничения между двумя соседними представлениями
Inference – Эта функция включается, нажав: Инференс-движок создает ограничения между всеми элементами в макете. Инференс-движок пытается найти и создать оптимальные связи на основе различных факторов, таких как позиции виджетов и их размер.

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>

Демонстрация макета с включенным выводом представлена ниже: 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"
    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": Атрибуты создателя используются для отслеживания создателей ограничений, особенно если они созданы инферентным движком, им назначается значение 1.

Удаление ограничений

Для удаления отдельного ограничения наведите курсор на круглую ручку и щелкните по ней, она станет красной. Чтобы удалить все ограничения представления, щелкните по символу под ним, который выглядит так: Приведен ниже пример демонстрационного изображения: Это завершает данное руководство. Вы можете попробовать заменить некоторые из своих макетов на ограничительный макет.

Source:
https://www.digitalocean.com/community/tutorials/android-constraintlayout