Разрабатывайте в Jetpack Compose вместе со мной

Моя история с Constraint Layout в Compose

Еще в 2020 году, когда Jetpack Compose все еще находился на ранней стадии, я написал статью об ограниченном макете в Jetpack Compose. Вы можете прочитать об этом здесь, если вам интересно (не обязательное условие), но то, как компоновка ограничений созрела с тех пор, делает ее совершенно отличной от той, что была тогда, и улучшение на самом деле имеет смысл.

Введение

Эта статья не о сравнении, а о том, как использовать зрелую компоновку с ограничениями в сегодняшнем Jetpack Compose для разработки сложных компонуемых объектов. Я собираюсь сосредоточиться на четырех важнейших концепциях компоновки ограничений:

1. Basics — Simple Contraints
2. Guidlines
3. Barriers
4. Bias

Прежде чем идти дальше, я дам вам краткое объяснение четырех понятий. Компоновка ограничений не является новой концепцией в AndroidDev, она фактически унаследована от традиционной разработки Android до Jetpack Compose.

Основы — простые ограничения

Простые ограничения — это не что иное, как позиционирование представления с определенными ограничениями (отношениями) к его родительским представлениям или родственным представлениям.

Рекомендации

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

Барьеры

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

Предвзятость

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

Предпосылки

Прежде чем идти дальше, вы должны иметь базовые знания о том, как работать с Jetpack Compose. Если вы новичок в Compose, я настоятельно рекомендую ознакомиться со следующими статьями:

С учетом сказанного, давайте начнем.

Функции, с которыми вы должны быть знакомы, чтобы освоить Constraint Layout в Compose

ConstraintLayout

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

ConstraintLayout {
   // Childs goes here
}

createRefs

createRefs — это функция, которая предоставляет нам простой способ создать ConstrainedLayoutReferences (ничего, кроме макетов внутри макета ограничения). Эта функция использует объявления деструктуризации в Kotlin для создания необходимого количества ссылок.

ConstraintLayout {
     val (title, subtitle, image) = createRefs()
}

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

ограничить как

constrainAs — не что иное, как функция расширения Модификатора. Он имеет два параметра:

  1. Первый параметр: ConstrainedLayoutReference, он в основном используется для назначения идентификатора для просмотра, значение должно быть одной из ссылок, которые мы создаем с помощью функции createRefs.
  2. Второй параметр: ConstrainScope, не что иное, как функция, в которой мы указываем все ограничения, которые мы хотим применить к текущему представлению/компоновке.
Modifier.constrainAs(subtitle) {
    top.linkTo(title.bottom)
}

Основы — простые ограничения

Давайте начнем с основ, начиная с того, как связать представление с его родителем. Например, ограничение представления по центру по вертикали, горизонтали или по центру всего экрана.

Одна из новых функций, с которыми вы столкнетесь здесь, — это linkTo. Это не что иное, как способ определить ограничение, используя VerticalAnchorable(start и end) и HorizontalAnchorable(top и bottom).

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

Box — это не что иное, как простая составная функция, здесь мы используем блок вместо изображения, чтобы все было просто и лаконично. centerVerticallyTo — это не что иное, как служебная функция для добавления ограничений top и bottom к представлению, отправленному через параметр, также мы можем centerHorizontallyTo добавить ограничения start и end.

Если вы видите вывод, он немного неуклюж, потому что между представлениями и его parent нет промежутка. Мы можем добавить поля при создании ограничений, используя необязательный параметр margin внутри функции linkTo. Взгляни:

start.linkTo(image.end, margin = 16.dp)

Рекомендации

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

  • Вертикальные направляющие с нулевой шириной и высотой равны своему родительскому элементу.
  • Горизонтальные направляющие с нулевой высотой и шириной равны своему родительскому элементу.

Compose предлагает чрезвычайно простой способ создания направляющих с помощью таких функций, как createGuidelineFromStart, createGuidelineFromEnd, createGuidelineFromTop, createGuidelineFromBottom и других. Каждая функция принимает значение float в качестве необязательного параметра для выравнивания направляющей относительно нее в указанном направлении.

Барьеры

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

Подобно рекомендациям, compose предлагает набор функций для создания барьеров, таких как: createStartBarrier, createEndBarrier, createTopBarrier, createBottomBarrier и других. Каждая из этих функций принимает два параметра:

  1. elements: Ничего, кроме ConstrainedLayoutReference, который мы создаем с помощью createRefs. Барьер будет ограничен этими ссылками. Представления, которые зависят от этого барьера, изменят положение на основе предоставленных эталонных измерений.
  2. margin: используется для определения поля между представлениями/составными объектами.

Байс

Поскольку указанное смещение используется для управления пространством между представлением и тем, чем оно ограничено, доля сохраняемого пространства определяется как float. Здесь мы используем следующие linkTo для позиционирования представления и добавления смещения:

fun linkTo(
    start: ConstraintLayoutBaseScope.VerticalAnchor,
    end: ConstraintLayoutBaseScope.VerticalAnchor,
    startMargin: Dp = 0.dp,
    endMargin: Dp = 0.dp,
    @FloatRange(from = 0.0, to = 1.0) bias: Float = 0.5f
)
  • start: определить начальное ограничение представления.
  • end: определяет конечное ограничение вида.
  • Принимая во внимание, что startMargin и endMargin должны определять поля с выравниванием.
  • смещение — это доля разрыва, которую мы хотим добавить к представлению.

На данный момент - все. Надеюсь, вы узнали что-то полезное. Спасибо за прочтение.