Узнайте, как реализовать макет сетки в iOS13 и iOS14

SwiftUI был впервые представлен на WWDC 2019, и за последние два года API быстро улучшился. Apple действительно внесла значительные улучшения в SwiftUI, включая компоненты пользовательского интерфейса, макеты и анимацию.

До WWDC21 SwiftUI еще не включал выделенный CollectionView или Compositional Layouts для замены UICollectionView в UIKit. В результате текущее решение, которое может быть реализовано разработчиками, использует UICollectionView с UIViewRepresentable.

В этой статье мы обсудим доступные решения для имитации CollectionView в SwiftUI без использования UIViewRepresentable.

Решение

Есть несколько подходов, которые мы можем реализовать в нашем проекте, используя только SwiftUI API, но мы должны рассмотреть эти альтернативные решения на основе поддерживаемой версии iOS.

1. Использование ScrollView с VStack и HStack (iOS13 +)

Реализуя это, мы можем поддерживать большинство приложений, которые в настоящее время представлены на рынке (с iOS 13).

2. Использование ScrollView с LazyHGrid или LazyVGrid (iOS14 +)

Это последняя версия SwiftUI API, более гибкая и оптимизированная для памяти, но доступная только для iOS14 и выше.

1. ScrollView с VStack и HStack (iOS13 +)

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

1. Создайте новый проект SwiftUI с минимальной поддержкой развертывания в iOS13.

2. Создайте новое представление SwiftUI (CardView), чтобы создать простое представление карточки. Кроме того, мы добавляем расширение Color, чтобы получить случайный цвет для RoundedRectangle.

3. Теперь добавьте модель Card и RowView как CardView контейнер. RowView создаст несколько карт на основе заданного массива и вставит их в HStack. Также требуется spacing, width и height, чтобы правильно разместить и изменить размер CardView.

4. Добавьте MockStore.swift, чтобы ввести данные некоторых образцов карточек.

5. Наконец, завершите наш ContentView файл.

Мы будем использовать образцы данных, чтобы показать карточки в двух столбцах. Обратите внимание, что этот код поддерживает только два элемента в строке. Чтобы в каждой строке было больше элементов, нам нужно изменить константу itemPerRow.

Ниже представлен результат, который мы получим. Потрясающие!

2. ScrollView с помощью LazyHGrid или LazyVGrid (iOS14 +)

LazyHGrid и LazyVGrid были представлены на WWDC20. Эти два API можно использовать только с минимальным развертыванием iOS14 и выше.

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

Сетка« ленивая в том смысле, что в представлении сетки не создаются элементы, пока они не понадобятся». - Разработчик Apple

Большой. Приступим к кодированию.

В этом примере мы используем LazyVGrid с .flexible GridItem, чтобы продемонстрировать вертикальную прокрутку CardView с гибким размером. GridItem имеет три разных состояния размера, включая .flexible, .fixed и .adaptive.

  1. Сначала создайте новый проект SwiftUI. По умолчанию он должен установить минимальную цель развертывания iOS14 +.
  2. Обновите ContentView, как показано в коде ниже. Мы будем повторно использовать тот же CardView, показанный в предыдущем разделе.

Элементы, показанные в каждой строке, определяются общим количеством элементов в массиве GridItem. В приведенном ниже примере мы определяем только три элемента.

Как видно из приведенного выше кода, он намного чище и проще, чем предыдущая реализация. Это потому, что LazyVGrid API теперь обрабатывает все, что нам нужно.

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

Полезные библиотеки GitHub

В дополнение к решениям, перечисленным выше, есть две отличные библиотеки, которые можно использовать для достижения той же цели с большей гибкостью, и обе поддерживают iOS 13 и выше.

1. QGrid

По сути, это библиотека-оболочка для создания макета сетки с использованием ScrollView, GeometryReader, HStack или VStack (аналогично нашему первому подходу).

2. WaterfallGrid

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

Заключение

LazyVGrid и LazyHGrid имеют множество преимуществ с точки зрения функциональности и гибкости, особенно функция отложенной загрузки. Однако следует иметь в виду, что большинство проектов iOS по-прежнему поддерживают пользователей iOS13. В результате, пока все пользователи не перейдут на iOS14, мы должны оставить ScrollView, VStack и HStack в качестве текущего предпочтения. Вы можете сослаться на полный проект в моем репозитории на GitHub.

Надеюсь, эта статья улучшила ваше понимание использования SwiftUI с сеткой. Спасибо за прочтение. Удачного кодирования!

Ресурсы

GitHub

Изучите макет сетки