Давайте посмотрим на новый мощный инструмент для создания макетов в виде коллекций.
Вторая итерация 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.
Вот и все. Спасибо за прочтение.