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

Эта статья призвана помочь вам понять, как настроить UICollectionView макет, создав подкласс UICollectionViewFlowLayout.

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

Мы создадим кошелек в приложении, аналогичный тому, что есть в Revolut (т. Е. Набор кредитных карт, которые пользователь может пролистывать, центрируя выбранную карту и отображая небольшую часть других карт. ):

Давайте разделим проблему на три части:

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

Итак, приступим. 🥳

1. Настройка представления коллекции

Настроить проект довольно просто. Не забудьте выбрать Storyboard в качестве пользовательского интерфейса, и все готово:

Пользовательский интерфейс и здесь не требует особой подготовки. Вам просто нужно сделать следующее:

  • Добавьте UICollectionView к ViewController Scene и добавьте ограничения.
  • Установите направление прокрутки представления коллекции на horizontal и отмените выбор любых индикаторов прокрутки.
  • Добавьте подвиды (номер карты, фон, CVV и т. Д.) В ячейку представления коллекции и добавьте ограничения.
  • Заполните многоразовый идентификатор ячейки.

Вы можете получить активы и точные размеры из репозитория проекта.

2. Создание интервала между карточками (центрированная разбивка на страницы)

Хороший способ контролировать расположение и расположение ячеек представления коллекции на экране - создать подкласс UICollectionViewFlowLayout. Мы создадим собственный класс, который будет обрабатывать центрированную разбивку на страницы для нас:

А затем установите его в представление коллекции, желательно в классе ViewController, например:

collectionView.collectionViewLayout = CardsCollectionFlowLayout()

3. Добавление поведения при нажатии на прокрутку.

Метод экземпляра scrollViewWillEndDragging(_:withVelocity:target:ContentOffset:) может использоваться, чтобы определить, когда пользователь завершает прокрутку и до какой ячейки необходимо прокрутить представление коллекции:

4. Изменение размера карточек на свитке.

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

Мы создадим два метода расширения, которые справятся с этим:

Мы можем вызвать эти методы в методе scrollViewWillEnd после прокрутки collectionView:

previousSelectedCell?.transformToStandard()
nextSelectedCell?.transformToLarge()

Заключение

Вот и все! Полный проект доступен на GitHub. Не стесняйтесь проверить это, если вы в чем-то застряли.

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