Создайте адаптивный пользовательский интерфейс с помощью ConstraintLayout, входящего в состав Android Jetpack .

Рисунок 1. Редактор отображает вид C ниже A, но он не имеет вертикального ограничения.

Рисунок 2. Вид C теперь вертикально ограничен видом A.

Хотя отсутствие ограничения не приводит к ошибке компиляции, редактор компоновки отображает отсутствующие ограничения как ошибку на панели инструментов. Чтобы просмотреть ошибки и другие предупреждения, нажмите «Показать предупреждения и ошибки». Чтобы помочь вам избежать пропуска ограничений, редактор компоновки автоматически добавляет ограничения с помощью функций автосоединения и вывода ограничений .

Добавьте ConstraintLayout в свой проект.

Чтобы использовать ConstraintLayout в своем проекте, выполните следующие действия:

1. Убедитесь, что репозиторий maven.google.com указан в файле settings.gradle :

   Классный

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Котлин

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. Добавьте библиотеку в качестве зависимости в файл build.gradle на уровне модуля, как показано в следующем примере. Последняя версия может отличаться от показанной в примере.

   классный

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.1"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1"
   }

   Котлин

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.1")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.1")
   }

3. На панели инструментов или в уведомлении о синхронизации нажмите «Синхронизировать проект с файлами Gradle» .

Теперь вы готовы создать свой макет с помощью ConstraintLayout .

Преобразовать макет

Рисунок 3. Меню для преобразования макета в ConstraintLayout .

Для преобразования существующей компоновки в компоновку с ограничениями выполните следующие шаги:

1. Откройте свой макет в Android Studio и нажмите вкладку «Дизайн» в нижней части окна редактора.
2. В окне «Дерево компонентов» щелкните правой кнопкой мыши по макету и выберите пункт «Преобразовать LinearLayout в ConstraintLayout» .

Создать новый макет

Чтобы создать новый файл компоновки с ограничениями, выполните следующие действия:

1. В окне «Проект» щелкните папку модуля и выберите «Файл» > «Создать» > «XML» > «XML-макет» .
2. Введите имя для файла разметки и укажите "androidx.constraintlayout.widget.ConstraintLayout" в качестве корневого тега .
3. Нажмите «Готово» .

Добавить или удалить ограничение

Чтобы добавить ограничение, выполните следующие действия:

1. Перетащите элемент интерфейса из окна «Палитра» в редактор.

   При добавлении элемента в ConstraintLayout он отображается в ограничивающем прямоугольнике с квадратными маркерами изменения размера по углам и круглыми маркерами ограничений по бокам.

2. Щелкните по изображению, чтобы выбрать его.
3. Выполните одно из следующих действий:
   • Щелкните по маркеру ограничения и перетащите его к доступной точке привязки. Эта точка может быть краем другого вида, краем макета или направляющей линией. Обратите внимание, что по мере перетаскивания маркера ограничения редактор макета отображает потенциальные точки соединения и синие наложения.

   • Нажмите на одну из кнопок «Создать соединение». кнопки в разделе «Макет» окна «Атрибуты» , как показано на рисунке 4.

     

     Рисунок 4. Раздел «Макет» окна «Атрибуты» позволяет создавать соединения.

При создании ограничения редактор задаёт ему отступ по умолчанию , чтобы разделить два представления.

При создании ограничений помните о следующих правилах:

• Каждое представление должно иметь как минимум два ограничения: одно горизонтальное и одно вертикальное.
• Ограничения можно создавать только между маркером ограничения и опорной точкой, находящимися в одной плоскости. Вертикальная плоскость — левая и правая стороны — представления может быть ограничена только другой вертикальной плоскостью, а базовые линии могут быть ограничены только другими базовыми линиями.
• Каждый маркер ограничения может использоваться только для одного ограничения, но вы можете создать несколько ограничений из разных представлений к одной и той же точке привязки.

Удалить ограничение можно одним из следующих способов:

• Щелкните по ограничению, чтобы выбрать его, а затем нажмите «Удалить» .

• Нажмите Control + щелчок ( Command + щелчок в macOS) по якорю ограничения. Ограничение станет красным, указывая на то, что его можно удалить, как показано на рисунке 5.

  

  Рисунок 5. Красным обозначено ограничение, которое можно удалить щелчком мыши.

• В разделе «Макет» окна «Атрибуты» щелкните по привязке ограничения, как показано на рисунке 6.

  

  Рисунок 6. Щелкните по привязке ограничения, чтобы удалить ее.

