Вы изо всех сил пытаетесь создать привлекательное выдвигающееся меню с помощью Xcode? Не волнуйтесь, мы вас прикрыли!

Затраченное время: займет около 10–20 минут.
Уровень квалификации: Начинающий.

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

Шаг 1. Создайте проект Xcode, выберите Приложение для единого представления, нажмите "Далее". Назовите проект как хотите, в данном случае я назову его SlideOutMenu. Сохраните его в желаемом месте, я сохранил его на своем рабочем столе.

Вуаля, вы только что закончили первый шаг в создании красивого бокового меню! Насколько это было легко? Давайте двигаться дальше.

Шаг 2: Начните с встраивания контроллера навигации в файл ViewController.swift. Давайте перейдем к нашей Main.storyboard, выберем ViewController и нажмем Editor в меню панели инструментов вверху. Прокрутите до пункта Встроить, затем нажмите Контроллер навигации, например так:

PROtip - когда мы нажимаем на наше выдвижное меню, мы хотим иметь возможность выбирать разные представления и переходить к различным параметрам в меню. Вот почему нам нужен контроллер навигации. Это позволит нам вернуться к нашему основному представлению, когда будет выбран вариант (надеюсь, что это имело смысл, если у вас есть какие-либо вопросы, не стесняйтесь оставить комментарий или лично отправить сообщение, и я отвечу, как только я буду доступен) .

Шаг 3. Теперь давайте настроим наш пользовательский интерфейс. Вернитесь к своей Main.storyboard, и это все компоненты, которые вам понадобятся:

  • Элемент кнопки панели (вы также можете использовать настраиваемый значок, который пользователи смогут щелкнуть, чтобы открыть выдвижное меню). Я использовал значок Гамбургер из Icons8, не стесняйтесь использовать все, что соответствует вашим потребностям. Если вы используете собственный значок, убедитесь, что вы поместили его в папку Assets.xcassets, перетащив его, например:

  • Вернитесь к своей Main.storyboard и перетащите элемент кнопки панели в верхний левый угол панели навигации:

  • Давайте отметим нашу панель навигации, перейдите в Attributes Inspector и назовите название как угодно, в данном случае я назову его "Выдвижное меню".
  • Затем я собираюсь изменить цвет фона, чтобы вы могли заметить, когда слайд-меню появляется при нажатии на него. Вы можете изменить цвет на любой, какой захотите, или, если вы добавляете его в другой проект, просто оставьте его как есть (вы поймете, почему на следующих шагах). Чтобы изменить цвет фона, выберите Просмотр, затем перейдите к Инспектору атрибутов и выберите Фон, чтобы изменить цвет. Вот как это должно выглядеть на данный момент:

  • Поскольку мы хотим, чтобы пользователи могли нажимать значок меню, нам необходимо открыть View, с которым они могут взаимодействовать. Затем мы разместим View из Object Library и разместим его под панелью навигации слева, вот так:

  • Теперь давайте установим некоторые ограничения для только что созданного View:

  • Давайте также изменим цвет представления, перейдя к Инспектору атрибутов представления и нажав Фон. Измените цвет на любой, какой вам нравится. В моем случае я выбрал более темный цвет, чтобы он выглядел визуально привлекательным для пользователя.
  • Теперь перетащите кнопку из библиотеки объектов и поместите ее в только что созданный вид сбоку. PROtip - вы можете добавить столько кнопок, сколько захотите, и вам понадобится отдельный ViewController для каждой созданной вами кнопки (ДАХ! Не требует пояснений).

  • Не забудьте добавить ограничения ко всем своим кнопкам:

  • Пора запачкать руки! Давайте добавим код, чтобы наши пользователи могли взаимодействовать со всем, что мы только что создали! Звучит весело, правда ?! Хорошо, пойдем, перейдите к вашему файлу ViewController.swift и подключите ведущее ограничение боковой стороны View, используя опцию Control-drag и создав IBOutlet вот так:

  • Давайте добавим действие для нашего элемента кнопки панели, выбрав значок (в моем случае это значок меню гамбургера) и перетащив его в редактор помощника:

  • Теперь давайте создадим переменную, чтобы отслеживать, отображается или не отображается выдвижное меню: var menuShowing = false (строка 13)

  • На изображении выше мы настраиваем меню так, чтобы оно отображалось при нажатии и не отображалось, когда пользователь снова нажимает значок меню. Теперь давайте сделаем немного фанка и добавим анимацию в наше выдвижное меню:

Вот видео о выдвижном меню в действии!

Спасибо всем за чтение, надеюсь, это помогло. Если у вас есть какие-либо вопросы, оставьте комментарий или свяжитесь со мной лично, и я отвечу, как только я буду доступен!

РЕДАКТИРОВАТЬ: убедитесь, что вы установили выравнивание X: на -140 для вида сбоку в инспекторе размеров: