Всплывающее меню по кнопке в таббаре

Понравилось мне вот это оригинальное всплывающее меню, вызываемое по кнопке в таббаре. Меня привлекло данное дизайнерское решение тем, что кнопка плюс, при нажатии плавно трансформируется в меню и одновременно с этим меняет свое смысловое значение. «+» символизирующий открытие меню плавно перетекает в «-«, символизирующий закрытие меню.
Здесь реализуется основной принцип Материального дизайна — «объекты не появляются из ниоткуда, равно как и не уходят в никуда».

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

Кода в этой статье Вы не найдете, здесь будет только архитектурное решение задачи. Исходники проекта можно взять с GitHub.

Начнем с того, что у нас есть UITabBar, мы видим в нем кнопку «+». По тапу на ней основной контент сдвигается вверх и на освободившемся месте открывается меню. В ходе открытия меню его элементы плавно появляются, а элементы таббара плавно исчезают.  Отдельно отметим трансформацию кнопки в меню. Менюпоявляется из вертикальной черты и как бы является составляющей частью кнопки. При очередном тапе все поисходит в обратном порядке.

Решение с ходу — это сделать кастомный элемент UITabBarItem. Но если посмотрим на реализацию этого класса, то увидим, что у него очень скудные возможности кастомизации. Максимум, что мы можем, это работать с уже имеющимися компонентами, картинкой и текстом. Этого для нас будет мало.

Следовательно, будем делать свой собственный контрол на основе UIView (class PlusBtnView: UIView). Наш класс полностью возьмет на себя заботу о внешнем виде кнопки, анимации ее отдельных частей, отработке нажатий и отображением меню. Для интеграции с всплывающим меню заведем свойство subMenuView (weak var subMenuView: UIView?). Для уведомления «внешнего мира» добавим делегат (var delegate: PlusBtnViewDelgate?). Делегат нам потребуется, чтобы уведомить контроллеры экранов, что им следует скорректировать свой вид в соответствии с состоянием кнопки и прогрессом анимации.

Осталось решить где нам создавать и выводить кнопку с меню. Зарезервируем место в UITabBar для кнопки, добавим 5 UIViewController’ов вместо 4-х и у среднего установим прозрачную картинку для иконки и уберем текст. Так как кнопка и меню у нас привязаны к UITabBar, логично добавить кастомный класс для UITabBarController (class TabBarController: UITabBarController) и в нем уже создать кнопку, меню и добавить на экран.

Пару слов скажем о самом всплывающем меню. Это будет UIView(class SubMenuView: UIView), содержащий UICollectionView c кастомной ячейкой (class SubMenuCollectionViewCell: UICollectionViewCell) иммитирующей кнопку.

Исходники проекта можно взять с GitHub.

Подписывайтесь! Будет интересно! )

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *