Создание адаптивного пользовательского интерфейса в Native Android с вложенными группами представлений всегда было проблемой для сообщества разработчиков приложений для Android.
Макет ограничений - большое облегчение для вышеупомянутой проблемы. Google анонсировал макет на конференции Google I / O в 2016 году. Макет ограничения более или менее похож на относительный макет, но более гибкий, лучше адаптируется к изменениям размера экрана и его проще использовать с редактором макетов Android Studio. Согласно официальному документу «вся мощь Constraint Layout доступна непосредственно из визуальных инструментов редактора макета, потому что API макета и редактор макета были специально созданы друг для друга. Таким образом, вы можете создать свой макет с помощью Constraint Layout целиком путем перетаскивания вместо редактирования XML. »
Что такое ограничение?
Ограничения - это основные строительные блоки этого макета. Он соединяет точки привязки одного виджета с другим виджетом или родителем. Существуют различные виды ограничений, с помощью которых можно создать отзывчивый пользовательский интерфейс, который также лучше адаптируется к разному размеру экрана.
Различные виды ограничений:
Относительное позиционирование : Эти ограничения позволяют вам позиционировать данную сторону виджета относительно любого другого виджета или родительской группы представлений либо по горизонтали, либо по горизонтали. вертикально.
атрибут, используемый для относительного позиционирования: app:layout_constraint[source side]_to[target side]="[target id or parent]"
Центрирование позиционирования: это ограничение используется для центрирования виджета по горизонтали или вертикали между двумя целями. Целью может быть точка привязки другого виджета или точка привязки родителя. Два противоположных ограничения действуют как две противоположные силы, удерживая виджет в центре между целями.
Смещение: центральное расположение виджетов может оказаться нежелательным каждый раз, когда мы пытаемся создать макет. Иногда виджету нужно отдавать предпочтение одной стороне больше, чем другой. Для реализации этого варианта использования нам предоставлено ограничение смещения. У виджета может быть горизонтальное и вертикальное смещение.
атрибут, используемый для ограничения смещения:
app:layout_constraintHorizontal_bias="[float value ranging from 0 to 1]"
app:layout_constraintVertical_bias="[float value ranging from 0 to 1]"
Значение с плавающей запятой определяет процент смещения.
Для горизонтального смещения он определяет, какой процент виджета должен располагаться слева, например: app:layout_constraintHorizontal_bias="0.3"
Вышеупомянутый атрибут сохранит левую часть виджета со смещением 30% вместо 50% по умолчанию. Ниже приведено графическое изображение примера.
Для вертикального смещения значение с плавающей запятой определяет, какой процент виджета должен быть сверху, например,
app:layout_constraintVertical_bias="0.2"
Вышеупомянутый атрибут сохранит верхнюю часть виджета со смещением 20% вместо 50% по умолчанию. Ниже приведено графическое изображение примера.
Круговое позиционирование:. Это помогает ограничить центр виджета (предположим, что это виджет A) центром другого виджета. (Предположим, что это виджет "B") под определенным углом и на определенном расстоянии. Угол указан относительно перпендикулярной воображаемой линии, проведенной вверх от центра виджета A.
атрибуты, необходимые для реализации кругового положения
app:layout_constraintCircle="[reference to another widget Id]"
app:layout_constraintCircleRadius="[distance in dp]"
app:layout_constraintCircleAngle="[the angle ranging from 0 to 360]"Наглядное изображение кругового позиционирования дано ниже.
Ограничение размера. Есть 3 способа предоставить размер виджету,
а) Мы можем жестко закодировать значение измерения в dp: используя определенное измерение ( либо буквальное значение, например 30 dp, либо ссылка на размер)
б) WRAP_CONTENT: виджет с размером, установленным на WRAP_CONTENT, занимает только необходимое пространство. Но при использовании WRAP_CONTENT иногда виджеты не соблюдают ограничения.
Например что-то вроде ниже
В приведенном выше случае текстовому представлению материала были присвоены следующие атрибуты
android:layout_height="wrap_content" app:layout_constraintBottom_toTopOf="@+id/appCompatSpinner"
но, несмотря на ограничение, текстовое представление полностью перекрывает счетчик.
Следовательно, чтобы бороться с этой ситуацией, Google предоставил нам два очень полезных атрибута, а именно:
app:layout_constrainedWidth=”[boolean]”app:layout_constrainedHeight=”[boolean]”
Вышеупомянутые атрибуты заставляют виджет следовать ограничению, является ли он вертикальным или горизонтальным.
У нас также есть модификаторы, которые часто используются в предположении с WRAP_CONTENT:
android:minWidth="[value in dp]" android:minHeight="[value in dp]" android:maxHeight="[value in dp]" android:maxWidth="[value in dp]"
Эти модификаторы действительны только с WRAP_CONTENT.
c) MATCH_CONSTRAINT: виджет, определяющий размерность MATCH_CONSTRAINT, займет все доступное пространство. Мы используем 0 dp для представления MATCH_CONSTRAINT в макете ограничений.
MATCH_CONSTRAINT использует следующие модификаторы:
app:layout_constraintWidth_max="[value in dp]" app:layout_constraintWidth_min="[value in dp]" app:layout_constraintHeight_max="[value in dp]" app:layout_constraintHeight_min="[value in dp]"
Примечание. В макете ограничений использование MATCH_PARENT не рекомендуется, поскольку оно не учитывает ограничение, примененное к виджету.
Соотношение. Вы также можете определить одно измерение виджета как соотношение другого. Для этого вам необходимо, чтобы хотя бы один ограниченный размер был установлен на 0 dp (т.е. MATCH_CONSTRAINT), а для атрибута layout_constraintDimensionRatio было установлено заданное соотношение. Например:
<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />в приведенном выше коде высота кнопки будет равна ее ширине.
Отношение может быть выражено как:
- значение с плавающей запятой, представляющее соотношение между шириной и высотой
- соотношение в форме «ширина: высота»
Вы также можете использовать соотношение, если для обоих размеров задано ОГРАНИЧЕНИЕ СООТВЕТСТВИЯ (0 dp). В этом случае система устанавливает самые большие размеры, которые удовлетворяют всем ограничениям и поддерживают указанное соотношение сторон. Чтобы ограничить одну конкретную сторону на основе размеров другой, вы можете предварительно добавить «W» или «H», чтобы ограничить ширину или высоту соответственно.
Например, если одно измерение ограничено двумя целями (например, ширина равна 0 dp и центрирована по родительскому элементу), вы можете указать, какая сторона должна быть ограничена, добавив букву W (для ограничения ширины) или H (для ограничения высоты) перед соотношением через запятую:
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>установит высоту кнопки в соответствии с соотношением сторон 16: 9, а ширина кнопки будет соответствовать ограничениям для родительского элемента.
Цепочки. Он используется для создания двунаправленного соединения между двумя или более виджетами. По моим наблюдениям, цепочки в основном являются альтернативой линейной компоновке. Доступны 3 различных типа цепей:
а) Распространение: виджеты будут равноудалены друг от друга и от поля.
б) Раздвинуть внутрь: виджеты будут равноудалены друг от друга, а не от края.
c) Упаковано: виджеты будут плотно упакованы.
атрибуты, используемые для вышеуказанных цепочек:
app:layout_constraintHorizontal_chainStyle = "[spread/spread_inside/packed]" app:layout_constraintVertical_chainStyle = "[spread/spread_inside/packed]"
Взвешенные цепочки: у нас также могут быть взвешенные цепочки, похожие на взвешенные виджеты внутри линейного макета. Для этого нам нужно установить ширину / высоту на 0 dp по мере необходимости.
атрибут, используемый для взвешенных цепочек:
app:layout_constraintHorizontal_weight = "[value in int]" app:layout_constraintVertical_weight = "[value in int]"
Виртуальные вспомогательные объекты:
Виртуальные вспомогательные объекты (VHO) - это представления, которые не отображаются на устройстве и используются только для создания лучшего макета. Есть 3 основных VHO:
а) Рекомендация: это вспомогательное представление, которое используется для точного выравнивания других представлений. Есть два типа рекомендаций: вертикальная направляющая и горизонтальная направляющая.
б) Барьер: это вспомогательное представление ссылается на несколько виджетов в качестве входных данных и создает виртуальную направляющую на основе самого крайнего виджета на указанной стороне.
Например :
У нас будет две кнопки: @ id / button1 и @ id / button2. Установив Barrier для начала, мы получим следующий результат.
Единственная разница между Barrier и Guideline заключается в том, что положение Barrier является гибким и всегда зависит от размера нескольких элементов пользовательского интерфейса, содержащихся в нем, тогда как положение Guideline всегда фиксировано.
c) Группа. Группа - это VHO, используемая для управления видимостью группы представлений, на которые ссылаются вместе.
Например :
<androidx.constraintlayout.widget.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="button4,button9" />Заключение :
Макет с ограничениями решил многие проблемы создания макета. Макет, созданный с его помощью, при соблюдении надлежащих правил макет фактически адаптируется к разным размерам экрана. Это также упрощает создание больших и сложных макетов. Основным преимуществом макета ограничений является то, что он помогает создавать иерархию плоских представлений. Иерархия плоских представлений очень полезна в случае анализа производительности.
Чтобы узнать более подробную информацию, ознакомьтесь с официальным документом для разработчика документа Constraint Layout.
