Давайте посмотрим на новый мощный инструмент для создания макетов в виде коллекций.

Вторая итерация SwiftUI не дала нам готовой реализации для UICollectionView, но она дала нам два мощных компонента, LazyVGrid и LazyHGrid, для создания мощных макетов на основе сетки.

В следующих нескольких разделах мы рассмотрим:

  • Как создавать сетки SwiftUI
  • Как настроить элементы сетки
  • Как создавать различные виды макетов сетки
  • Как определять разделы в сетках SwiftUI

Давайте начнем.

Сетки SwiftUI

Как следует из названия, LazyVGrid используется для вертикального расположения видов, а LazyHGrid - для их горизонтального расположения. Важно отметить, что элементы загружаются лениво по запросу.

Чтобы настроить тип макета сетки, нам нужно указать массив элементов сетки в инициализаторе.

GridItem в основном позволяет вам указать размер отдельных элементов, расстояние между ними и выравнивание внутри строк для LazyHGrid и для столбцов в LazyVGrid.

Давайте посмотрим на различные способы создания элементов сетки.

Как настроить элементы сетки

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

private var columns: [GridItem] = [
    GridItem(.fixed(50)),
    GridItem(.fixed(100))
]

Вышеупомянутый массив GridItem может быть передан в LazyVGrid или LazyHGrid. Посмотрим, как:

LazyVGrid(columns: columns, alignment: .center, spacing: 10)

По сути, сетка SwiftUI, созданная из вышеприведенного макета, будет иметь два элемента в каждом столбце строки, первый размером 50, а другой - 100. Интервал, определенный внутри инициализатора LazyVGrid выше, находится между каждой строкой.

Мы можем установить интервал между столбцами следующим образом:

private var columns: [GridItem] = [
    GridItem(.fixed(50), spacing: 50),
    GridItem(.fixed(100)),
    GridItem(.fixed(100))
]

Давайте посмотрим на сетки SwiftUI в действии с двумя указанными выше типами столбцов:

Как изменить размер элементов сетки

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

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

К счастью, помимо использования fixed для определения GridItem размеров, мы также можем использовать adaptive и flexible.

Адаптивный размер элемента

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

Например:

GridItem(.adaptive(minimum: 100))
GridItem(.adaptive(minimum: 50, maximum: 100))

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

Вторая строка устанавливает верхний предел максимальной ширины или высоты каждого элемента в строке или столбце. Давайте сравним их оба в LazyVGrid:

Гибкий размер элемента

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

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

Посмотрите, как мы создали flexible трехколоночную сетку ниже:

Array(repeating: GridItem(.flexible(), spacing: 10), count: 3)

Обратите внимание, что во втором макете сетки мы установили выравнивание по левому краю. Кроме того, элементы не занимают все доступное пространство на экране, как adaptive макеты. Это ключевое различие между макетами adaptive и flexible.

Вы также можете смешивать типы flexible, adaptive и fixed при построении элементов сетки.

Как установить разделы в SwiftUI Grids

Мы увидели, как создавать макеты сетки, размеры элементов, устанавливать интервал и выравнивание. Теперь давайте рассмотрим еще одну интересную особенность - создание разделов.

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

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

К счастью, инициализатор LazyVGrid и LazyHGrid имеет необязательный аргумент pinnedViews, который позволяет вам указать закрепление раздела вверху или внизу или обоих, как показано ниже:

//pins at top
LazyVGrid(columns: columns, pinnedViews: [.sectionHeaders])
//pins at bottom
LazyVGrid(columns: columns, pinnedViews: [.sectionFooters])
//both
LazyVGrid(columns: columns, pinnedViews: [.sectionHeaders, .sectionFooters])

Приведенный выше код SwiftUI для липкого и не липкого заголовка доступен в этом Своде.

Вы также можете установить вложенные for циклы для заполнения элементов в каждом разделе сетки.

Заключение

Итак, мы построили LazyVGrid макетов разных GridItem типов и размеров. Впоследствии мы построили секции и увидели, как их закреплять. Вы также можете установить LazyHGrid как раздел LazyVGrid для создания макета Instagram Stories.

Вот и все. Спасибо за прочтение.