Создавайте красивые пользовательские интерфейсы бокового меню для своих приложений!
Боковые меню имели большое значение в 2010-х годах. Особенно те, которые раньше выходили, сдвинув вправо со стороны экрана. Насколько они были круты?
Но времена меняются. Дизайн развивается. И это скользящее меню не всегда выглядит так круто с нашей современной графикой, верно? Я имею в виду, представьте себе красиво оформленное приложение с обычным скользящим меню. Фу. Устаревший.
Плохая новость заключается в том, что иногда нам все еще нужно меню для навигации наших пользователей. Так можем ли мы сделать его подходящим для нашего приложения, чтобы оно не выглядело так, как будто оно было опубликовано десять лет назад? Я думаю да! И если вам нравится внешний вид моего бокового меню, читайте дальше, чтобы внедрить мой код в ваше приложение, чтобы увидеть, как оно выглядит, и дайте мне знать ваши отзывы!
Если вы хотите просмотреть видеоурок, откройте ссылку ниже:
Шаг 1: Создайте меню
Во-первых, нам нужно будет установить набор параметров, которые мы хотим включить в наше боковое меню. У каждой опции должен быть заголовок, который увидит пользователь, и соответствующий переход, который нужно выполнить при выборе:
Вот где они появятся в конце урока:
Установите цвет фона представления на желаемый цвет и добавьте табличное представление внутри него. Здесь появятся наши параметры меню, поэтому вы должны выровнять его по левой стороне экрана и сделать его ширину равной половине размера экрана, чтобы убедиться, что он полностью виден, когда основной вид перемещается вправо.
Добавьте ячейку табличного представления внутри табличного представления.
Подключите представление таблицы к вашему контроллеру представления и назовите его menuTableView.
Создайте класс с именем tableViewCell с типом UITableViewCell и добавьте любой элемент, который вам может понадобиться для вашего меню. Я буду использовать метку только для отображения имени опции.
Назначьте класс ячейке табличного представления.
Прямо под идентификатором ячейки табличного представления есть опция «Выбор». Он автоматически устанавливается на «по умолчанию». Это означает, что фон вашей ячейки станет белым после выбора. Я решил не использовать это и позже настроить собственную пользовательскую анимацию выбора, поэтому я изменю выбор с «по умолчанию» на «нет», чтобы избежать нежелательных автоматических анимаций.
Затем в вашем контроллере представления добавьте этот код в функцию viewDidLoad():
menuTableView.delegate = self menuTableView.dataSource = self menuTableView.backgroundColor = .clear
Теперь все, что нам нужно сделать, это настроить табличное представление, что мы можем сделать, добавив расширение в класс нашего контроллера представления, используя следующий код:
Создайте проект и убедитесь, что ваш результат выглядит примерно так:
Шаг 2. Настройте основной вид
Теперь, когда мы создали наше боковое меню, пришло время создать наш основной вид. Первое, что нам нужно сделать, это добавить представление в раскадровку и сделать так, чтобы оно помещалось на весь экран. Убедитесь, что вы также установили его верхнее, нижнее, начальное и конечное ограничения равными нулю.
Настройте представление для целей вашего приложения. Мое представление будет содержать представление изображения размером фона с изображением растения и альфа-значением 0,15, а также фиктивными изображениями и метками в качестве презентации.
Подключите представление контейнера к контроллеру представления и назовите его containerView.
Следующим шагом является добавление распознавателей жестов, которые мы будем использовать для распознавания, когда пользователь пытается показать или скрыть боковое меню. Откройте библиотеку и добавьте распознаватель жестов касания внутрь представления контейнера.
Используя тот же метод, добавьте распознаватель жестов смахивания в представление контейнера, только на этот раз вы подключите его к ViewController и назовете егоswipeGesture.
Как только ваше представление настроено, вы готовы к коду анимации!
Шаг 3: код анимации
Первое, что мы сделаем, это установим логическое значение, чтобы определить, когда отображается наше меню. На данный момент мы установим для него значение false, пока пользователь не проведет пальцем, чтобы отобразить боковое меню:
var menu = false
Мы также установим ярлык для границ экрана, чтобы сделать наш код тоньше:
let screen = UIScreen.main.bounds
Чтобы запомнить начальное положение представления, нам также нужно установить свойство, чтобы мы могли легко вернуться к нему:
var home = CGAffineTransform()
В viewDidLoad() home будет соответствовать текущей позиции представления контейнера:
home = self.containerView.transform
Теперь мы готовы к анимации. Я создал две разные функции, одну с именем showMenu(), а другую с именем hideMenu(). Я буду использовать CGAffineTransform() для масштабирования представления и перемещения его позиции x на 0,8 в анимации, которая будет длиться 0,7 секунды, и я буду использовать свойство home, чтобы быстро вернуть представление в исходное положение:
Подключите распознаватель жестов смахивания к контроллеру представления, чтобы создать действие. Это будет жест, который вызовет отображение меню.
Во-вторых, подключите также распознаватель жестов касания к контроллеру представления, чтобы создать действие, закрывающее боковое меню.
Почти готово!
Наш последний шаг: наше действие «Распознаватель жестов смахивания» должно запускаться каждый раз, когда пользователь проводит пальцем вправо, пока для свойства menu установлено значение false, что означает, что меню еще не отображается. Когда это произойдет, наша функция showMenu() будет выполнена, а для свойства menu будет установлено значение true.
И наоборот, когда наш пользователь нажимает на представление, когда отображается меню, наш распознаватель жестов касания запускает действие, которое выполняет нашу функцию hideMenu() и устанавливает для свойства menu значение false.
И все готово! Теперь создайте свой проект и протестируйте его:
Вы можете скачать полный код на GitHub!
Вам понравилось это руководство? Хорошо ли это сработало с вашим проектом? Спасибо за прочтение.
Want to Connect? Follow me on… ❤️ YouTube 💖 Dribbble 💜 Instagram 💙 Ko-Fi 🖤 GitHub
