Swift + Программирование

Исходный код всех примеров для этой главы доступен на Git.

Этот подход можно использовать для Premium подписки приложения, а вместе проверки возраста показывать PayWall.

Как и зачем проверять возраст

В мобильном приложении есть несколько разделов и функций, которыми должны пользоваться только взрослые:

• Отправка, удаление и сохранение фото в галерею

• Оформление подписки

В соответствии с пунктом 1.3 Kids Category документа о правилах аудита приложений App Store Review Guidelines для доступа в эти разделы необходимо создать Parental Gate

Самые популярные способы проверки возраста: простые арифметические операции, операции с фигурами, но бывают и забавные, например "Что делает видеомагнитофон?" с вариантами ответов.

💡 В моём приложении я буду использовать задачи на арифметику. Сколько будет 4+9, 4x4 или 25/5 с тремя вариантами ответов.

Как создать состояние для всего приложения и управлять им

Родительский режим включается по всему приложению, это состояние будет храниться на уровне приложения. И транслироваться по цепочке как Binding, чтобы можно было добавить переключающие кнопки и обновлять состояние приложения.

Есть два подхода к управлению приложением:

1. Добавить отдельное состояние детский режим - родительский режим и отдельно управлять состоянием "Запрос разрешения"
   Плюсы - четкость разделения назначения каждого флага
   Минусы - нужно разбираться с 4 состояниями приложения в обработчиках кнопок

2. Создать три состояния детский режим - запрос разрешения - родительский режим
   Плюсы - четкая последовательность смены состояний
   Минусы - нельзя проверить возраст без перехода в родительский режим

💡 Какой вариант выбрать? Я выберу вариант с тремя состояниями. Мне важно, чтобы родительский режим всегда выделялся цветом, а четкость назначения флагов в таком маленьком проекте не важна

Состояние будет храниться в enum, который будет работать как конечный автомат.
Метод next будет переключать состояния по кругу:
Детский режим -> Проверка возраста -> Родительский режим.

Метод cancel возвращает состояние из Проверка возраста в Детский режим. Другие состояния не меняются.

Про переключение фонов кнопок и панелей я рассказывал в предыдущих статьях. Код выглядит так:

Как создать всплывающее модальное окно проверки возраста

Отображение панели будет завязано на состояние запроса возраста

Код примера

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

Для отображения панели требуется 6 параметров: A, Оператор, Б и три ответа. Я разделил пример на три части, чтобы можно было знак операции сделать крупнее.

Отображаться панель будет если состояние приложения меняется на "Запрос разрешения". Эта же кнопка будет возвращать детский режим.

Код примера

А сворачиваться панель будет по тапу на фон или нажатию на кнопку ответа. Правильный ответ продвинет состояние вперед методом next, а неправильный или тап на фон - cancel.

Код примера

Как создать простые случайные примеры проверки возраста

Для проверки возраста будет запрос математической операции сложения и умножения однозначных чисел результатом которой будет число больше 10. И операции деления и вычитания двузначного больше 10 и однозначного чисел в результате которого будет однозначное число.

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

Алгоритм создания операции такой:

Код реализации

Создавать новый пример необходимо при отображении окна. При этом важно помнить, что SwiftUI может обновлять состояние View и пересоздавать всю структуру в случае внешних событий. Поэтому создавать пример необходимо в модификаторе onAppear панели.

Код примера

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

Заключение

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

Все работающие примеры есть в проекте на Github, их можно скачать и запустить.

Пишите в комментариях интересующие вас темы для будущих статей, а чтобы их не пропустить - подписывайтесь на дневник.

Примеры изображений и кода из этой статьи доступны на GitHub.

Что такое Preview и как работает

Режим предварительного просмотра пришел на замену WYSIWYG редактору Storyboards и Nib-файлов. Он позволяет использовать то, что называется Live-coding - изменения в коде вызывают автоматическую пересборку проекта и обновление экрана. Это позволяет легко экспериментировать и пробовать разные подходы на узких местах. Процесс выглядит так:

Чтобы создать Preview есть два подхода, "классический" и "новый"

Классический подход

Он появился вместе со SwiftUI. И работает как в 14, так и в 15 версиях Xcode.

Создается структура, которая реализует протокол PreviewProvider(дальше я для краткости буду писать "Структура типа PreviewProvider"), в её свойстве previews опысывается то, что необходимо отобразить. Все, что вернет это свойство Xcode покажет в Canvas - это дополнительное окно, которое отображается рядом с кодом справа или снизу от окна с кодом.

Если в свойстве вернуть несколько View - они будут отображены как отдельные варианты. Каждому можно задать свое имя через модификатор previewDisplayName

Код примера выше

Макрос #Preview

Код примера выше

Он появился в Xcode 15 и работает только для сборки под iOS 17.

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

Скорее всего, этот вариант станет основным для работы с Vision Pro и будет расширяться в дальнейшнем.

Максим Гришутин написал статью на Habr с разбором того, что внутри делает макрос

Что Preview позволяет из коробки:

• Взаимодействовать с компонентами - нажимать, вводить текст

• Применить темную/светлую тему

• Проверить работу при разных ориентациях устройства

• Посмотреть на работу приложения с разными размерами текста