Если добавить к представлению противоположные ограничения, линии ограничений скручиваются, как пружина, указывая на противодействующие силы, как показано на видео 2. Эффект наиболее заметен, когда размер представления установлен на «фиксированный» или «обтекание содержимого», в этом случае представление центрируется между ограничениями. Если же вы хотите, чтобы представление растягивалось, чтобы соответствовать ограничениям, измените размер на «соответствие ограничениям». Если вы хотите сохранить текущий размер, но переместить представление так, чтобы оно не было центрировано, отрегулируйте смещение ограничения .

Для достижения различных типов поведения компоновки можно использовать ограничения, как описано в следующих разделах.

Родительская позиция

Ограничьте боковую часть представления соответствующим краем макета.

На рисунке 7 левая сторона представления соединена с левым краем родительского макета. Расстояние от края можно задать с помощью параметра «отступ».

Рисунок 7. Горизонтальное ограничение для родительского элемента.

Позиция заказа

Определите порядок отображения двух видов: по вертикали или по горизонтали.

На рисунке 8 точка B ограничена тем, что всегда находится справа от точки A, а точка C ограничена тем, что находится ниже точки A. Однако эти ограничения не подразумевают выравнивания, поэтому точка B может перемещаться вверх и вниз.

Рисунок 8. Горизонтальное и вертикальное ограничение.

Выравнивание

Выровняйте край одного вида по краю другого вида.

На рисунке 9 левая сторона точки B выровнена по левой стороне точки A. Если вы хотите выровнять центры видов, создайте ограничение с обеих сторон.

Вы можете сместить выравнивание, перетащив область просмотра внутрь от ограничения. Например, на рисунке 10 показан объект B со смещением выравнивания на 24dp. Смещение определяется полями области просмотра с ограничением.

Вы также можете выбрать все элементы, которые хотите выровнять, а затем нажать кнопку «Выровнять». в панели инструментов выберите тип выравнивания.

Рисунок 9. Ограничение горизонтального выравнивания.

Рисунок 10. Ограничение горизонтального выравнивания со смещением.

Базовое выравнивание

Выровняйте базовую линию текста одного представления по базовой линии текста другого представления.

На рисунке 11 первая строка рисунка B выровнена по тексту рисунка A.

Чтобы создать базовую линию ограничения, щелкните правой кнопкой мыши по текстовому полю, которое вы хотите ограничить, и выберите «Показать базовую линию» . Затем щелкните по базовой линии текста и перетащите линию к другой базовой линии.

Рисунок 11. Базовое ограничение выравнивания.

Ограничьте действия определенными правилами.

Вы можете добавить вертикальную или горизонтальную направляющую, которая позволяет ограничивать отображение элементов и невидима для пользователей вашего приложения. Вы можете расположить направляющую внутри макета, используя единицы dp или процентное соотношение относительно края макета.

Чтобы создать руководство, нажмите «Руководства». на панели инструментов, а затем нажмите либо «Добавить вертикальную направляющую» , либо «Добавить горизонтальную направляющую» .

Перетащите пунктирную линию, чтобы изменить ее положение, и щелкните кружок на краю направляющей, чтобы переключить режим измерения.

Рисунок 12. Вид, ограниченный направляющей линией.

Ограничение до уровня барьера

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

Например, на рисунке 13 вид C ограничен правой стороной барьера. Барьер расположен на «конце» (или правой стороне, при расположении слева направо) как вида A, так и вида B. Барьер перемещается в зависимости от того, какая сторона вида A или вида B находится дальше всего справа.

Для создания барьера выполните следующие действия:

1. Рекомендации по кликам на панели инструментов, а затем нажмите «Добавить вертикальный барьер» или «Добавить горизонтальный барьер» .
2. В окне «Дерево компонентов» выберите нужные элементы для размещения внутри барьера и перетащите их в компонент барьера.
3. Выберите барьер в дереве компонентов , откройте атрибуты. окно, а затем установите barrierDirection .

Теперь вы можете создать ограничение для барьера из другого представления.

Вы также можете ограничить отображение объектов, находящихся внутри барьера, самим барьером. Таким образом, вы можете выровнять все объекты внутри барьера относительно друг друга, даже если вам неизвестно, какой из них самый длинный или самый высокий.

Также можно добавить разметку внутри ограждения, чтобы обеспечить его «минимальное» положение.

Рисунок 13. Вид C ограничен барьером, который перемещается в зависимости от положения и размера видов A и B.

Скорректируйте смещение ограничения

