Пейджер, написанный на 100% кодом SwiftUI: от вертикальных и многостраничных страниц до каруселей.

Вступление

SwiftUI 2.0 уже здесь! После WWDC20 было объявлено о появлении множества новых API и функций в iOS 14. После всего лишь одного года существования Apple сделала ставку на эту платформу для поддержки основных функций своего нового выпуска iOS, таких как виджеты и клипы приложений. Это дает разработчикам возможность, которую мы так долго искали: предлог для начала внедрения представлений SwiftUI в наш производственный код.

Новое в iOS 14, TabView поставляется с новым модификатором tabViewStyle и PageTabViewStyle. Это самый близкий к родному пейджеру в SwiftUI. Пагинация горизонтальная, одностраничная, и элементы занимают 100% фрейма своего контейнера:

В некоторых случаях это работает отлично, но как насчет более сложного поведения? Что, если бы мы выполнили какую-то операцию, когда появится третья страница? Можно частично показать боковые элементы? Все это и многое другое возможно с SwiftUIPager.

В следующих нескольких разделах я познакомлю вас с SwiftUIPager и раскрою его потенциал. Мы создадим приложение, которое поможет мне выбрать кошку. Я создал репозиторий для хранения конечного результата. Кроме того, я буду делиться ссылками на содержание в подписи к изображениям.

Базовый пейджер: Галерея кошек

Давайте создадим простую страничную прокрутку с помощью SwiftUIPager. Вам просто нужно использовать свой любимый менеджер пакетов и следовать инструкциям по установке. Также поддерживается ручная установка.



fermoya / SwiftUIPager
SwiftUIPager предоставляет компонент Pager, созданный с использованием собственных компонентов SwiftUI. Пейджер - это представление, которое отображает прокручиваемый… github.com



Примечание. хотя это руководство было написано с использованием Xcode 12b3, SwiftUIPager поддерживает iOS 13+. Если ваше приложение поддерживает более ранние версии iOS, см. Устаревшее руководство по установке.

Я использую Pager, чтобы обернуть коллекцию AsynImage для отображения изображений кошек из CatAPI:

Таким образом, нам удалось добиться того же поведения, что и при использовании TabView. Однако SwiftUIPager предлагает гораздо больше.

Настройка Pager

Давайте немного настроим галерею:

Что тут происходит?:

  • vertical превращает Pager в вертикальный пейджер.
  • interactive добавляет красивый эффект масштабирования несфокусированным страницам.
  • itemSpacing добавляет некоторое пространство между элементами, а itemAspectRatio изменяет размер страницы.
  • padding вставляет содержимое по оси без прокрутки.
  • alignment(.justified) сохраняет страницы в центре прокручиваемой области.

OnPageChanged

Вы заметили, что в этой галерее всего пять страниц? Это не поможет мне принять решение, я не могу выбрать подходящего кота, просто увидев пять картинок! Это потому, что конечная точка поиска CatAPI разбита на страницы, и мой ViewModel запрашивает только пять элементов на страницу. Как мы можем быть уведомлены о переходе страницы? К счастью, Pager поставляется с модификатором onPageChanged для выполнения действия, когда новая страница находится в фокусе:

Я использую onPageChanged здесь, чтобы запросить у моего ViewModel дополнительные элементы, когда последний элемент будет в фокусе.

CatsFilters: множественная разбивка на страницы

В моей галерее слишком много кошек, и я не могу решить, какую выбрать. Мне нужно как-то их отфильтровать. CatAPI предлагает параметры запроса породы и категории для фильтрации результатов, поэтому я собираюсь создать новый View, чтобы фильтровать моих кошек, для начала, по категории изображений. Как и следовало ожидать, SwiftUIPager здесь тоже очень поможет.

Милая! Модификаторы аналогичны тем, которые мы видели ранее, но в этом случае я использую preferredItemSize, чтобы установить фиксированный размер страницы. Мой новый пейджер отображается красиво, но я заметил некоторые проблемы. Прокручивать такие маленькие элементы сложно, и отдельная разбивка на страницы выглядит не очень хорошо. Кроме того, количество категорий очень ограничено, и использование их в качестве эскизов не так хорошо, как можно было бы ожидать. Что, если мы превратим Pager в карусель?

Вот что мы собираемся делать:

  • multiplePagination заставит Pager прокручивать сразу несколько элементов.
  • swipeInteractionArea(.allAvailable) сообщит Pager, что доступны не только страницы, но и вся прокручиваемая область.
  • loopPages(repeating: 2) даст нам желаемый эффект карусели. Здесь я решил повторить элементы дважды. Это означает, что Pager объединит вторую партию элементов с исходным массивом, переданным при инициализации, что позволит более заманить разбиение на страницы.

Фильтрация пород: вращение 3D

Наконец, я хочу быть еще более конкретным при поиске нужного изображения, поэтому мы добавим новый фильтр - порода. В этом случае я представлю еще одну встроенную анимацию в SwiftUIPager: rotation3D. С помощью аналогичного фрагмента кода и этого модификатора мы можем отобразить новый Pager, чтобы обернуть доступные параметры:

Заключительный тест

Давайте запустим это на устройстве и увидим Pager в действии:

Выводы

SwiftUIPager предлагает надежный пейджер для SwiftUI, который поставляется с несколькими модификаторами, чтобы сделать его еще более привлекательным. Мы рассмотрели некоторые из них в этом руководстве:

  • Вертикальные пейджеры
  • Запрос дополнительных товаров по запросу
  • Интерактивные элементы
  • Множественная разбивка на страницы
  • Карусели
  • 3D-эффект вращения

Но есть еще много чего. Остальное зависит от тебя.