Научитесь создавать ячейки представления коллекции с возможностью прокрутки и привязки и масштабировать их при прокрутке
Эта статья призвана помочь вам понять, как настроить 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. Не стесняйтесь проверить это, если вы в чем-то застряли.
Надеюсь, это поможет вам сэкономить время. Если у вас есть вопросы, не стесняйтесь оставлять ответ. Спасибо за чтение и удачного кодирования!