SiwftUI Preview / 5мин
Из этой статьи вы узнаете, как использовать SwiftUI Preview для идеальной верстки на всех устройствах, темной/светлой теме и что что нового в Xcode 15
В этой статье вы прочитаете:
Что такое Preview и как работает
Ориентация экрана
Темная/светлая тема
Тестирование на устройствах
Проверка элемента на разных размерах и режим Selectable
State и смена состояния
Примеры изображений и кода из этой статьи доступны на 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:
Появился выбор устройства для просмотра, включая Очки Vision Pro
Предпросмотр можно добавить через макрос #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, их можно скачать и запустить.
Пишите в комментариях интересующие вас темы для будущих статей, а чтобы их не пропустить - подписывайтесь на дневник.