Мы собираемся создать в Swift настраиваемую расширяемую кнопку, как показано ниже:

Во-первых, важно понимать структуру представления, которая необходима для реализации такого компонента, как этот.

Мы создадим подкласс UIView, который будет состоять из 5 подвидов:

  1. containerStackView, который будет содержать menuButton и expandedStackView
  2. menuButton, который при нажатии обрабатывает расширяющуюся анимацию
  3. expandedStackView, который будет отображаться или скрываться при нажатии menuButton
  4. dogButton, который будет частью expandedStackView
  5. 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.