• Проверить работу на разных устройствах(Xcode 15)

Все это можно использовать с помощью кнопок внизу в окне предварительного просмотра

В Xcode 15 есть ряд изменений по работе с Preview:

1. Появился выбор устройства для просмотра, включая Очки Vision Pro

2. Предпросмотр можно добавить через макрос #Preview, это немного экономит код

Увы, скролл по прежнему ломается, если сделать масштаб покрупнее.

Ориентация экрана

Сменить ориентацию экрана можно в окне просмотра. Для этого нужно нажать на кнопку Device Settings и включить Orientation, после чего выбрать требуемое значение.

Можно одновременно посмотреть все варианты ориентации, если выбрать Variants и Orientation Variants

Другой способ - это использовать модификатор .previewInterfaceOrientation в код preview. Но он работает только внутри структуры типа PreviewProvider

В макросе #Preview необходимо использовать параметр traits, модификатор не работает.

Код примера выше

Темная/светлая тема

Сменить темную/светлую тему можно аналогично в окне просмотра. Для этого нужно нажать на кнопку Device Settings и включить Color Scheme, после чего выбрать требуемое значение.

Можно одновременно посмотреть светлую и темную темы, если выбрать Variants и Color Scheme Variants

Другой способ - это использовать модификатор .preferredColorScheme в коде preview. Она работает и в макросе, и в структуре.

Код примера выше

Тестирование на устройствах

Xcode 15 позволяет выбрать устройств для теста с помощью новой кнопки выбора устройства. И посмотреть на работу приложения на каждом из устройств.

В структуре типа PreviewProvider можно указать устройство через модификатор .previewDevice(...) но в качестве параметра нужно указать строку с именем устройства. Узнать его можно в меню запуска или списке симуляторов. Вот типичные устройства, которые установлены по-умолчанию:

Код примера выше

Список устройств:
iPhone SE (3rd generation)
iPhone 14
iPhone 14 Plus
iPhone 14 Pro
iPhone 14 Pro Max
iPad mini (6th generation)
iPad (10th generation)
iPad Air (5th generation)
iPad Pro (11-inch) (4th generation)
iPad Pro (12.9-inch) (6th generation)

В макросе #Preview выбор устройства не работает. А для PreviewProvider необходимо выбирать тип устройства Automatic. Но в Xcode 15 предпросмотр устройств пока часто ломается.

Физическое устройство

Проверить работу можно на собственном устройстве, для этого на нем должно быть установлено приложение Xcode Previews, оно должно быть запущено, телефон подключен к маку. В Xcode 15 выбор осуществляется в меню устройства, а в 14 версии есть отдельная кнопка Preview On Device

Этот вариант позволяет удобно тестировать multitouch-сценарии и физические возможности, например доступ к камере

Проверка элемента на разных размерах и режим Selectable

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

Это можно сделать с помощью задания traits в макросе #Preview или использования модификатора .previewLayout(). В оба можно передать одно из двух значений.

• .fixed(width: 200, height: 300) - задает размер для контейнера Preview

• .sizeThatFits - масштабирует размер контейнера Preview так, чтобы уместить контент.

Код примера выше

Режим Selectable не позволяет взаимодействовать с элементами, но позволяет задать размер контейнера и выбрать элемент в preview и Xcode выделит код, который за него отвечает.

State и смена состояния

Ещё один вариант использования Preview - проверка управления состоянием и переключением. Я буду использовать это в следующей статье, посвященной родительскому режиму приложения.

Код примера выше

Использовать @State напрямую ни в структуре типа PreviewProvider, ни в макросе #Preview для проверки изменяемого состояния не получится. Т.к. оба состояния статические, они не обновляются и будут константами. Разницы между static var и .const - нет

Код примера выше

Самый простой и наглядный вариант - это использовать дополнительный контейнер, который будет настоящей View, хранить необходимые состояния и применить Preview уже к нему. Для примера я доработаю код из видео про LiveCoding, чтобы пароль и его видимость можно было задавать извне.

Код примера выше

Заключение

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

Расширить возможности позволяют имена для конфигураций и служебные View, которые могут хранить состояние и задавать необходимые данные.

Все работающие примеры preview есть в проекте на Github, их можно скачать и запустить.

Пишите в комментариях интересующие вас темы для будущих статей, а чтобы их не пропустить - подписывайтесь на дневник.

Исходный код всех примеров для этой главы доступен на Git.

Яркие панели инструментов с градиентной заливкой

Панели инструментов в приложении оформлены как единый градиент, проходящий от левого верхнего угла к правому нижнему. Также по краю панели идет тонкий градиент, обозначающий границу панели. Поверх панели идет узор(к нему вернемся позже).

Как я рассказывал в статье про кнопки, у приложения есть два режима - детский и родительский, которые визуально отличаются по цвету. Для того, чтобы можно было управлять подложкой панели, у неё есть параметр accessLevel.

💡 Такую схему можно использовать для разделения приложения в бесплатном режиме и с Premium подпиской. Либо реализовать темную/светлую тему, если требуется больше контроля над стилем.

