Строка, столбец, прямоугольник и ConstraintLayout

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

Примечание. Jetpack Compose недавно перешел на бета-версию. Это означает, что кардинальных изменений в структуре API больше не будет. Так что было бы отличное время узнать, как работать с этим комплектом пользовательского интерфейса следующего поколения для разработки под Android. Макеты являются основными строительными блоками пользовательского интерфейса, так что наслаждайтесь статьей.

Вам потребуется установить версию Android Studio Canary, Arctic Fox (2020.3.1), чтобы использовать бета-версию Jetpack Compose.

Вступление

Макеты - это строительные блоки для разработки пользовательского интерфейса. В традиционной разработке для Android у нас есть RelativeLayout, LinearLayout, FrameLayout, ConstraintLayout и т. Д. Аналогичным образом, Jetpack Compose на данный момент предлагает четыре типа макетов:

  1. Row
  2. Column
  3. Box
  4. ConstraintLayout

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

Если вы новичок в Jetpack Compose, начинать с макетов - это хорошо. При этом, без дальнейших задержек, приступим.

Модификатор

Прежде чем вы узнаете о макетах, сначала вы должны узнать о Modifier в Jetpack Compose. Как следует из названия, Modifier - это способ изменения определенных аспектов компонента, в результате чего макет отображается на экране.

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

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



Компоненты Jetpack Compose (Часть 3)
Все, что вам нужно знать о модификаторе betterprogramming.pub



Ряд

Row используется для горизонтального размещения компонентов на экране. Row - это компонуемая встроенная функция с четырьмя аргументами: Modifier, horizontalArrangement, verticalAlignment и content . За исключением content, все остальные аргументы необязательны. Взгляните на функцию Row:

  • horizontalArrangement: чтобы указать горизонтальное выравнивание дочерних элементов.
  • verticalAlignment: чтобы указать вертикальное выравнивание его дочерних элементов.
  • content: составная функция для отображения внутри Row области видимости

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

использование

Чтобы понять, как использовать Row, рассмотрим простой пример, в котором нам нужно показать название подписки (Netflix) слева и сумму (10 долларов США) в правой части окна просмотра. Сначала взгляните на код:

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

В приведенном выше фрагменте кода сначала мы начинаем с области видимости строки и определяем составные текстовые функции для представления имени и суммы. fillMaxWidth используется в строке для расширения строки до ширины экрана.

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

  • textAlign - это аргумент для определения выравнивания текста. Для названия это слева, а для суммы - справа.
  • Modifier играет ключевую роль, поскольку определяет веса дочерних элементов в строке.

Взгляните на результат:

Столбец

Column используется для вертикального размещения компонентов на экране. Column - это компонуемая встроенная функция с четырьмя аргументами: Modifier, verticalArrangement, horizontalAlignment и content. За исключением content, все остальные аргументы необязательны. Взгляните на функцию Column:

  • verticalArrangement: чтобы указать вертикальное выравнивание дочерних элементов.
  • horizontalAlignment: чтобы указать горизонтальное выравнивание дочерних элементов.
  • content: составная функция для отображения внутри Column области видимости

По умолчанию выравнивание осуществляется по верхнему левому углу области столбца из-за значений по умолчанию. Мы можем изменить его, используя verticalArrangement и horizontalAlignment в соответствии с нашими требованиями.

использование

Чтобы понять, как использовать Column, давайте рассмотрим простой пример, в котором нам нужно указать название подписки (Netflix) и сумму (10 долларов США) внизу имени. Сначала взгляните на код:

Если вы внимательно посмотрите на код, вы можете обнаружить, что он похож на использование LinearLayout с вертикальной ориентацией и концепцией веса.

В приведенном выше фрагменте кода сначала мы начинаем с области видимости столбца и определяем составные текстовые функции для представления имени и суммы. fillMaxWidth используется в столбце для расширения столбца до ширины экрана. Затем объявите две простые текстовые составные функции. Взгляните на результат:

Коробка

Дети в Box будут наложены друг на друга. Мы должны использовать модификатор выравнивания, чтобы указать, где должен быть нарисован составной объект. Это похоже на относительную компоновку. Когда для детей не указано никакого отношения, они накладываются друг на друга. Взгляните на функцию Box:

  • contentAlignment: выравнивание по умолчанию внутри Box
  • propagateMinConstraints : должны ли входящие ограничения min быть переданы в content
  • content: составная функция для отображения внутри Box области видимости

использование

Чтобы понять, как использовать Box, рассмотрим простой пример, в котором нам нужно показать название подписки (Netflix) в верхнем левом углу и сумму (10 долларов США) в правом конце, как мы это сделали с Row. Сначала взгляните на код:

В приведенном выше фрагменте кода сначала мы начинаем с области видимости окна и определяем составные текстовые функции для представления имени и суммы. fillMaxWidth используется на поле, чтобы расширить его до ширины экрана. Затем объявите две простые текстовые составные функции. Взгляните на результат:

Функции составления текста перекрывались, потому что мы не упоминали о выравнивании. При использовании относительной компоновки без каких-либо отношений или компоновки фреймов, это будет то же самое при традиционной разработке. Теперь нам нужно определить выравнивание с помощью Modifier для составных текстов. Посмотри:

Здесь мы использовали модификатор align для выравнивания составляемых компонентов. Это похоже на гравитацию в традиционном развитии. Взгляните на результат:

ConstraintLayout

В общем, ConstraintLayout используется для разработки сложной компоновки с плоской иерархией, чтобы можно было оптимизировать рендеринг вида. До сих пор мы использовали Column, Row и Box для разработки базовых макетов. Но когда дело доходит до сложного пользовательского интерфейса с жесткими ограничениями между представлениями, мы должны использовать ConstraintLayout.

Прежде чем идти дальше, мы должны знать три вещи:

  1. createRefs: используется для создания ссылок для каждого компонента в ConstraintLayout.
  2. constrainAs: здесь мы определим ограничения для отдельных составляемых функций внутри ConstraintLayout.
  3. linkTo: Так мы будем определять ограничения.

использование

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

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

Взгляните на результат:

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