Предварительный просмотр Xcode на iphone, что это за программа
Обновлено: 20.11.2024
Декларативный синтаксис SwiftUI упрощает описание пользовательского интерфейса, который вы имеете в виду. API интуитивно понятен, а кривая обучения фреймворка несложная. Но Apple не остановилась на достигнутом. SwiftUI глубоко интегрирован в Xcode, что упрощает создание пользовательских интерфейсов с помощью SwiftUI.
Предварительный просмотр Xcode
Вновь откройте проект Notes и откройте ContentView.swift. Xcode автоматически показывает предварительный просмотр представления, над которым вы работаете, на холсте справа. Xcode генерирует предварительный просмотр, создавая ваше приложение за кулисами. Xcode делает ряд оптимизаций, чтобы сделать этот процесс максимально быстрым. Он использует текущее место назначения для создания предварительного просмотра, в этом примере iPhone 12. Позже в этом выпуске вы узнаете, как это изменить.
Поскольку Xcode знает, что в настоящее время мы работаем над ContentView, он знает, что ему нужно только скомпилировать ContentView.swift для обновления предварительного просмотра. Каждый раз, когда мы вносим изменения в редактор кода слева, Xcode обновляет предварительный просмотр на холсте справа. Если вы вносите значительные изменения в код, Xcode приостанавливает предварительный просмотр. Вы можете возобновить предварительный просмотр, нажав кнопку «Возобновить» в правом верхнем углу или нажав Command + Option + P. Запомните это сочетание клавиш, потому что вы часто используете его при создании пользовательских интерфейсов с помощью SwiftUI.
Предварительный просмотр удобен и имеет ряд преимуществ. Во-первых, вам не нужно запускать приложение в симуляторе или на физическом устройстве каждый раз, когда вы вносите изменения. Это позволяет сократить цикл обратной связи и ускорить разработку пользовательского интерфейса.
Во-вторых, вам не нужно переходить к представлению, над которым вы работаете. Одно это преимущество может сэкономить вам много времени. Это также означает, что вам не нужно изменять состояние приложения для предварительного просмотра внесенных изменений.
В-третьих, можно легко настроить предварительный просмотр по своему усмотрению. Давайте узнаем, как выглядит ContentView, если мы передадим длинную строку инициализатору ContentView.
Глубокая интеграция SwiftUI с Xcode может показаться приятной функцией, но я могу заверить вас, что она оказывает заметное влияние на вашу повседневную работу. Из-за гораздо более короткого цикла обратной связи разработка пользовательского интерфейса происходит быстрее и менее утомительно. Вы также с большей вероятностью заметите проблемы с пользовательским интерфейсом, которые в противном случае могли бы не заметить.
Создание предварительного просмотра
Чтобы создать предварительный просмотр, вы объявляете тип, соответствующий протоколу PreviewProvider. Тип, соответствующий PreviewProvider, требуется для реализации свойства статических вычисляемых предварительных просмотров типа some View . Представление, возвращаемое свойством вычисляемых предварительных просмотров, отображается с помощью Xcode на холсте справа.
Протокол PreviewProvider определен в среде SwiftUI, что означает, что вы можете воспользоваться преимуществами декларативного синтаксиса платформы для настройки создаваемых вами предварительных просмотров. Текущее место назначения запуска определяет предварительный просмотр справа, в этом примере iPhone 12. Нам не нужно менять место назначения выполнения каждый раз, когда мы хотим предварительно просмотреть представление на другом устройстве. Чтобы изменить устройство, отображаемое в предварительном просмотре, мы вызываем метод previewDevice(_:) для экземпляра ContentView, передавая экземпляр PreviewDevice.
Инициализатор PreviewDevice принимает имя устройства в качестве аргумента. Это имя должно совпадать с именем одного из симуляторов, перечисленных в меню назначения запуска вверху. Давайте поменяем его на iPhone 8.
Изменение конфигурации
Как выглядит ContentView, если у пользователя включен динамический тип? Без предварительного просмотра вам нужно будет изменить системные настройки и запустить приложение, чтобы ответить на этот вопрос. Предварительный просмотр делает это тривиальным. Поскольку метод previewDevice(_:) возвращает представление, мы можем использовать цепочку методов для дальнейшей настройки предварительного просмотра. Мы вызываем метод environment(_:_:) для результата, возвращенного previewDevice(_:) , передавая ключевой путь значения среды в качестве первого аргумента и значение для значения среды в качестве второго аргумента. Метод environment(_:_:) позволяет настроить среду предварительного просмотра.
Xcode обновляет предварительный просмотр с учетом обновленной среды. Мы обсудим среду и значения среды более подробно позже в этой серии.
Несколько предпросмотров
Большинство приложений поддерживают несколько платформ, но изучение пользовательского интерфейса на различных устройствах, поддерживаемых вашим приложением, может оказаться утомительным.Предварительный просмотр делает эту утомительную задачу делом прошлого. Тривиально создать несколько предварительных просмотров, каждый с различной конфигурацией. Позвольте мне показать вам, как это работает.
Мы встраиваем предварительный просмотр в группу, нажимая Command, щелкая экземпляр ContentView и выбирая Group в контекстном меню. Чтобы добавить еще один предварительный просмотр на холст справа, мы просто создаем еще один экземпляр ContentView. На этот раз мы передаем iPhone 12 в инициализатор PreviewDevice .
Обратите внимание, что Xcode теперь отображает два предварительного просмотра на холсте справа.
Мы можем настроить среду для каждого предварительного просмотра отдельно. Давайте увеличим размер текста, передав extraLarge в качестве второго аргумента метода environment(_:_:).
Возможности безграничны. Предварительные просмотры Xcode дают вам возможность предварительно просмотреть создаваемый вами пользовательский интерфейс, экономя время и избегая разочарований.
Редактирование пользовательского интерфейса
Предварительные просмотры, создаваемые Xcode, — это больше, чем предварительные просмотры. Вы можете редактировать пользовательский интерфейс представления, используя редактор слева, редактор кода, но также можно внести изменения в предварительный просмотр справа, визуальный редактор. Удалите второй предварительный просмотр и выберите нижний экземпляр Text. Обратите внимание, что Xcode выделяет экземпляр Text в редакторе кода. Этот тонкий намек очень полезен, если вы все еще изучаете структуру SwiftUI.
Нажмите Command и щелкните нижний экземпляр Text в визуальном редакторе. Контекстное меню показывает вам ряд опций. Выберите «Показать инспектор SwiftUI». . Инспектор SwiftUI показывает параметры, необходимые для настройки экземпляра Text. Измените шрифт экземпляра Text, задав для Font значение Title. Xcode обновляет предварительный просмотр в редакторе кода слева и визуальном редакторе справа, чтобы отразить внесенные вами изменения.
Как я упоминал ранее, очень полезно изучить синтаксис SwiftUI и узнать, какие параметры у вас есть для настройки представления. По мере того, как вы лучше знакомитесь со SwiftUI, вы вносите большую часть изменений в редакторе кода. Инспектор SwiftUI очень полезен, если вы новичок в SwiftUI или изучаете API, с которым мало знакомы.
Обратите внимание, что вы также можете нажать Command на экземпляр Text в редакторе кода. Появится такое же контекстное меню, позволяющее настроить экземпляр Text. Помните, что Xcode просто переводит ваш выбор в код. Это означает, что вы можете свободно редактировать код, добавленный Xcode. Давайте изменим шрифт экземпляра Text на body в редакторе кода. Xcode обновляет предварительный просмотр справа, чтобы отразить изменение.
Что дальше?
Предварительный просмотр Xcode — это больше, чем вишенка на торте. Это невероятно мощный и незаменимый инструмент для создания пользовательских интерфейсов с использованием SwiftUI. Мы только поцарапали поверхность в этом эпизоде. В этой серии статей вы узнаете больше о предварительных просмотрах Xcode.
В следующем эпизоде мы сосредоточимся на еще одном важном понятии среды SwiftUI — модификаторах. Метод font(_:), который мы вызвали для экземпляра Text, является модификатором. Представления и модификаторы работают в тандеме для создания пользовательских интерфейсов с помощью SwiftUI.
Создайте пользовательский интерфейс приложения и настройте почти все, что видят ваши пользователи, с помощью предварительных просмотров Xcode.
Сообщения под тегом Xcode Previews
Xcode Previews не работает при использовании в пакете, который импортирует другие пакеты.
Я продолжаю получать сообщение об ошибке Xcode Previews в Xcode 12 из пакета, который импортирует другие пакеты. Как только я удаляю зависимость, я вижу предварительный просмотр SwiftUI. Я могу использовать предварительный просмотр только в пакетах, у которых нет зависимостей. Я получаю сообщение об ошибке: «LoadingError: не удалось загрузить библиотеку по пути. Библиотека не загружена», тогда она указывает на зависимость, которую не удалось загрузить в текущем пакете. Как я могу получить доступ к превью Xcode из пакета, который зависит от других пакетов?
Как исправить сбой?
Я написал краткий код для приложения с помощью камеры, и он сломался, когда я попытался отобразить предварительный просмотр. Кода ошибки нет, так где мне исправить? @State var image: Изображение? @State var isPicking = false var body: some View < ZStack < VStack < VStack < Spacer() image? .resizable() .scaledToFit() Spacer() >HStack < Spacer() Button(action:
Xcode 12 Beta «Не удается выполнить предварительный просмотр в этом файле»
Привет! Я возился в бета-версии Xcode 12 со SwiftUI и базовой моделью данных, и по какой-то причине мой предварительный просмотр ContentView в Xcode не загружается. Вот ошибка: «Невозможно выполнить предварительный просмотр в этом файле — соединение прервано: отправьте сообщение агенту». Я убедился, что все мои целевые членства синхронизированы, учитывая инструменты командной строки Xcode 12 в «Настройки»> «Местоположения», и попробовал любое другое решение, которое я могу найти. там. Есть идеи?
Ошибка при предварительном просмотре на устройстве
Когда приложение Xcode Previews открывается на устройстве, это сообщение об ошибке в Xcode: RemoteHumanReadableError: Не удалось обновить предварительный просмотр. Произошла ошибка при отправке сообщения «отобразить» агенту. Я попытался очистить папку сборки и выйти, а затем снова открыть Xcode, но безрезультатно. Использование предварительного просмотра Xcode 12.0.1 на iPhone 11.
Предварительные просмотры Xcode больше не обновляются после изменений во внешних файлах
Предварительные просмотры Xcode SwiftUI были для меня настоящим подарком судьбы, увеличив мою производительность в 1000 раз благодаря следующим вариантам использования: предварительный просмотр UIViewController (через UIViewControllerRepresentable); обновление кода контроллера представления и просмотр изменений в предварительных просмотрах в режиме реального времени; изменения в предварительном просмотре в режиме реального времени Все это работало как шарм, пока обновленный код находился внутри функций или вычисляемых свойств. Но, начиная с Xcode 13.2, он больше не работает: обновление любого файла вне структуры PreviewProvider просто перезагружает холст, но не учитывает изменения в этих файлах (например, если я изменяю цвет в файле темы, старый цвет будет отображаться в предварительный просмотр, пока я не приостановил предварительный просмотр, перекомпилировал и перезагрузил предварительный просмотр) Использование «Обновить холст» не решает проблему (он просто перезагружает холст с устаревшими данными). Можно ли это исправить?
Предварительные просмотры Xcode продолжают появляться
Помогите, по какой-то причине это приложение называется предварительным просмотром xCode, и каждый раз, когда я перезапускаю его, оно появляется на моем главном экране, как мне навсегда убрать его с главного экрана, это так раздражает
Холст предварительного просмотра Xcode 13.2.1 не реагирует на клавиатуру
Привет! На холсте правильно отображаются все обновления кода, но при нажатии кнопки запуска клавиатура не работает. Я попробовал новый проект, удалил plist симулятора в настройках, конечно, почистил и построил заново. Ничего не работает, и это сводит меня с ума. Я запускаю код на устройстве или симуляторе, работает как положено, только не на холсте. Мысль? Большое спасибо! Благословения, --Марк
Предварительный просмотр Xcode 13.2.1 (13C100) не работает, но симулятор работает!
Последние 3 дня я полностью остановил свою работу, потому что в моем Xcode возникла неизвестная проблема. Я сделал несколько вещей, таких как удаление Xcode, новая установка Xcode, восстановление из резервной копии, ничего не изменилось! В настоящее время проект построен и запущен в симуляторе, но не в окне предварительного просмотра, он выдает сообщение: «Невозможно выполнить предварительный просмотр в этом файле — истекло время ожидания подключения к DTServiceHub через 15,0 секунд». iMac становится очень медленным. Пожалуйста, помогите!
Проблема с приложением Develop для iOS "Создание карточного представления"
Похоже, следуя инструкциям на веб-сайте Apple, я столкнулся с очень небольшой проблемой. Цвет фона не становится желтым. Я попытался скопировать и вставить весь код, который все еще оставался белым. Я скачал завершенный проект, и он работал, как задумано. Поэтому я сравниваю вещи, чтобы увидеть, что я пропустил, и код точно такой же. Завершенный проект и мой абсолютно одинаковые, но разные цвета фона. Есть ли параметр, который мне не хватает в xcode, который может вызвать эту проблему, поскольку я совершенно не понимаю, почему завершенный проект работает, а мой - нет. Фактически я взял код из готового проекта и заменил его на свои файлы. Фон все же белый, а не желтый. Так что проблема не в коде.
Заполнение приложения
Здравствуйте, Мое первое приложение, и я делаю заполнение и вертикальное выравнивание на странице, поэтому я прихожу к небольшой проблеме, в XCode все в порядке и выглядит идеально, но когда я запускаю тест на телефоне (Iphone 8), он показывает буквы все в левой стороне, что вы не можете прочитать. Но основное «имя», которое в данном случае «Заменить тормозные колодки», подходит. Как я могу это исправить? Спасибо!
Окно просмотра в реальном времени — показать/скрыть?
Здравствуйте! Я работал над некоторыми руководствами по SwiftUI (пока мне это очень нравится). Сегодня я редактировал исходный файл и решил немного расширить окно. Я перетащил слишком далеко вправо и скрыл предварительный просмотр. Я не могу найти какой-либо пункт меню, настройки и т. д., которые позволяют отображать/скрывать предварительный просмотр. Хочу вернуть, но не знаю как. Я попытался удалить некоторые настройки Xcode, но это не помогло. Я ценю любые советы. Это для Xcode 12.1.
Предварительный просмотр SwiftUI Не работает iOS 15 Xcode 13.0
Предварительный просмотр SwiftUI Не работает. Прогресс Подготовка Симулятора iPhone к предварительным просмотрам. SwiftUI Xcode версии 13.0 macOS Big Sur версии 11.6
Да, вы правильно прочитали. Опция Xcode Preview существует в Siri Shortcuts. Недавно мы получили совет от Appleosopher, который поделился снимками экрана с Xcode Previews на Siri Shortcuts с iOS и iPadOS.
Как мы выяснили, это новая функция, представленная в iOS 13.4 и iPadOS 13.4. Вы сможете увидеть и использовать эту опцию на своем устройстве под управлением iOS 13.4 и iPadOS 13.4, iOS 13.4.1 и iPadOS 13.4.1, бета-версии iOS 13.4.5 и бета-версии iPadOS 13.4.5.
Вы можете использовать Xcode Previews на своих устройствах с поддерживаемыми версиями iOS и iPadOS, чтобы повысить удобство разработки приложений для сообщества.
Создав новый ярлык:
<р>1. Разблокируйте iPhone и запустите приложение Siri Shortcuts.<р>2. Нажмите + Новый ярлык
<р>3. Нажмите «Добавить действие», а затем нажмите «Сценарий».
<р>4. После того, как вы нажмете «Сценарии», вам будут показаны новые параметры. Нажмите «Открыть приложение» в разделе «Приложения».
<р>5. Вас встретят ваши приложения, поддерживающие автоматизацию Siri Shortcuts. Вы можете выполнить поиск «Xcode Previews» в строке поиска или найти его в этом списке.
Создав новую автоматизацию:
<р>1. Разблокируйте iPhone и запустите приложение Siri Shortcuts.<р>2. Перейдите на вкладку «Автоматизация» и нажмите «Создать личную автоматизацию»
<р>3. Новые параметры автоматизации будут показаны после нажатия «Создать личную анимацию». Прокрутите вниз, пока не найдете «Открыть приложение», нажмите на него, а затем нажмите «Приложение — Выбрать».
<р>4. Вас встретят ваши приложения, поддерживающие автоматизацию Siri Shortcuts. Вы можете выполнить поиск «Xcode Previews» в строке поиска или найти его в этом списке.
Мы подтвердили, что эта функция не работает в более ранних версиях iOS до iOS 13.4 и iPadOS 13.4. Это новая функция, представленная в iOS 13.4 и iPadOS 13.4.
При открытии приложения после использования этой функции отображается короткая заставка, а затем происходит сбой или завершение процесса, и пользователь возвращается на главный экран.
Будьте в курсе последних новостей Apple на Appleosophy и следите за новостным каналом Telegram здесь. Присоединяйтесь к сообществу Appleosophy в Telegram здесь.
В зависимости от того, кого вы спросите, функция предварительного просмотра на основе SwiftUI, представленная в Xcode 11, либо предоставляет революционно новый способ создания пользовательского интерфейса, либо больше подходит к концу спектра полезности.
Однако, как и в случае с большинством инструментов разработки, полезность, которую могут предоставить предварительные версии Xcode, в значительной степени определяется тем, как они используются, и насколько наш код настроен таким образом, чтобы быть совместимым с ними. Итак, на этой неделе давайте рассмотрим несколько приемов, шаблонов и способов структурирования кода пользовательского интерфейса, которые помогут нам максимально эффективно использовать новую систему предварительного просмотра.
Основной разработчик . Если вы являетесь разработчиком iOS среднего или старшего звена и хотите улучшить свои навыки и уровень заработной платы, присоединяйтесь к ускоренному курсу iOS Architect Crash Course, который начнется 28 марта. Это на 100% бесплатно и проводится полностью онлайн. Нажмите, чтобы узнать больше.
Экраны, компоненты и интерактивность
Независимо от того, какая структура используется для создания данного пользовательского интерфейса, обычно бывает полезно разделить наши различные представления на две основные категории — экраны и компоненты. Хотя у каждой из них может быть любое количество подкатегорий, мы часто работаем либо с данным экраном приложения в целом, либо с его подмножеством (более или менее повторно используемым).
В качестве примера предположим, что мы используем SwiftUI для создания такого многократно используемого компонента — в данном случае строки для отображения напоминания в чем-то вроде списка задач или напоминаний:
Теперь, когда мы повторяем вышеприведенный компонент, мы, конечно, можем постоянно создавать и запускать приложение, переходить к экрану, на котором оно используется, и проверять, что все отображается правильно, но это скучно, повторяется и приводит к ошибкам. склонность (что, кстати, является моими тремя основными критериями для задач, которые в идеале должны быть автоматизированы).
Этот тип автоматизации — это именно то, что представляет собой функция предварительного просмотра Xcode, поскольку она позволяет нам настраивать определенные экземпляры наших экранов и компонентов, которые будут автоматически обновляться по мере того, как мы итерируем наш код.
Чтобы создать предварительный просмотр, все, что нам нужно сделать, это определить тип, соответствующий протоколу PreviewProvider, и поместить его в файл Swift, рядом с которым мы хотим, чтобы предварительный просмотр отображался, например:
Обратите внимание, как мы инкапсулируем приведенный выше предварительный просмотр с помощью директивы компилятора DEBUG. Это делается для того, чтобы предотвратить случайное использование этого типа в нашем производственном коде, поскольку, если бы мы это сделали, компилятор выдал бы ошибку, как только мы создадим наше приложение в режиме выпуска. Вы можете предположить, что весь код предварительного просмотра в этой статье будет окружен этой директивой компилятора, даже если он не будет напечатан для краткости.
Хорошо то, что система предварительного просмотра Xcode использует тот же DSL-подобный API, что и SwiftUI, что дает нам большую мощность и гибкость, когда дело доходит до того, как мы настраиваем наши различные предварительные просмотры в нашей кодовой базе.
Однако приведенная выше реализация ReminderRow в настоящее время довольно проста и полагается только на данные только для чтения, которые можно легко передать в ее инициализатор. Но что, если для этого требуется немного больше интерактивности? Например, предположим, что мы хотим добавить Toggle в нашу строку, чтобы наши пользователи могли легко отметить данное напоминание как выполненное:
Поскольку теперь мы используем оболочку свойства Binding для настройки двусторонней привязки между нашей строкой напоминания и любым родителем, который будет ее содержать, нам также необходимо передать такую привязку, когда создание нашего предварительного просмотра, а также. Одним из простых (но ограниченных) способов сделать это было бы использование .constant API, который, как следует из названия, позволяет нам передавать постоянное значение, которое будет действовать как резервный предварительный просмотр. для правильной привязки:
Однако, как упоминалось выше, привязки констант имеют довольно строгие ограничения, и они часто мешают нам взаимодействовать с нашим пользовательским интерфейсом во время его предварительного просмотра. Например, даже если мы нажмем на Toggle выше, его значение isCompleted всегда останется постоянным, из-за чего наше представление кажется неработающим.
Один из способов решить эту проблему – вместо этого ввести собственный API-интерфейс Binding для создания полностью динамических макетов, например путем захвата заданного значения в паре замыканий геттера и сеттера, например:
С учетом вышеизложенного мы можем вернуться к нашей реализации ReminderRowPreview и сделать ее полностью интерактивной, просто заменив .constant на .mock :
Прелесть того факта, что предварительные просмотры Xcode объявляются с использованием обычного кода Swift, заключается в том, что это позволяет нам писать собственные утилиты и абстракции, которые, в свою очередь, позволяют нам использовать предварительные просмотры гораздо более эффективными способами.Но это только начало.
Особые среды
Далее давайте посмотрим, как изменение окружающей окружающей среды компонента может позволить нам просмотреть, как он будет вести себя в различных смоделированных условиях.
Для начала давайте воспользуемся встроенным модификатором представления .colorScheme, чтобы просмотреть, как будет выглядеть наш ReminderRow при отображении на устройстве, работающем в темном режиме, например так:
Несмотря на то, что приведенная выше настройка предварительного просмотра отрисовывает наш компонент сам в темном режиме, его окружение по-прежнему остается в светлом режиме, который (учитывая, что у нашего представления нет цвета фона) дает нам белый цвет. текст на белом фоне. Не очень.
Совет: вы можете использовать кнопку ПРЕДПРОСМОТР выше, чтобы увидеть результат этого блока кода. Предварительный просмотр предварительного просмотра, если хотите. Очень мета.
Теперь есть два основных способа решить описанную выше проблему. Один из способов — встроить наш компонент ReminderRow в предоставленный платформой контейнер, например NavigationView, перед его предварительным просмотром. Если мы сделаем это, а также скроем панель навигации этого представления контейнера, то наш компонент по-прежнему будет отображаться с использованием того же макета, что и раньше, но теперь в полностью темном режиме:
Другим вариантом описанного выше подхода может быть использование TabView, а затем аналогичное скрытие его панели вкладок.
Другой способ, который не требует добавления какой-либо формы стека навигации, заключается в том, чтобы задать нашему компоненту явный цвет фона. Если мы используем API systemBackground для UIColor , то мы можем имитировать то, как будет выглядеть наш компонент. при отображении в темном режиме (даже если его окружение останется в светлом режиме):
Однако цветовая схема, с использованием которой будут отображаться наши превью, — это лишь один из множества различных параметров среды, которые мы можем настраивать. Например, мы также можем указать SwiftUI для предварительного просмотра нашего компонента, используя заданную категорию размера (в которую транслируются системные настройки динамического типа), и даже контролировать, на каком устройстве будет отображаться предварительный просмотр:
Нет, приведенное выше название ExtraExtraExtra не опечатка, на самом деле так называется настоящий API, хотите верьте, хотите нет.
Поэтому систему предварительного просмотра Xcode можно настраивать и настраивать разными способами, что позволяет либо настроить определенную среду для каждого компонента, либо даже создать несколько одновременных.
Групповые, повторные и удобные API
Как и стандартные представления SwiftUI, несколько представлений предварительного просмотра можно сгруппировать в один контейнер с помощью Group API. Однако в функции предварительного просмотра Xcode такие группы обрабатываются особым образом, поскольку система создает отдельный предварительный просмотр для каждого члена группы, что, в свою очередь, позволяет нам легко просматривать несколько конфигураций представления одновременно.
Например, вот как мы можем быстро просмотреть, как будет выглядеть наш ReminderRow при визуализации в светлом и темном режимах, используя один PreviewProvider:
Обратите внимание, как мы используем модификатор .previewLayout выше, чтобы указать Xcode отображать наши предварительные просмотры без какого-либо «хрома устройства», а вместо этого просто отображать конфигурацию каждого компонента как отдельное представление.
Хотя приведенный выше подход действительно удобен, когда мы просто хотим предварительно просмотреть небольшое количество перестановок, но если мы хотим объединить несколько модификаторов среды, чтобы просмотреть больше вариантов макета, то написание кода выше каждый раз может начать утомлять. стать немного утомительным.
Но опять же, здесь мы работаем с обычным кодом Swift, поэтому всякий раз, когда мы обнаруживаем повторяющийся источник шаблонов в нашем производственном коде, мы можем создавать свои собственные абстракции поверх системы предварительного просмотра, чтобы помочь нам создать большое количество предварительных просмотров с минимальными усилиями.
Но прежде чем мы начнем, нам понадобится несколько небольших расширений, которые помогут нам пометить каждый из предварительных просмотров, которые мы собираемся создать. В этом случае мы собираемся объединить каждую возможную ColorScheme (то есть в настоящее время светлый и темный режим) с наименьшим и наибольшим значениями ContentSizeCategory — поэтому давайте напишем следующую пару расширений для создания имен для предварительного просмотра для этих типов, вот так:
Далее давайте позаимствуем следующее расширение ForEach из «Использование ForEach SwiftUI с необработанными значениями», что позволит нам более легко перебирать массив значений в нашем коде SwiftUI:
Установив вышеперечисленные элементы, мы можем приступить к созданию собственных абстракций для создания нескольких предварительных просмотров. Во-первых, давайте создадим его для предварительного просмотра отдельных компонентов — реализуя View-оболочку, которая перебирает каждую возможную ColorScheme, а также массив ContentSizeCategory, который мы определили выше, и соответствующим образом настраивает каждый предварительный просмотр:
Обратите внимание, что ForEach имеет тот же эффект, что и Group в предварительных просмотрах, в том смысле, что его использование создает отдельный предварительный просмотр для каждого повторяющегося значения.
Хотя описанный выше тип готов к использованию как есть, давайте также создадим удобный API, который позволит нам легко создавать предварительный просмотр компонента для любого представления в нашей кодовой базе:
После этого мы можем вернуться к предыдущему ReminderRowPreview и легко заставить его генерировать четыре разных предварительного просмотра, просто вызвав наш новый API previewAsComponent для нашего компонента:
Далее давайте реализуем аналогичную абстракцию для предварительного просмотра целых экранов, а не отдельных компонентов. Хотя нас в первую очередь интересовало, как данный компонент ведет себя при рендеринге с использованием разных цветовых схем и категорий размера контента, при предварительном просмотре всего экрана мы могли бы вместо этого захотеть увидеть, как он рендерится на нескольких устройствах. Таким образом, мы сможем получить более полное представление о нашем пользовательском интерфейсе, особенно если мы также объединим этот список устройств со всеми возможными вариантами ColorScheme, например:
Обратите внимание, что приведенный выше список DeviceNames должен точно соответствовать именам, которые появляются в селекторе устройств Xcode, иначе система предварительного просмотра выдаст ошибку.
Благодаря приведенным выше абстракциям мы теперь можем легко создать компактный или полноэкранный предварительный просмотр для любого из наших представлений с помощью всего одного вызова метода, что, в свою очередь, позволяет нам повторять код нашего пользовательского интерфейса, мгновенно видя, как он работает. будет отображаться в нескольких типах сред. Реально круто!
Предварительные просмотры предназначены не только для представлений SwiftUI
Наконец, давайте посмотрим, как мы можем даже использовать функцию предварительного просмотра Xcode для итерации представлений, которые не созданы с использованием SwiftUI, а скорее с использованием любой из старых платформ пользовательского интерфейса Apple, таких как UIKit, Core Animation или AppKit.
Поскольку каждый предварительный просмотр определяется как представление SwiftUI и поскольку существуют встроенные API с обратной совместимостью, которые позволяют нам использовать любой UIView или UIViewController (или их эквиваленты AppKit) в мире SwiftUI, мы можем соединить эти две вещи. чтобы сделать систему предварительного просмотра еще более гибкой.
Один из способов добиться этого – создать определенные типы мостов для отдельных представлений или контроллеров представлений, например так:
Обратите внимание, что оба вышеуказанных типа помечены как предназначенные только для iOS 13 с помощью атрибута Swift @available. Хотя это не требуется для приложений с iOS 13 в качестве минимальной цели развертывания, многие приложения, написанные с использованием UIKit или AppKit, по-прежнему должны поддерживать более старые версии операционных систем Apple.
Хотя описанное выше прекрасно работает для предварительного просмотра одного контроллера представления, необходимость писать отдельный тип оболочки каждый раз, когда мы хотим создать новый предварительный просмотр, снова может стать источником шаблонов и трений. Итак, давайте создадим еще одну абстракцию — на этот раз, чтобы любой UIViewController можно было легко превратить в предварительный просмотр SwiftUI, например:
С учетом вышеизложенного мы теперь можем легко сделать любой из наших контроллеров представления совместимым с Xcode Previews. Все, что нам нужно сделать, это создать тонкий PreviewProvider, который вызывает наш новый метод asPreview на контроллере представления, который мы хотим просмотреть:
В целом, определение упрощенных абстракций с помощью небольших оболочек и расширений часто может быть отличным способом повысить общую производительность команды. Особенно, когда речь идет о таких вещах, как предварительный просмотр пользовательского интерфейса и другие виды инструментов, в идеале мы хотели бы свести количество трений и настроек, необходимых к абсолютному минимуму, чтобы мы могли тратить меньше времени на настройку наших инструментов и больше времени на создание фантастические интерфейсы.
Поддержите Swift by Sundell, посмотрев на этого спонсора:
Основной разработчик . Если вы являетесь разработчиком iOS среднего или старшего звена и хотите улучшить свои навыки и уровень заработной платы, присоединяйтесь к ускоренному курсу iOS Architect Crash Course, который начнется 28 марта. Это на 100% бесплатно и проводится полностью онлайн. Нажмите, чтобы узнать больше.
Заключение
Независимо от того, использовали ли вы предварительные просмотры Xcode после первой бета-версии Xcode 11 или они были для вас совершенно новыми, я надеюсь, что эта статья показала вам хотя бы один новый способ их использования. Конечно, есть несколько других способов использования этих предварительных просмотров, и я уверен, что Apple представит еще больше возможностей для предварительного просмотра на WWDC20, которая (на момент написания статьи) начнется всего через несколько недель.
Сокращение времени цикла итераций действительно может значительно повысить производительность, и Xcode Previews определенно может помочь нам в этом, превращая трудоемкие циклы «Сборка и запуск» в почти мгновенные обновления. Они не идеальны и могут (как и сам Xcode) иногда быть немного нестабильными, но — по крайней мере, если вы спросите меня — это большой шаг вперед для разработки пользовательского интерфейса на основе UIKit, AppKit и SwiftUI.
Что вы думаете? Вам нравится использовать функцию предварительного просмотра Xcode?Дайте мне знать — вместе с вашими вопросами, комментариями и отзывами — через Twitter или по электронной почте.
Читайте также: