Как стать автором
Обновить
817.86
OTUS
Цифровые навыки от ведущих экспертов

Осваиваем Grid в SwiftUI

Время на прочтение 4 мин
Количество просмотров 11K
Автор оригинала: Majid


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

  1. Быстрый старт в iOS-разработку
  2. Делаем многопоточное приложение Kotlin Multiplatform

А теперь перейдем к статье.



На этой неделе я хочу поговорить с вами о сетках элементов (Grids) — одном из самых ожидаемых нововведений в SwiftUI. Все с нетерпением ждали альтернативы UICollectionView в SwiftUI, и, наконец, в этом году она появилась. SwiftUI предоставляет нам представления LazyVGrid и LazyHGrid, которые мы можем использовать для создания макетов с сетками элементов.

Основы


LazyVGrid и LazyHGrid — это два новых типа представления (View), которые SwiftUI предоставляет нам для создания супер настраиваемого макета (Layout) на основе сетки элементов. Единственное различие между ними — ось заполнения. LazyVGrid заполняет доступное пространство в вертикальном направлени. LazyHGrid же размещает свои дочерние элементы в горизонтальном направлении. Ось — единственное различие между двумя этими представлениями. По этому все, что вы узнаете о LazyVGrid, применимо к LazyHGrid и наоборот. Давайте посмотрим на первый пример.

struct ContentView: View {
    private var columns: [GridItem] = [
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16)
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(
                columns: columns,
                alignment: .center,
                spacing: 16,
                pinnedViews: [.sectionHeaders, .sectionFooters]
            ) {
                Section(header: Text("Section 1").font(.title)) {
                    ForEach(0...10, id: \.self) { index in
                        Color.random
                    }
                }

                Section(header: Text("Section 2").font(.title)) {
                    ForEach(11...20, id: \.self) { index in
                        Color.random
                    }
                }
            }
        }
    }
}



В приведенном выше примере мы создаем сетку из трех столбцов, в которой каждый столбец имеет фиксированный размер в 100pt. Я собираюсь использовать этот пример, чтобы описать все доступные нам варианты конфигурации.

  1. Параметр columns — это массив, который определяет столбцы в макете сетки (grid layout). Для описания столбца SwiftUI предоставляет нам тип GridItem. Мы поговорим о нем немного позже.
  2. Параметр alignment позволяет нам выровнять содержимое сетки с помощью перечисления HorizontalAlignment для LazyVGrid и VerticalAlignment для LazyHGrid. Работает так же, как stack alignment.
  3. Параметр spacing указывает расстояние между каждой строкой внутри LazyVGrid или пространство между каждым столбцом внутри LazyHGrid.
  4. Параметр pinnedViews позволяет определять опции для закрепления верхних и нижних колонтитулов секции (headers и footers). По умолчанию он пуст, что означает, что верхние и нижние колонтитулы ведут себя как содержимое и исчезают при прокрутке. Вы можете включить закрепление верхнего и нижнего колонтитулов, в этом случае они будут накладываться на контент и становятся постоянно видимыми.

GridItem


Каждый столбец в сетке должен быть определен с помощью структуры GridItem. Тип GridItem позволяет нам указывать размер (size), выравнивание (alignment) и интервал (spacing) для каждого столбца. Давайте посмотрим на небольшой пример.

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



Как видите, каждый столбец может иметь разные параметры размера, интервала и выравнивания. Самое интересное здесь — размер. Есть три способа определить размер столбца внутри сетки. Он может быть фиксированным (fixed), гибким (flexible) или адаптивным (adaptive).

Fixed столбец является самым очевидным. Сетка размещает столбец в соответствии с заданным вами размером. В предыдущем примере мы создали макет с тремя столбцами, в котором столбцы имеют фиксированные размеры 50pt, 75pt и 100pt соответственно.

Опция flexible позволяет определить столбец который расширяется или сжимается в зависимости от доступного пространства. Мы также можем предоставить минимальный и максимальный размер гибкого столбца. По умолчанию он использует минимальное значение 10pt и не ограничен по максимуму.

private var columns: [GridItem] = [
    GridItem(.flexible(minimum: 250)),
    GridItem(.flexible())
]



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

Самый интересная опция — adaptive. Адаптивный вариант позволяет нам размещать несколько элементов в пространстве одного гибкого столбца. Давайте попробуем разобраться с этим на примере.

private var columns: [GridItem] = [
    GridItem(.adaptive(minimum: 50, maximum: 100)),
    GridItem(.adaptive(minimum: 150))
]



Как вы можете видеть, у нас есть два адаптивных столбца. В первом столбце разместилось несколько элементов с минимальным размером 50pt и максимальным 100pt. Адаптивные столбцы удобны, когда количество элементов внутри столбца должно зависеть от доступного пространства.

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

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



Заключение


Сетка позволяет создавать очень сложные и интересные макеты путем смешивания различных типов GridItem. Следует отметить, что все изменения в сетках можно анимировать. Надеюсь, вам понравилась эта статья. Не стесняйтесь подписываться на меня в Твиттере и задавать свои вопросы, связанные с этой темой. Спасибо за внимание, до встречи!



Узнать подробнее о наших курсах вы можете по ссылкам ниже:



Теги:
Хабы:
+5
Комментарии 3
Комментарии Комментарии 3

Публикации

Информация

Сайт
otus.ru
Дата регистрации
Дата основания
Численность
101–200 человек
Местоположение
Россия
Представитель
OTUS