Стиль панелей подразумевает отступ по 8 точек с слева и справа, по 4 сверху и снизу. Минимальный размер панели 72 точки. Ширина панели всегда должна быть равна ширине экрана. Остается добавить параметр panelLocation для размещения панели сверху или снизу экрана за счет добавления Spacer(Это что-то вроде пружины, заполняющей место в VStack - контейнере, размещающем объекты в столбик).

Код примера выше

Хочу подробнее рассказать про GeometryReader и elements

В примере GeometryReader - это способ в SwiftUI получить размеры элемента. Здесь он вернет размеры родительского контейнера, которые равны размеру экрана.

elements - это фабрика(ViewBuilder), которая вернет объекты, которые будут размещены на панели. Также для её использования необходимо объявить компонент как Generic. Это позволит использовать панели аналогично другим SwiftUI контейнерам.

Код примера выше

Это уже похоже на панель, но необходимо поработать над стилем. Градиент на панелях должен быть сквозным , он должен начинается на верхней панели и продолжается на нижней независимо от их размера.

Правильный градиент

Чтоб добиться такого эффекта необходимо взять полноэкранные градиенты и обрезать их по размеру видимой части панели. Но напрямую получить размер панели в SwiftUI не получится.

Чтобы получить размер панели нужно сделать следующие изменения:

1. Добавить GeometryReader в свойство .background компонентов elements панели, где в примере выше был градиет.

2. Поскольку блок GeometryReader - это ViewBuilder - фабрика компонентов, там нельзя сохранить размер напрямую в свойство. Необходимо добавить Color.clear в качестве виртуального компонента

3. В этом виртуальном компоненте нужно использовать метод preference, который позволяет сохранять различные значения как определенные ключи PreferenceKey.

4. Считать полученное значение в методе onPreferenceChange и уже в его блоке, который является просто блоком кода, сохранить полученный размер панели в свойство всего компонента панели.

💡 Я сохраняю весь CGRect, но в этом нет необходимости и достаточно сохранять только CGSize.
А метод reduce у ToolbarFrameKey пустой, потому что значение, полученное в методе preference будет передаваться по цепочке до уровня elements и не должно меняться.
Про PreferenceKey и reduce будет отдельная статья

Код примера выше

После чего полученное значение используется для создания маски для градиента. Она создается как прямоугольник, заполняющий весь экран(размер передается как параметр toolbars) и в нем вырезается "окошко", которое перекрывает контент за пределами панели.

В функции GradientMask создается Shape, который создается как два вложенных прямоугольника. Модификаторы clipShape и contentShape обрезают фон визуально и логически, чтобы фон пропускал тапы

Код примера выше

Полный код панели инструментов c добавленными градиентными границами можно посмотреть на GitHub.

Автоматическое расположение кнопок

В панель можно разместить любые компоненты, например слайдеры, галерею наклеек или кнопки. Но для кнопок придется каждый раз писать один и тот же код - в зависимости от количества кнопок добавлять Spacer.

Компонент ToolbarButtons будет принимать на вход массив кнопок типа ToolbarButton из прошлой статьи и расставлять необходимые компоненты в зависимости от количества кнопок.

Код примера выше

• Если кнопок нет - возвращается Spacer высотой 64 точки

• Если кнопка одна - слева и справа от неё добавляется по Spacer

• Если кнопок две и больше - создается массив из именованной tuple типа (index, button) и перед каждой кнопкой кроме первой добавляется Spacer

Узор поверх панели

Для добавления узора я создам компонент, который позволит менять наклон и цвет узора. Это даст возможности попробовать разные параметры и посмотреть, какой приятнее глазу.

Узор будет создаваться как прямоугольник с плиточной заливкой изображением, отмеченным как Template. Это тип изображения, в котором используется только альфа-канал, а цвет можно задать через свойство foregroundColor
Этот прямоугольник повернут на угол относительно центра. Определить его размер можно по формулам

Поэтому необходимо в компонент узора передавать размер панели инструментов toolbarFrame. И добавить маску, аналогично градиентам.

Последняя деталь - узор должен заходить под панель статуса и низ экрана. Для этого я создаю виртуальный элемент под узором, задаю ему размер панели и указываю ему ignoresSafeArea. И считываю safeAreaInsets в свойство типа EdgeInsets. Затем это свойство я сохраняю как insets и использую для корректного расчета размера узора

Код примера выше

Заключение

В этой статье я рассказал о создании панелей инструментов со сквозным фоном и дополнительным узором. На мой взгляд создавать таки панели в SwiftUI не сложнее, чем в UIKit, но требует опыта и фантазии.

Все работающие примеры панелей есть в проекте на Github, их можно скачать и запустить.

Пишите в комментариях интересующие вас темы для будущих статей, а чтобы их не пропустить - подписывайтесь на дневник.

Исходный код всех примеров для этой главы доступен на Git.

Примеры изображений и кода из этой статьи доступны на GitHub

Про плотность пикселей

В 2010 году появился iPhone 4, экран которого по размеру был такой же, как iPhone3GS, но количество цветных лампочек стало в 4 раза больше. Это позволило повысить четкость картинки. Но прибавилось работы разработчикам и дизайнерам, потому что теперь требовалось 2 набора изображений, для старых и новых телефонов. Автоматическое изменение масштаба не подходило, потому что на новых дисплеях можно было добавить больше деталей.

