ConstraintLayout

16.01.2025

ConstraintLayout представляет контейнер, который позволяет создавать гибкие и масштабируемые визуальные интерфейсы.

Ограничения (constraints)

Для позиционирования элемента внутри ConstraintLayout необходимо указать ограничения (constraints). Есть несколько типов ограничений. В частности, для установки позиции относительно определенного элемента используются следующие ограничения:

• layout_constraintLeft_toLeftOf: левая граница позиционируется относительно левой границы другого элемента.

• layout_constraintLeft_toRightOf: левая граница позиционируется относительно правой границы другого элемента.

• layout_constraintRight_toLeftOf: правая граница позиционируется относительно левой границы другого элемента.

• layout_constraintRight_toRightOf: правая граница позиционируется относительно правой границы другого элемента.

• layout_constraintTop_toTopOf: верхняя граница позиционируется относительно верхней границы другого элемента.

• layout_constraintTop_toBottomOf: верхняя граница позиционируется относительно нижней границы другого элемента.

• layout_constraintBottom_toBottomOf: нижняя граница позиционируется относительно нижней границы другого элемента.

• layout_constraintBottom_toTopOf: нижняя граница позиционируется относительно верхней границы другого элемента.

• layout_constraintBaseline_toBaselineOf: базовая линия позиционируется относительно базовой линии другого элемента.

• layout_constraintStart_toEndOf: элемент начинается там, где завершается другой элемент.

• layout_constraintStart_toStartOf: элемент начинается там, где начинается другой элемент.

• layout_constraintEnd_toStartOf: элемент завершается там, где начинается другой элемент.

• layout_constraintEnd_toEndOf: элемент завершается там, где завершается другой элемент.

Примечание о правосторонней ориентации

Некоторые языки (например, арабский или фарси) имеют правостороннюю ориентацию, то есть символы идут справа налево, а не слева направо, как в европейских языках. В зависимости от текущей ориентации - левосторонней или правосторонней - будет изменяться то, где именно начало, а где завершение элемента. Например:

• При левосторонней ориентации layout_constraintStart_toEndOf аналогичен layout_constraintLeft_toRightOf.

• При правосторонней ориентации layout_constraintStart_toEndOf аналогичен layout_constraintRight_toLeftOf.

Каждое ограничение устанавливает позиционирование элемента либо по горизонтали, либо по вертикали. И для определения позиции элемента в ConstraintLayout необходимо указать как минимум одно ограничение по горизонтали и одно ограничение по вертикали.

Позиционирование может производиться

1. Относительно границ самого контейнера ConstraintLayout (в этом случае ограничение имеет значение parent).

2. Относительно любого другого элемента внутри ConstraintLayout (в качестве значения ограничения указывается id этого элемента).

---

Пример 1: Простое позиционирование

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Объяснение

• app:layout_constraintLeft_toLeftOf="parent" устанавливает левую границу TextView у левой границы контейнера.

• app:layout_constraintTop_toTopOf="parent" устанавливает верхнюю границу TextView у верхней границы контейнера.

В итоге TextView будет располагаться в верхнем левом углу контейнера.

---

Пример 2: Ограничения относительно другого элемента

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:hint="Введите Email"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Отправить"
        app:layout_constraintLeft_toRightOf="@id/editText"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Объяснение

• У EditText:

  • Верхняя и левая границы выравниваются относительно контейнера.

• У Button:

  • Верхняя граница выравнивается относительно верхней границы контейнера.

  • Левая граница выравнивается относительно правой границы EditText.

    

---

Центрирование элемента

Для расположения элемента в центре контейнера по вертикали:

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

Для расположения элемента в центре по горизонтали:

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

Полное центрирование элемента

<androidx.constraintlayout.widget.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="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

Сдвиг элементов

Для сдвига по горизонтали используется:

layout_constraintHorizontal_bias

Для сдвига по вертикали:

layout_constraintVertical_bias

Значение - число с плавающей точкой от 0 до 1. По умолчанию 0.5.

<androidx.constraintlayout.widget.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="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Top TextView"
        android:textSize="30sp"
        android:background="#e0e0e0"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom TextView"
        android:textSize="30sp"
        android:background="#e0e0e0"
        app:layout_constraintHorizontal_bias=".9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Объяснение

• Первый TextView сдвигается на 20% от левой границы контейнера.

• Второй TextView сдвигается на 90%.