Если добавить ограничение с обеих сторон представления, и размер представления для одного и того же измерения установлен как «фиксированный» или «обертывание содержимого», то представление по умолчанию центрируется между двумя ограничениями со смещением 50%. Вы можете отрегулировать смещение, перетаскивая ползунок смещения в окне «Атрибуты» или перетаскивая представление, как показано в видео 3.

Если же вы хотите, чтобы размер представления соответствовал заданным ограничениям, измените параметр размера на «соответствует ограничениям».

Изменить размер окна

Рисунок 14. При выборе вида в окне «Атрибуты» отображаются элементы управления для 1 соотношения размеров, 2 удаления ограничений, 3 режима высоты или ширины, 4 полей и 5 смещения ограничений. Вы также можете выделить отдельные ограничения в редакторе компоновки, щелкнув по ним в 6 списке ограничений.

Вы можете использовать угловые маркеры для изменения размера элемента, но это жестко задает размер — элемент не будет изменять размер в зависимости от содержимого или размера экрана. Чтобы выбрать другой режим изменения размера, щелкните элемент и откройте « Атрибуты». окно находится в правой части редактора.

В верхней части окна «Атрибуты» находится инспектор представлений, который включает элементы управления для нескольких атрибутов компоновки, как показано на рисунке 14. Он доступен только для представлений в компоновке с ограничениями.

Вы можете изменить способ расчета высоты и ширины, щелкнув символы, обозначенные выноской 3 на рисунке 14. Эти символы представляют собой режимы изменения размера следующим образом. Щелкните символ, чтобы переключаться между этими настройками:

• Фиксированный : укажите конкретный размер в текстовом поле ниже или изменив размер окна в редакторе.
• Обтекание содержимого : область отображения расширяется только настолько, насколько это необходимо для размещения содержимого.
• layout_constrainedWidth

Установите это значение в true , чтобы горизонтальный размер изменялся в соответствии с ограничениями. По умолчанию виджет, для которого установлено значение WRAP_CONTENT не ограничен никакими ограничениями.

• Соответствие ограничениям : представление максимально расширяется, чтобы соответствовать ограничениям с каждой стороны, с учетом полей представления. Однако вы можете изменить это поведение с помощью следующих атрибутов и значений. Эти атрибуты вступают в силу только тогда, когда вы устанавливаете ширину представления в значение «соответствие ограничениям»:
  • layout_constraintWidth_min

    Эта функция задает размер dp для минимальной ширины представления.

  • layout_constraintWidth_max

    Эта функция задает размер dp для максимальной ширины представления.

  Однако, если заданный размер имеет только одно ограничение, то представление расширяется, чтобы соответствовать его содержимому. Использование этого режима для высоты или ширины также позволяет задать соотношение сторон .

Задайте размер в виде соотношения

Рисунок 15. Изображение имеет соотношение сторон 16:9, при этом ширина определяется соотношением высоты и ширины.

Вы можете установить размер представления в виде соотношения сторон, например, 16:9, если хотя бы один из параметров представления установлен в режим "соответствия ограничениям" ( 0dp ). Чтобы включить ограничение соотношения сторон, нажмите кнопку "Переключить ограничение соотношения сторон" (выноска 1 на рисунке 14) и введите соотношение width и height в появившемся поле ввода.

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

Например, если вы установите для обеих сторон параметр «соответствие ограничениям», дважды щелкните «Переключить ограничение соотношения сторон », чтобы установить ширину в виде отношения к высоте. Весь размер определяется высотой представления, которую можно задать любым способом, как показано на рисунке 15.

Отрегулируйте поля просмотра

Чтобы расположить элементы на экране равномерно, нажмите «Поля». На панели инструментов выберите поля по умолчанию для каждого элемента, добавляемого в макет. Любые изменения полей по умолчанию будут применяться только к тем элементам, которые вы добавите после этого.

Вы можете управлять отступами для каждого элемента в окне «Атрибуты» , щелкнув число в строке, представляющей каждое ограничение. На рисунке 14, в выноске 4 показано, что нижний отступ установлен на 16dp.

Рисунок 16. Кнопка «Поля» на панели инструментов.

Все поля, предлагаемые инструментом, имеют размер, равный 8dp, чтобы помочь вашим элементам интерфейса соответствовать рекомендациям Material Design по использованию квадратной сетки с полями 8dp.

Управляйте линейными группами с помощью цепочки.

Рисунок 17. Горизонтальная цепочка с двумя видами.