Получается, что один и тот же физический квадратик экрана в зависимости от плотности может включать 1, 2х2=4 или 3х3=9 пикселей устройств. Поэтому важно различать понятия пиксель и точка.

• Точка / point / pt - виртуальная точка на экране, ей соответствуют 1, 4 или 9 пикселей

• Пиксел / pixel /px - это физическая трехцветная лампочка экрана.

Линия толщиной в 1pt будет смотреться примерно одного размера на экранах одного размера независимо от плотности пикселей.
Линия толщиной в 1px на экранах с большей плотностью будет тоньше

Красная - линия в 1pt, зеленая - линия в 1px

💡 Линия в 1px толщиной используется как разделитель, она получается тонкая и не отвлекает на себя внимание.

Три варианта изображений используют внимательные к деталям дизайнеры для того, чтобы максимально точно управлять графикой и попаданием в пиксели для текста и pixelart. Разная плотность пикселей позволяет добавить больше деталей или немного менять стиль. Для примерна в разрешении @1x я увеличил звезды.

Для разработки используются:

• Растровые изображения PNG

• Векторные изображения PDF

• Код на Swift для создания изображений

• Иконки для интерфейса SF Symbols

PNG

Это растровые изображения, они состоят из отдельных точек. Это сетка, на которой каждая точка имеет цвет + прозрачность. Если изображение изначально создается как растровое, например 3D, нарисовано вручную или создано с помощью AI, оно может быть только растровым.

Иконки приложения пока могут быть только в PNG. И Xcode нужны изображения в разных размерах и плотности пикселей от 1024х1024 до 20х20. Если для иконок не создаются отдельные изображения под каждое разрешение, то достаточно загрузить изображение 1024х1024 и выбрать в боковом меню Single Size. Xcode сам создаст требуемые изображения

💡 В моем проекте растровыми будут иконки приложения и узоры для панелей инструментов. Иконки, потому что выбора нет, а на узорах есть размытие, которое векторный формат не сможет передать. Возможно на этапе работы с панелями я смогу добавить фильтр размытия средствами SwiftUI.

PDF

Векторное изображение, исходный размер в пикселях в котором сохранен как pt. Скорее всего Apple выбрала PDF, а не SVG из-за этого, а также из-за возможности закрыть документ для редактирования. Векторные изображения хранят линии, фигуры, заливки - некий код картинки, который система использует для того, чтобы создать изображение. Но и векторное изображение в итоге все равно преобразуется в растровое.

В Xcode есть переключатель Preserve Vector Data в боковом меню сохраняет формат PDF во время работы приложения и позволяет получать четкие картинки любого размера(этим мы воспользуемся дальше для наклеек в будущих постах). Если переключатель выставлен в OFF, то данные по изображениям переводятся в растр и используются аналогично PNG.

Для векторных изображений также можно подготовить отдельные варианты под разную плотность пикселей. Но все удобство работы с ними заключается в возможности использовать Single Scale - Xcode сам создаст изображения требуемого размера.

💡 В моем проекте все изображения доступны в векторе, поэтому я буду использовать формат PDF как основной. Это даст четкие изображения для всех кнопок, а также для наклеек, которые могут динамически менять размер.

Swift

Это не совсем формат изображений. Но в код на Swift можно преобразовать любое векторное изображение, потому что и то, и другое - это код. Но это имеет смысл только для простых форм и градиентов.

Есть инструменты для преобразования, например SVG-To-Swift, которую можно попробовать на сайте. Для картинки со шляпой получилось 200+ строк кода

А результат не впечатляет и очевидно требует доработок:

Градиенты

Генерация кода отлично подходить для переноса градиентов. Редактор Figma умеет создавать градиенты, которые можно вставлять в код и использовать. В этом примере градиент содержит 5 точек с заданными цветами.

💡 В моем проекте я буду использовать градиенты, созданные на Swift там, где возможна их автоматическая генерация средствами Figma. Это панели и фоны. Но градиент на загрузочном экране будет из PDF, т.к. там нельзя использовать код.

SFSymbols

Системные иконки от Apple, которые можно использовать в своих приложениях. Они предназначены для создания пользовательских интерфейсов в строгом системном стиле. Это что-то среднее между изображением и текстом. В коллекции есть иконки на все случаи жизни. Можно настроить цвет, стиль и размер, а в новом iOS SDK добавить анимацию. Это большая тема, достойная отдельной статьи.

💡 В моем проекте я пока их использовать не планирую

Заключение

Изображения в приложении необходимо подбирать под оформление и задачи таким образом, чтобы сэкономить силы и время себе, а пользователю трафик и место на устройстве. Но не в ущерб качеству.

Что я рекомендую:

• SFSymbols - отличное решение для небольших команд, которые хотят быстрее запустить прилично выглядящий продукт в системном стиле

• Swift - для несложных градиентов в качестве фона экрана или панели. Цвета лучше отправлять в Assets

• PDF - стоит использовать для всех изображений, которые изначально были векторными

• PNG - для иконок и изображений, которые изначально растровые

Исходный код всех примеров для этой главы доступен на Git.

Типы кнопок в приложении

• Кнопка съемки - центральная кнопка для съемки, которая просится быть нажатой и отвечает анимацией

