Стендап Сьогодні 📢 Канал в Telegram @stendap_sogodni

🤖🚫 AI-free content. This post is 100% written by a human, as is everything on my blog. Enjoy!

27.10.2023

Реалізація пейджинатора на SwiftUI

Пейджинатор працює як на швидкий ривок пальцем, так і на повільне пересування до наступного кадру.

Взагалі для прокручування по сторінках не потрібна прокрутка.

Інтерфейс ділиться на три етапи. Перший та головний — перегляд сторінки. Оскільки ми вирішили зупинятись на кожній сторінці, тут все просто — це буквально просто компонент з поточною сторінкою.

Другий етап — жест прокручування. Для того у нас є DragGesture. Поки жест триває (тобто поки користувач утримує палець — а з ним і зміст), ми застосовуємо до сторінки зсув (offset()), який відповідає довжині жесту. Але, звісно, під час перетягування ми хочемо бачити й наступну сторінку — або попередню. Тому малюємо не одну поточну сторінку, а смужку з трьох сторінок. (При цьому вони, звісно, кадруються до розміру однієї.)

Нарешті, останній етап — реакція на жест, який закінчився. Жест може бути успішним або неуспішним. Успішність визначається, принаймні у мене, або коли протягнуто більше ніж 70% сторінки, або коли жест відбувся ривком, тобто з достатньою швидкістю. Після неуспішного жесту анімуємо зсув назад до нуля.

Після успішного жесту відбувається найцікавіше. Маємо перейти до наступної сторінки — не тільки візуально, але й у внутрішньому стані. На щастя, SwiftUI дає можливість поєднати те та інше. Для переходу змінюємо індекс поточної сторінки — це ясно — а також переводимо зсув у систему координат нової сторінки. Та… також анімуємо зсув до нуля. Тепер наш пейджинатор повністю перейшов до нової сторінки та готовий почати все спочатку.

Звісно, є багато чого тут можна покращити. Наприклад, відразу створювати не 3, а більше сторінок, щоб вони встигли підвантажитись. Тоді можна, наприклад, прокручувати більше однієї сторінки особливо різким жестом.

Схожий підхід, думаю, спрацював би й в JavaScript чи інших фреймворках.