Цепочка — это группа элементов, связанных друг с другом двунаправленными ограничениями положения. Элементы внутри цепочки могут быть расположены как вертикально, так и горизонтально.

Рисунок 18. Примеры каждого типа цепочек.

Цепочки можно носить одним из следующих способов:

1. Распределение: после учета полей просмотры распределяются равномерно. Это значение по умолчанию.
2. Внутри распределено следующее: первый и последний элементы закреплены на ограничениях на каждом конце цепочки, а остальные равномерно распределены.
3. Взвешенное размещение: когда цепочка задана как «распространенная» или «распространенная внутри» , вы можете заполнить оставшееся пространство, установив для одного или нескольких представлений параметр «соответствует ограничениям» ( 0dp ). По умолчанию пространство равномерно распределяется между каждым представлением, для которого установлен параметр «соответствует ограничениям», но вы можете присвоить каждому представлению вес важности, используя атрибуты layout_constraintHorizontal_weight и layout_constraintVertical_weight . Это работает так же, как layout_weight в линейной компоновке : представление с наибольшим значением веса получает больше всего места, а представления с одинаковым весом получают одинаковое количество места.
4. Упакованный режим: представления упаковываются вместе с учетом полей. Вы можете отрегулировать смещение всей цепочки — влево или вправо, вверх или вниз — изменив смещение «головного» представления цепочки.

«Заголовочное» представление цепочки — самое левое представление в горизонтальной цепочке (при расположении слева направо) и самое верхнее представление в вертикальной цепочке — определяет стиль цепочки в формате XML. Однако вы можете переключаться между стилями spread , spread inside и packed , выбрав любое представление в цепочке и нажав кнопку цепочки. это отображается ниже изображения.

Чтобы создать цепочку, выполните следующие действия, как показано в видео 4:

1. Выберите все представления, которые будут включены в цепочку.
2. Щелкните правой кнопкой мыши по одному из представлений.
3. Выберите цепочки .
4. Выберите один из вариантов: «По центру по горизонтали» или «По центру по вертикали» .

Вот несколько моментов, которые следует учитывать при использовании цепей:

• Представление может быть частью как горизонтальной, так и вертикальной цепочки, что позволяет создавать гибкие сеточные макеты.
• Цепь работает правильно только в том случае, если каждый её конец прикреплён к другому объекту на той же оси, как показано на рисунке 14.
• Хотя ориентация цепочки может быть вертикальной или горизонтальной, её использование не выравнивает представления в этом направлении. Для достижения правильного положения каждого представления в цепочке следует включить другие ограничения, такие как ограничения выравнивания .

Автоматическое создание ограничений

Вместо того чтобы добавлять ограничения к каждому элементу по мере его размещения в макете, вы можете переместить каждый элемент в нужные позиции в редакторе макета, а затем нажать кнопку «Присвоить ограничения». для автоматического создания ограничений.

Функция Infer Constraints сканирует макет, чтобы определить наиболее эффективный набор ограничений для всех элементов. Она ограничивает элементы их текущим положением, обеспечивая при этом гибкость. Возможно, вам потребуется внести корректировки, чтобы макет корректно реагировал на экраны разных размеров и ориентаций.

Функция автоматического соединения с родительским элементом — это отдельная функция, которую можно включить. При её включении и добавлении дочерних элементов к родительскому элементу эта функция автоматически создаёт два или более ограничений для каждого элемента при добавлении их в макет — но только тогда, когда необходимо привязать элемент к родительскому макету. Автоматическое соединение не создаёт ограничений для других элементов в макете.

Автоматическое подключение по умолчанию отключено. Включите его, нажав «Включить автоматическое подключение к родительскому элементу». в панели инструментов редактора макета.

Ключевые кадры анимации

Внутри ConstraintLayout можно анимировать изменения размера и положения элементов, используя ConstraintSet и TransitionManager .

Объект ConstraintSet — это легковесный объект, представляющий ограничения, поля и отступы всех дочерних элементов внутри ConstraintLayout . При применении ConstraintSet к отображаемому ConstraintLayout , макет обновляет ограничения всех его дочерних элементов.

Для создания анимации с использованием ConstraintSet укажите два файла макета, которые будут выступать в качестве начального и конечного ключевых кадров для анимации. Затем вы можете загрузить ConstraintSet из второго файла ключевых кадров и применить его к отображаемому ConstraintLayout .

В следующем примере кода показано, как анимировать перемещение одной кнопки в нижнюю часть экрана.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Дополнительные ресурсы

В демонстрационном приложении Sunflower используется ConstraintLayout .