• Кнопки на панелях - кнопки действий, которые расположены сверху и снизу экрана на панелях или плавающие

• Боковые кнопки - кнопки, которые расположены по бокам экрана и дают дополнительные функции

Кнопки графические, собираются с использованием изображений. Вот какие форматы я собираюсь использовать:

• PNG - я буду использовать для иконок приложения и узоров панелей(про панели в следующем посте)

• PDF - будет использован практически для всех изображений в приложении, в частности для иконок и подложек у кнопок

• Swift - я буду использовать для градиентов панелей

• SFSymbols - пока не требуется

В следующей статье я расскажу подробнее про эти форматы.

Кнопка съемки с эффектом нажатия

Добавить кнопку в SwiftUI очень просто, за это отвечает объект Button, у которого есть два параметра, action - код, который будет выполняться при нажатии и layout - то, как будет выглядеть кнопка, текст, изображение или видео. При нажатии кнопка будет реагировать уменьшением прозрачности - это стандартное поведение. А сама кнопка расположится по центру экрана, что тоже является стандартным поведением.

Мне нужно сдвинуть кнопку к низу экрана, поэтому я положу кнопку в пустой контейнер VStack - он автоматически раскладывает все, что в него положили в вертикальную стопку. И добавлю над кнопкой заполнитель - Spacer, который работает как пружина, расталкивая объекты.

И дальше нужно собрать экран, как бутерброд. В качестве хлеба будет системное окно приложения, сверху экран с изображением с камеры и дальше слой с кнопкой съемки. Код приводить не буду, там больше скобочек, чем осмысленного текста. Его можно посмотреть тут.

Чтобы поменять анимацию нажатия на кнопку нужно добавить описание стиля кнопки типа ButtonStyle. Когда на кнопку нажимают, у неё меняется состояние - флаг isPressed. Система запрашивает стиль кнопки, передавая этот флаг и получает состояние нажатой и отпущенной кнопки, а даже сама анимирует переходы между ними.

Код, который делает эту анимацию компактный и наглядный - если кнопка нажата, уменьшаем её, сдвигаем немного вниз и уменьшаем тень.

Код из примера выше

Кнопки на панели инструментов

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

Я нарезал иконки так, чтобы центр подложки и центр кнопки совпадали, но где-то ошибся, поэтому третий необязательный параметр - это смещение иконки относительно подложки по вертикали и горизонтали.

Код кнопки для панели инструментов

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

За расположение кнопок будет отвечать сама панель, про это в следующей статье про панели инструментов

Боковые кнопки инструментов

У боковых кнопок, как и у кнопок на панелях есть действие, которое будет выполнять кнопка и иконка. И они тоже двухслойные. И в них тоже можно подправить расположение иконки относительно подложки.

Боковые кнопки также принимают режим детский или родительский - боковые кнопки сохранения, удаления и обмена фотками появляются только в родительском режиме. Также кнопки в родительском режиме получают другой фон.

Ещё у боковых кнопок есть параметр "сторона" - левая или правая. В зависимости от стороны и режима у кнопки может быть одна из 4х подложек. Кроме того сторона влияет на то, к какой стороне будет приклеена кнопка.

Для простоты кнопки будут объединяться в блоки, чтобы проще было ими управлять.

Скрытие кнопок при скролле

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

Чтобы этого избежать, кнопки будут скрываться при скролле и отображаться через 1 секунду после окончания скрола.

Решение задачи состоит из трех частей:

1. У блока кнопок появляется параметр, отвечающий за сокрытие

2. Галерея должна начать сообщать о том, что её скроллят

3. По первому события о скролле скрывать блок кнопок, а через секунду после последнего - отображать

Чтобы это сделать, я использую Swift Combine. Что это такое и как с ним работать будет в одной из будущих статей. Но в репозитории есть пример в файле SideButtonsDimPreview.swift

Заключение

Я рассказал как создавать разные кнопки с параметрами и логикой. Эти кнопки делают немного больше, чем просто нажатие, что делает приложение интереснее, создает его уникальный стиль.

Все работающие примеры кнопок есть в проекте на Github, их можно скачать и запустить.

Если есть интересные темы, связанные с кнопками, которые стоит раскрыть в будущих статьям, напишите в комментариях.

К каждой статье будет исходный код примеров на Github. Но в этой только пустой проект Xcode для будущих статей.

Про меня и этот дневник

Меня зовут Андрей Зарембо-Годзяцкий, я занимаюсь мобильной разработкой уже больше 10 лет. Я работал в RedMadRobot, Яндекс, OZON, Rambler, Tinkoff Mobile и Банк, Сбер и снова в OZON Банк. Прошел путь от разработчика до руководителя мобильной разработки, архитектора и руководителя продукта.

Если вам нужна консультация по мобильной разработке, напишите мне в Telegram

У меня большой опыт, но я до сих пор чувствую нехватку информации и потребность учиться. Все получается не так, как ожидается, приходится придумывать обходные пути, проявлять фантазию и делать смешанные решения. Я решил записать свой опыт, чтобы помочь тем, кто будут решать схожие задачи.

Я выбрал формат дневника, буду рассказывать что я делаю, почему, зачем и с помощью чего. Для вариантов решений расскажу про них и мотивацию выбора. В статьях код будет для иллюстрации конкретных решений, а весь код проекта будет открытым.

