Барабаним сами

#mobile_dev #android #kotlin

Хочу такой барабан, как на iPhone

Спорить о юзабилити стандартных элементов управления мобильных ОС можно вечно. Мы не будем.

В рамках дизайна или по требованию клиента нам приходится реализовывать различного рода Picker, которые служат основой для барабанов, слайдеров и каруселей.

На «Хабре» есть статья, которая рассказывает, как создавать Picker через Canvas. Такой подход имеет ряд недостатков. Например, сложность реализации анимированной плавной прокрутки с ускорениями и необходимость реализации метода onDraw для однотипных, но разных интерфейсов.

Реализуем вариант бесконечного барабана через SnapHelper. Picker будет оперировать списком строк List<String>, который передается в конструктор адаптера для RecyclerView. Количество элементов в этом RecyclerView будет Integer.MAX_VALUE. За счет этого мы добьемся «бесконечной» прокрутки списка.

Для реализации эффекта барабана при прокрутке определим класс SlideLayoutManager. Метод onScrollStateChanged, помимо вызова суперметода, для каждого элемента вычисляет расстояние до центра RecyclerView и возвращает позицию элемента с минимальным расстоянием. Метод scrollVerticallyBy с помощью функции scaleDownView производит корректировку визуальных составляющих элементов, например размера и цвета.

Пример инициализации Picker можно увидеть здесь.

Реализацию XML-разметки picker_item, а также размещение RecyclerView в разметке Layout оставим за кадром этой заметки.

Оперируя различными визуальными эффектами, можно изменять внешний вид и поведение нашего барабана.

Сделано в Лаборатории Студии Чулакова

Студия Олега Чулакова

Дизайн-студия № 1 в России по версии Tagline, лучший usability / UX в стране по версии Золотого Сайта.

Специализируется на создании сложных систем и сервисов для крупных компаний. Среди клиентов Студии Tele2, ИКЕА, МегаФон, БКС Банк, Yota и другие крупнейшие российские бренды.