Эта статья посвящена ярким кнопкам на SwiftUI. Вы прочитаете про анимацию, скрытии кнопок при скролле и про изменяемый стиль.
Из этой статьи вы узнаете:
- Какие есть типы кнопок в приложении и их особенности
- Как переписать кнопки на SwiftUI
- Кнопка съемки с эффектом нажатия
Кнопки инструментов с изменяемой подложкой
Боковые кнопки инструментов, скрывающиеся при скролле
Исходный код всех примеров для этой главы доступен на Git.
Типы кнопок в приложении
- Кнопка съемки - центральная кнопка для съемки, которая просится быть нажатой и отвечает анимацией
- Кнопки на панелях - кнопки действий, которые расположены сверху и снизу экрана на панелях или плавающие
- Боковые кнопки - кнопки, которые расположены по бокам экрана и дают дополнительные функции
Кнопки графические, собираются с использованием изображений. Вот какие форматы я собираюсь использовать:
- PNG - я буду использовать для иконок приложения и узоров панелей(про это в следующем посте)
- PDF - будет использован практически для всех изображений в приложении, в частности для иконок и подложек у кнопок. Потому что , Почти все картинки я буду сохранять в PDF, потому что исходный формат - вектор
- Swift - я буду использовать для градиентов панелей
- SFSymbols - пока не требуется
В следующей статье я расскажу подробнее про эти форматы.
Кнопка съемки с эффектом нажатия
Добавить кнопку в SwiftUI очень просто, за это отвечает объект Button, у которого есть два параметра, action - код, который будет выполняться при нажатии и layout - то, как будет выглядеть кнопка, текст, изображение или видео. При нажатии кнопка будет реагировать уменьшением прозрачности - это стандартное поведение. А сама кнопка расположится по центру экрана, что тоже является стандартным поведением.
Мне нужно сдвинуть кнопку к низу экрана, поэтому я положу кнопку в пустой контейнер VStack - он автоматически раскладывает все, что в него положили в вертикальную стопку. И добавлю над кнопкой заполнитель - Spacer, который работает как пружина, расталкивая объекты.
И дальше нужно собрать экран, как бутерброд. В качестве хлеба будет системное окно приложения, сверху экран с изображением с камеры и дальше слой с кнопкой съемки. Код приводить не буду, там больше скобочек, чем осмысленного текста. Его можно посмотреть тут.
Чтобы поменять анимацию нажатия на кнопку нужно добавить описание стиля кнопки типа ButtonStyle. Когда на кнопку нажимают, у неё меняется состояние - флаг isPressed. Система запрашивает стиль кнопки, передавая этот флаг и получает состояние нажатой и отпущенной кнопки, а даже сама анимирует переходы между ними.
Код, который делает эту анимацию компактный и наглядный - если кнопка нажата, уменьшаем её, сдвигаем немного вниз и уменьшаем тень.
Кнопки на панели инструментов
Я планирую разделить детский и родительский режими цветами - панели управления и кнопки на них будут менять цвет - это будет первый параметр кнопки. Вторым параметром будет иконка инструмента. Это дает кнопки в одинаковом стиле. А режим будет переключаться для всего приложения, но про это в другой статье.
Я нарезал иконки так, чтобы центр подложки и центр кнопки совпадали, но где-то ошибся, поэтому третий необязательный параметр - это смещение иконки относительно подложки по вертикали и горизонтали.
Код кнопки для панели инструментов
В SwiftUI есть удобный режим предварительного просмотра элементов управления, в который можно подставить необходимые параметры и сразу проверить результат без запуска приложения. В одной из будущих статей я расскажу подробнее, как его эффективно использовать.
За расположение кнопок будет отвечать сама панель, про это в следующей статье про панели инструментов
Боковые кнопки инструментов
У боковых кнопок, как и у кнопок на панелях есть действие, которое будет выполнять кнопка и иконка. И они тоже двухслойные. И в них тоже можно подправить расположение иконки относительно подложки.
Боковые кнопки также принимают режим детский или родительский - боковые кнопки сохранения, удаления и обмена фотками появляются только в родительском режиме. Также кнопки в родительском режиме получают другой фон.
Ещё у боковых кнопок есть параметр "сторона" - левая или правая. В зависимости от стороны и режима у кнопки может быть одна из 4х подложек. Кроме того сторона влияет на то, к какой стороне будет приклеена кнопка.
Для простоты кнопки будут объединяться в блоки, чтобы проще было ими управлять.
Скрытие кнопок при скролле
Боковые кнопки очень удобны, чтобы не плодить лишние вложенные меню, но при просмотре галереи они закрывают правый столбец фоток на телефоне.
Чтобы этого избежать, кнопки будут скрываться при скролле и отображаться через 1 секунду после окончания скрола.
Решение задачи состоит из трех частей:
1. У блока кнопок появляется параметр, отвечающий за сокрытие
2. Галерея должна начать сообщать о том, что её скроллят
3. По первому события о скролле скрывать блок кнопок, а через секунду после последнего - отображать
Чтобы это сделать, я использую Swift Combine. Что это такое и как с ним работать будет в одной из будущих статей. Но в репозитории есть пример в файле SideButtonsDimPreview.swift
Заключение
Я рассказал про типы изображений и как создавать разные кнопки с параметрами и логикой. Эти кнопки делают немного больше, чем просто нажатие и это делает приложение интереснее, создает его уникальный стиль.
Все работающие примеры кнопок есть в проекте на Github, их можно скачать и запустить.
Если есть интересные темы, связанные с кнопками, которые стоит раскрыть в будущих статьям, напишите в комментариях.