Статьи будут выходить раз в неделю в четверг. Объем каждой статьи будет рассчитан на 3-5 минут чтения.

Что я использую в работе

- MacBook Pro 13 M1 c macOS Ventura 13.2.1

- Xcode 14.3.1 cо Swift 5

Предыстория проекта

WatchTheBirdie - детский фоторедактор. Мы сделали его вместе с сыном пару лет назад, когда он начал фотографировать. Четырехлетнему ребенку тяжело справляться с системной камерой: слишком много кнопок, нужно уметь читать и нет наклеек. А мне было сложно находить милые фотографии среди сотен размытых и объяснять коллегам цель отправки фото кота.

Мы описали требования к продукту:

• Простой интерфейс.Только нужные и яркие кнопки, никакого MutltiTouch и сложных жестов, все управляется одним пальцем

• Наклейки. Шапки, солнце, радуга, воздушные шарики, их можно масштабировать, вращать и зеркалить, а фото можно редактировать снова

• Управляют родители. Сохраняют и отправляют фотки только взрослые. Все фото, сделанные детьми хранятся внутри приложения

• iPhone и iPad на iOS 12. Старый iPad стал детским и папин телефон тоже

Я написал ТЗ, заказал дизайн и через несколько месяцев сын стал делать фотки и украшать их наклейками. Сейчас я решил обновить приложение, потому что дети продолжают пользоваться приложением, а в Appstore его скачивают несколько человек в неделю.

Сейчас фоторедактор полностью бесплатен и скачать его можно в Apple AppStore

Планы по обновлению

• Переписать интерфейс с UIKit на SwiftUI. Переписать интерфейс с помощью новых технологий, исправить ошибки

• Добавить AI на основе CoreML. Добавить оценку фото с помощью искусственного интеллекта, фильтры для изображений и управление жестами для съемки селфи с задержкой

• ASO и маркетинг. Оптимизировать страницу в магазине приложений, научиться зарабатывать

• Наклейки. Добавить ещё наклеек и эффектов

Что будет в следующих статьях

В дневнике будут не только статьи про решение конкретных задач моего проекта, но и общие статьи о разработке и инструментах.

Что я планирую по фоторедактору:

1. О проекте. Эта статья. Про сам проект и что я буду делать дальше

2. Про Кнопки. Про обновление кнопок на SwiftUI, Анимацию, состояния и сокрытие кнопок при скролле

3. Про панели инструментов. Как создать панели для кнопок, с фоном и узором поверх, добавить туда кнопки

4. Родительский режим. Как добавить отдельный режим приложения, влияющий на интерфейс и функциональность приложения.

5. Галерея. Как реализовать галерею фотографий с тремя режимами просмотра и анимироваными переходами между ними

6. Просмотр фото. Сделать просмотр фото на SwiftUI не так-то легко и поможет мост в UIKit.

7. Навигация. Как реализовать навигацию по приложению

8. Редактирование галереи. Как реализовать редактирование галереи

9. Обрезка фото и поворот. Как сделать обрезку фоток и поворот на SwiftUI c помощью UIKit

10. Управление наклейками. Как просматривать ленту наклеек и добавлять их на фото, как редактировать

11. Запрос разрешений. Как сделать так, чтобы можно было запрашивать разрешения в едином простом формате и тестировать состояние, когда не дали доступ

12. Картинка с камеры. Как получить картинку с камеры и как накладывать фильтры

13. Фильтры. Как добавить фильтры

14. Качество фотографий c CoreML. Как реализовать оценку качество фотографий на модели

15. Собственные фильтры c CoreML. Как реализовать собственные фильтры для

16. Управление жестами с CoreML. Как добавить распознавание жестов на CoreML

17. ASO и монетизация. Оптимизировать страницу в магазине приложений, научиться зарабатывать

Помимо дневника я планирую рассказать и про общие темы:

• Форматы изображений в Xcode. Какие бывают изображения и как используются

• SwiftUI Preview Provider. Как работает Preview Provider и как его эффективно использовать

• Swift Combine. Функциональное(реактивное) программирование, где оно помогает, а где лучше не использовать

• DI, что это и зачем. Про внедрение зависимостей по-простому

• SF Symbols возможности. Как использовать SF Symbols и что они умеют

• SwiftUI State. Как SwiftUI работает с состоянием компонентов, когда и как его обновляет.

• Как поднять и настроить свой VPS. Как работать с VPS, использовать Docker

• Git. Про Git и как им пользоваться

Оставляйте в комментариях интересующие вас темы, если я смогу про них рассказать - обязательно добавлю в план.

Код к статье на GitHub

История 1 — отражение

@holoroad

Маленькая дочка почти научилась ходить и всюду телепалась за мной. Я не курил при ней. Ходил на балкон, а она, прильнув к стеклу, смотрела на меня и ждала, когда я докурю и выйду к ней. И в какой-то момент она начала повторять за мной вот эти движения. Маленький человечек, ей было года полтора или два, прикладывала воображаемую сигарету к губам, а потом делала вид, что выпускает дым. И весело так на меня смотрела, сквозь стекло балконной двери. Ей нравилось все, что со мной связано, и она подражала всем моим действиям. Я курил уже двадцать лет и, конечно, делал множество попыток бросить до этого. Но в этот раз у меня в первый раз появилась по-настоящему важная причина бросить. Это важно для человека, который безгранично мне доверяет. С тех пор прошло почти десять лет, в течение которых я не сделал ни одной затяжки.

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

