предисловие
ConstraintLayout позволяет создавать сложные большие макеты с плоской иерархией представлений (без вложенных групп представлений). Он похож на RelativeLayout тем, что все представления располагаются в соответствии с отношениями между одноуровневыми представлениями и родительским макетом, но он более гибкий, чем RelativeLayout, и его проще использовать с редактором макетов Android Studio.
Все функции ConstraintLayout доступны непосредственно через визуальные инструменты редактора макетов, поскольку API макетов и редактор макетов созданы специально друг для друга. Поэтому вы можете использовать ConstraintLayout для создания макетов путем перетаскивания вместо изменения XML.
1. Объяснение атрибутов ConstraintLayout
Давайте кратко рассмотрим некоторые из основных атрибутов ориентации, которые нам нужно использовать при использовании ConstraintLayout, как показано в следующей таблице:
| Атрибуты | описывать |
|---|---|
| приложение: layout_constraintLeft_toLeftOf | Поместите левую сторону A на левую сторону B (с выравниванием по левому краю) |
| приложение: layout_constraintLeft_toRightOf | Поместите левую сторону A на правую сторону B (выровняв по левому краю относительно правого) |
| приложение: layout_constraintRight_toLeftOf | Поместите правую сторону A на левую сторону B (выровняйте правую сторону относительно левой) |
| приложение: layout_constraintRight_toRightOf | Поместите правую сторону A на правую сторону B (выравнивание по правому краю) |
| приложение: layout_constraintTop_toTopOf | Поместите верхнюю сторону A на верхнюю сторону B (выравнивание по верхнему краю). |
| приложение: layout_constraintTop_toBottomOf | Поместите верхнюю сторону A на нижнюю сторону B (выровняйте верхнюю часть по отношению к нижней) |
| приложение: layout_constraintBottom_toTopOf | Поместите нижнюю сторону A на верхнюю сторону B (выровняйте нижнюю часть относительно верхней) |
| приложение: layout_constraintBottom_toBottomOf | Поместите нижнюю сторону A на нижнюю сторону B (выравнивание по нижнему краю). |
| приложение: layout_constraintStart_toEndOf | Поместите начальную позицию A в конечную позицию B (начальная позиция выровнена с конечной позицией) |
| приложение: layout_constraintStart_toStartOf | Поместите начальную позицию A в начальную позицию B (начальная позиция выровнена) |
| приложение: layout_constraintEnd_toStartOf | Поместите конечную позицию A в начальную позицию B (конечная позиция выровнена с начальной позицией) |
| приложение: layout_constraintEnd_toEndOf | Поместите конечную позицию A в конечную позицию B (конечная позиция выровнена) |
| приложение: layout_constraintBaseline_toBaselineOf | Поместите нижнюю сторону A на верхнюю сторону B (выравнивание базовой линии) |
Примечание. Пространство имен атрибута — app
2. Предвзятость
При использовании LinearLayout мы обычно используем Gravity для горизонтального или вертикального расположения элементов управления в соответствии с распределением веса. В ConstraintLayout он предоставляет атрибут смещения для назначения весов элементам управления.
Код выглядит следующим образом (пример):
<android.support.constraint.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">
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
| Атрибуты | описывать |
|---|---|
| приложение: layout_constraintHorizontal_bias | Коэффициент горизонтального смещения |
| приложение: layout_constraintVertical_bias | Коэффициент вертикального смещения |
3. GONE на самом деле не GONE
Когда мы используем RelativeLayout для разработки, мы часто сталкиваемся с такой логикой: когда определенные данные пусты, элемент управления, привязанный к данным, ИСЧЕЗАЕТ. Тогда будет такая проблема.Например,есть три контрола А,В и С расположенные вертикально.В находится ниже А, а С ниже В.После того как В спрячется (GONE), так как С не имеет зависимости от А, это вызовет ошибку страницы. ConstraintLayout дает хорошее решение этой проблемы. В ConstraintLayout, если элемент управления скрыт (GONE), он станет точкой, поэтому он по-прежнему оказывает влияние на другие элементы управления, которые используют этот элемент управления в качестве эталонного элемента управления.
Когда этот элемент управления скрыт, мы также можем обратиться к этому скрытому элементу управления, чтобы установить свойства полей для других элементов управления.
| Атрибуты | описывать |
|---|---|
| приложение: layout_goneMarginLeft | Скрыть левое поле элемента управления |
| приложение: layout_goneMarginRight | Скрыть правое поле элемента управления |
| приложение: layout_goneMarginTop | Скрыть верхнее поле элемента управления |
| приложение: layout_goneMarginBottom | Скрыть нижнее поле элемента управления |
| приложение: layout_goneMarginStart | скрыть начальное поле элемента управления |
| приложение: layout_goneMarginEnd | скрыть конечное поле элемента управления |
4. Соотношение сторон
1. Соотношение сторон View
В ConstraintLayout ширина также может быть определена как отношение высоты, или высота может быть определена как отношение ширины. Прежде всего, вам нужно установить ширину или высоту на 0 dp (то есть MATCH_CONSTRAINT), чтобы адаптироваться к ограничениям. Затем установите соотношение через свойство layout_constraintDimensionRatio . Это отношение может быть числом с плавающей запятой, представляющим соотношение между шириной и высотой, а также отношением формы «ширина:высота».
Код выглядит следующим образом (пример):
<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">
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="-------------------宽高比2：1-------------------"
app:layout_constraintDimensionRatio="2:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
Здесь высота кнопки установлена равной половине ширины. Как показано ниже:
Если для ширины и высоты задано значение 0dp (MATCH_CONSTRAINT), то к значению layout_constraintDimensionRatio необходимо добавить «Ш, ширина: высота» или «В, ширина: высота», чтобы указать ширину ограничения или высоту, код выглядит следующим образом:
<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">
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="h,10:6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
Визуализации следующие:
2. Просмотр процентной ширины и высоты
ConstraintLayout также может использовать проценты для установки ширины и высоты представления.Чтобы использовать ширину или высоту в процентах, необходимо установить значение 0dp (т. е. MATCH_CONSTRAINT).
Затем установите следующие свойства:
app:layout_constraintWidth_default="percent" //设置宽为百分比
app:layout_constraintWidth_percent="0.3" //0到1之间的值
或
app:layout_constraintHeight_default="percent" //设置高为百分比
app:layout_constraintHeight_percent="0.3" //0到1之间的值
5. Атрибут Fuxing-Chain сложной компоновки
Цепочка цепочек — это специальное ограничение, которое позволяет представлениям, связанным несколькими цепочками цепочек, поровну делить оставшееся пространство.Наиболее похожей функцией в традиционном макете Android должно быть соотношение весов в LinearLayout, но цепочка цепочек может делать гораздо больше, чем функция соотношения весов. Если мы хотим реализовать структуру цепочки между элементами управления, мы можем установить отношение взаимного ограничения между этими элементами управления и выбрать создание горизонтальной цепочки или вертикальной цепочки на основе этих отношений.
Официальный предоставляет в общей сложности 5 стилей цепочек:
Мы можем установить его следующим образом:
app:layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"
或者
app:layout_constraintVertical_chainStyle="spread|spread_inside|packed"
Здесь нужно отметить следующее: установите chainStyle для первого компонента Chain, не забудьте запомнить
1. Параметры и значения атрибутов
Для типа атрибута Chian существует два типа: горизонтальное направление (Horizontal) и вертикальное направление (Vertical).
| Атрибуты | описывать |
|---|---|
| приложение: layout_constraintHorizontal_chainStyle | Цепь в горизонтальном направлении |
| приложение: layout_constraintVertical_chainStyle | Цепь в вертикальном направлении |
Всего для режима атрибута Цепочка существует три типа: спред, спред_внутри и упакованный.
2. Режим цепочки распространения
Режим распространения распределяет пространство равномерно, и каждый вид занимает свое собственное пространство, разделенное поровну.Это режим по умолчанию для атрибута «Цепочка».
В этом режиме при установке ширины и высоты представления на значение, отличное от 0dp, эффект отображения следующий: при
использовании этого режима мы также можем установить вес спреда с атрибутом веса.При установке веса нам нужно установить ширину или высоту элемента управления на 0dp и установить значение layout_constraintHorizontal_weight или layout_constraintVertical_weight:
| Атрибуты | описывать |
|---|---|
| приложение: layout_constraintVertical_weight | вертикальный контрольный груз |
| приложение: layout_constraintHorizontal_weight | Вес элемента управления в горизонтальном направлении |
Через настройку веса, как показано на рисунке:
3. Режим спреда внутри цепочки
Режим расширения внутри основан на Spread, удаляя расстояние от двух самых краевых View с обеих сторон до края внешнего родительского компонента, а затем позволяя оставшимся Views поровну делить пространство внутри оставшегося пространства.
В этом режиме при установке ширины и высоты представления на значение, отличное от 0dp, эффект отображения выглядит следующим образом:
4. Режим упакованной цепи
Упакованный режим очень интуитивно понятен, он собирает все представления вместе, не оставляет пробелов между элементами управления и отображает собранные представления в центре.
В этом режиме при установке ширины и высоты представления на значение, отличное от 0dp, эффект отображения следующий: после того, как
мы используем режим Packed, мы также можем настроить положение собранных представлений с помощью параметра смещения.
5. Пример настройки цепочки в XML
Установка свойства Chain должна обеспечить два условия:
- Задайте ограничения цепочки chain
- Установите chainStyle для первого компонента Chain.
<android.support.constraint.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">
<Button
android:id="@+id/button16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="@+id/button17"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="39dp" />
<Button
android:id="@+id/button17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="@+id/button18"
app:layout_constraintStart_toEndOf="@+id/button16"
tools:layout_editor_absoluteY="39dp" />
<Button
android:id="@+id/button18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button17"
tools:layout_editor_absoluteY="39dp" />
</android.support.constraint.ConstraintLayout>
6. Использование направляющей линии
GuideLine — это просто класс инструментов, используемый в макете ConstraintLayout для помощи в макете, подобно вспомогательной линии, вы можете установить атрибут android:orientation, чтобы определить, является ли он горизонтальным или вертикальным.
Важно то, что Руководство не будет отображаться в интерфейсе, а значение по умолчанию ИСЧЕЗЛО.
| направление | описывать |
|---|---|
| андроид:ориентация | направление |
После создания GuideLine мы можем установить начальное положение направляющей:
| весовой атрибут | описывать |
|---|---|
| приложение: layout_constraintGuide_begin | Принимая начальное положение View в качестве эталонного объекта, верхнюю границу в горизонтальном или вертикальном направлении (dp) |
| приложение: layout_constraintGuide_end | Принимая конечное положение View в качестве опорного объекта, верхнюю границу в горизонтальном или вертикальном направлении (dp) |
| приложение: layout_constraintGuide_percent | Процент в горизонтальном или вертикальном направлении (коэффициент плавучести 0,0f - 1,0f) |
Подведем итог
Свойства всего ConstraintLayout были объяснены, давайте использовать ConstraintLayout для обучения в Android!