Мы собираемся создать в Swift настраиваемую расширяемую кнопку, как показано ниже:
Во-первых, важно понимать структуру представления, которая необходима для реализации такого компонента, как этот.
Мы создадим подкласс UIView, который будет состоять из 5 подвидов:
containerStackView
, который будет содержатьmenuButton
иexpandedStackView
menuButton
, который при нажатии обрабатывает расширяющуюся анимациюexpandedStackView
, который будет отображаться или скрываться при нажатииmenuButton
dogButton
, который будет частьюexpandedStackView
catButton
, который также будет частьюexpandedStackView
Создание нашего кастомного UIView
Начнем с настройки нашего представления, которое мы назовем ButtonPanelView
. Сначала мы создадим 3 экземпляра UIButton
и 2 экземпляра UIStackView
.
Мы добавим dogButton
и catButton
как упорядоченные подвиды expandedStackView
. Затем мы добавим expandedStackView
и menuButton
как упорядоченные подвиды containerStackView
.
Мы можем сделать некоторые стили представления (например, добавить цвет и тени), а также добавить любые необходимые ограничения при инициализации ButtonPanelView
.
Анимация
Сама анимация очень проста; каждый раз, когда нажимается кнопка меню, мы меняем isHidden
состояние подвидов expandedStackView
(то есть dogButton
и catButton
) и самого expandedStackView
, используя метод UIKit
UIView.animate
.
Мы также можем внести некоторые простые изменения в наш код анимации в handleTogglePanelButtonTapped
, чтобы смайлик ➕ сменился на ❌ при раскрытии панели и наоборот при свертывании.
Вот окончательная реализация нашего класса ButtonPanelView
:
Спасибо за прочтение! Вы можете найти полную демонстрацию расширяемой кнопки на GitHub.