Сформулируйте, что для вас значит отказ от никотина. Это может быть желание прожить дольше, избавиться от проблем со здоровьем, выглядеть моложе, сэкономить деньги или защитить близких от пассивного курения. Напоминание об этой причине повесьте на видное место.

История 2 — список

@maxneb

Беременность жены, рождение ребенка, здоровье, деньги — ничего не было веским поводом бросить окончательно. Постоянно срывался. Помогло составить список, что теряю и что получаю от сигарет, и понимание, что хотя бы одна затяжка — и все насмарку: пару месяцев буду курить. Только список и его осознание. Для каждого он свой. И постоянное обращение к нему. После составления списка курил еще. Но он как заноза висел в голове с вопросом «зачем?»... Так, что-то щелкнуло и сейчас не тянет. Иногда тянет физически, но осознание бесполезности курения сразу глушит позывы. Полгода, полет нормальный...

Бросать на авось — идея, которая подойдет не всем. Нужно понимать, что делать в трудные моменты:

• Определите дату отказа. Подготовьтесь морально, уберите сигареты, зажигалки, пепельницы.

• Замените привычки. Сигарету в руках можно заменить орешками, палочками морковки, жвачкой или даже кубиком льда.

• Займите время. Вспомните, чем вы любили заниматься: спорт, хобби, прогулки.

• Планируйте, что делать при тяге. Она длится всего 3–5 минут. Дыхательные практики или звонок другу помогут пережить сильное желание закурить.

• Откажитесь от «наградных сигарет». Одна затяжка и вы откатитесь назад.

Можно бросить резко, «с понедельника», или постепенно, снижая количество сигарет до нуля. Главное — определиться и не отступать.

История 3 — переключение

@Spaka

45 лет, стаж 30. Пытался завязать много раз, потом понял, что после каждой попытки бросить, курить начинаешь больше. Как ребенок, которому не дают вкусняшку, а она случайно попала ему в руки. Из чего мозг сделал вывод: не уверен — не бросай. Потом стал замечать, что организм уже стал сам просить перестать курить. По утрам было очень неприятно во рту, удовольствие после сигареты стало короче, а негатив, приходящий следом, ощутимее: неприятные ощущения в горле, боли миндалин, страх схватить онкодиагноз. Хотя врачи говорили, что все ок, в голове-то гоняешь мысли. Я решил попробовать обмануть сам себя. Не делать из процесса отказа какого-то события. Бросить так, как будто это и должно было произойти, но ты не знаешь когда. Про себя помолился, как сумел, и попросил помощи, хитро прищурил глаз и в момент, когда забыл купить про запас (оставалась пара штук в пачке), просто перестал курить. Мне теперь даже странно, как я раньше это делал. Так и живу почти два года. Кстати, раньше в момент завязки курящих ненавидел, дым был очень противен, до тошноты. Теперь все равно. Присоединяйтесь ;)

Есть несколько стратегий отказа от курения:

• Резкий. Эффективный и решительный подход.

• Постепенный. Сначала — меньше сигарет, потом — меньше затяжек. И так до нуля.

• Психологическая замена. Каждая сигарета — это ритуал. Найдите для каждого из них «здоровую замену».

• Медикаментозная терапия. При сильной зависимости врач может порекомендовать никотинозаместительную терапию (пластыри, таблетки, жвачки) или препараты, которые помогают справиться с синдромом отмены. Но любые лекарства принимаются только по рекомендации специалиста.

Каждый, кто хочет оставить зависимость в прошлом, может обратиться в центры здоровья, которые работают при поддержке нацпроекта «Продолжительная и активная жизнь», и получить необходимую помощь специалистов. Адреса доступны на официальном портале Минздрава России о здоровье: takzdorovo.ru. Также можно позвонить на горячую линию по отказу от зависимостей 8 800 200-0-200.

История 4 — форма

Аноним

Курила электронки 2 года как замену обычным сигаретам. Думала, что это не так дорого, не так вредно да и для девушки вроде более привлекательно: не пахнут волосы и руки. А потом решила привести свое тело в форму. Стала ходить в зал и поняла, что задыхаюсь на первом же упражнении, хотя женщины гораздо старше меня бодрячком. Было очень тяжело слезть. Друзья советовали заменять сигаретами. А потом уехала в отпуск в страну, где нельзя покупать электронки, отвлеклась, и после возвращения уже не тянуло. Даже на тусовках, где все дымят.

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

«Особую тревогу вызывает рост потребления табачных изделий и электронных сигарет. Согласно исследованию, проведенному в нашем Центре, 36,8% курильщиков потребляют одновременно и табак, и электронные сигареты. Среди молодежи в возрасте 25-39 лет этот показатель превышает 45%. Электронные никотиносодержащие и безникотиновые устройства поражают сердце, сосуды, дыхательную систему и ДНК организма не менее пагубно, чем традиционные сигареты, а в ряде случаев способны вызывать острые состояния, включая сосудистые поражения и летальные исходы» – рассказывает руководитель Центра профилактики и контроля потребления табака НМИЦ терапии и профилактической медицины Минздрава России Маринэ Гамбарян.

История 5 — пари

@kernima

Вроде не было никаких серьезных предпосылок, чтобы бросить. Да и чтобы начать: просто все вокруг курили, думал, это сейчас тренд. А потом как-то сидели в баре и решили поспорить с некурящим другом. Он затирал, что моя жизнь из-за электронки катится ко дну, я — доказывал, что это всего лишь маленькая шалость. В общем поспорили на пять тысяч. Чтобы было легче и можно было отвлечься, начал бегать по утрам. Друг проиграл, а я возвращаться к курению не стал. Вдруг снова у еды появился вкус, я начал высыпаться и больше не устаю на втором лестничном проеме. Короче, советую!))

Сульфат никотина, один из компонентов электронных сигарет, раньше использовали как пестицид, но запретили из-за высокой токсичности. Жидкость для «электронок» содержит и опасные химикаты вроде пропиленгликоля, ацетальдегида и акролеина — промышленных веществ, способных вызывать воспаления, поражения органов и мутации клеток. Ароматизаторы, создающие иллюзию безвредности, на деле могут привести к более тяжелой интоксикации, чем при курении сигарет. А еще вейпы содержат не природный, а синтетический никотин — солевой. Он быстрее всасывается, дольше выводится и вызывает зависимость стремительнее.

Когда организм отвыкает от никотина, бывает нелегко: люди становятся раздражительным и нервозными, быстро устают, возникают сухость во рту, кашель, трудности с концентрацией. Важную роль в борьбе с этими симптомами играет питание. В рацион стоит включить овощи, фрукты, орехи, семечки. Клетчатка способствует очищению организма от токсинов. Важно питаться сбалансировано: с достаточным количеством белков, жиров, углеводов и витаминов. Лучше временно исключить продукты, усиливающие удовольствие от табака (например, мясо), а также отказаться от алкоголя, кофе и крепкого чая. Они могут спровоцировать желание закурить. А вот большое количество воды, травяных чаев и настоев облегчит очищение организма и поможет справиться с сухостью во рту.

История 6 — связь

Аноним

Устал курить, понял, что мне это мешает заниматься спортом и в целом комфортно себя чувствовать. Пошел через ассоциации: покурил во время головной боли, и потом через самовнушение дал себе установку, что голова болела от курения. Звучит странно, конечно, но это сработало. Никотиновую зависимость снижал постепенно через редкое курение кальяна (2-3 раза в неделю с последующим уменьшением).

Чтобы добиться успеха в отказе от курения, стоит подготовиться. Обязательно расскажите о своем решении друзьям и близким — поддержка со стороны очень важна. Если вы уже предпринимали попытки бросить, вспомните, что тогда пошло не так, и постарайтесь не повторять этих ошибок.

Разберитесь, что именно тянет вас к сигарете: скука, стресс, привычка? Когда вы это осознаете, будет легче подобрать альтернативные действия — прогулку, книгу, разговор с близким. Учитесь распознавать моменты, когда особенно хочется закурить, и переключаться на что-то другое. Можно подключиться к программам или группам поддержки — это поможет не сдаваться. И главное: уберите из дома все сигареты.

История 7 — вершина

Аноним

Поднимался с сыном по Пушкинской тропе на гору Железная. Мне лет сорок пять было, идем общаемся, сын бегает туда-сюда. Ну идем короче, а сзади нас догоняет семейная пара, мирно о чем-то щебеча между собой. Догнали и обходят. И так спокойно удаляются… Все бы ничего, но им лет по шестьдесят, если не больше. Я попробовал в их темпе, но задыхаться стал. Короче, поднялся я на гору, спустился, смял пачку и выкинул в мусорную урну. Вот уже 13 лет не курю. Стаж 27 лет.

Курение — это быстро развивающаяся зависимость, схожая по механизму с наркотической. Никотин воздействует на мозг, вызывая кратковременное улучшение настроения, за которым следует упадок сил и потребность в новой дозе. Со временем формируется толерантность, и прежние негативные реакции организма на табак ослабевают. Физическая зависимость сочетается с психологической: сигарета начинает ассоциироваться с отдыхом, решением задач, рутиной. Курение укрепляется поведенческими шаблонами: кофе, вождение, паузы на работе уже не мыслимы без сигареты.

Каждый, кто пытался избавиться от никотиновой зависимости, знает, как это тяжело. Ломка, раздражительность, навязчивые мысли. Даже при переходе на вейпы, иллюзия «меньшего вреда» быстро развеивается: химические коктейли из ароматических смесей также бьют по легким, сосудам и всему организму.

Хорошая новость в том, что вы не одни. В сообществе «Давай бросать» (ВКонтакте и мессенджере Telegram), который работает при поддержке нацпроекта «Продолжительная и активная жизнь» знают, каково бороться с триггерами, искать замену привычке и удерживать себя от срыва. Здесь делятся историями тех, кто смог, поддерживают тех, кто только начал, и помогают разобраться в главном: как пережить отказ без мучений.

Социальная реклама. АНО «Национальные приоритеты», ИНН: 9704007633