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

Xcode [Apple]

Xcode 15 позволяет вам предварительно просматривать пользовательский интерфейс вашего iOS-приложения по мере его создания. Вот как его использовать, чтобы увидеть, как ваше приложение выглядит для пользователей.

В Xcode 15 представлены предварительные просмотры пользовательского интерфейса, которые позволяют вам видеть, как будет выглядеть ваш пользовательский интерфейс при его создании в SwiftUI.

В частности, в Xcode добавлен макрос #Preview, который позволяет вам определить, как будут отображаться предварительные просмотры для любого представления или представления, которое вы добавляете в свое приложение SwiftUI.

В Swift и в языках на основе C макрос — это директива компилятора, которая сообщает компилятору о том, что произойдет что-то особенное, и обрабатывает код, определенный в макросе, как особый случай во время компиляции.

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

SwiftUI позволяет определять ваше приложение с помощью текста и текстовых определений представлений, в отличие от более старых визуальных представлений AppKit Interface Builder. Используя SwiftUI и предварительный просмотр, вы можете ввести свой код в панель редактора Xcode слева и просмотреть его предварительный просмотр в симуляторе Xcode справа.

Когда вы вводите и меняете код SwiftUI, предварительный просмотр пользовательского интерфейса меняется в реальном времени, показывая вам ваше мнение.

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

Обычно в SwiftUI вы можете определить ContentView представления, используя структуру Swift. Например:

структура ContentView: Просмотр {

Ниже по умолчанию вы можете определить макрос #Preview как просто возвращающий ContentView, который Xcode будет использовать для отображения представления на панели предварительного просмотра:

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

Когда вы компилируете код, компилятор Swift фактически расширяет макрос #Preview до оператора Swift «Preview(_:body:)», который принимает необязательное имя и ViewBuilder в качестве параметров.

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

Если вы хотите определить несколько макросов #Preview в одном исходном файле, вы можете передать имя в виде строки Swift, чтобы различать каждый из них:

ContentView (someInput: true)

В документации SwiftUI также есть страница, на которой объясняется макрос #Preview, а также рассказывается о том, как использовать ViewBuilder вместе с ним.

Как правило, вам следует определить один макрос #Preview для каждого пользовательского представления, которое вы определяете в исходном файле SwiftUI.

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

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

После того, как в вашем коде определены макросы #Preview для каждого из ваших представлений, вы можете отобразить холст предварительного просмотра Xcode, выбрав Editor->Canvas в главной строке меню Xcode.

Покажите холст в меню «Редактор».

В общем, в Swift представление в приложении определяется классом Swift View, который является синонимом UIView в Objective-C или NSView для приложений macOS в Objective-C.

Каждый Swift View может содержать одно или несколько подпредставлений в своем ContentView. ContentView — это представление, которое отображается на экране при запуске вашего приложения.

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

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

Чтобы предоставить собственное представление в Swift, вы объявляете тип, соответствующий протоколу представления, и реализуете необходимое вычисляемое свойство тела для предоставления содержимого вашего представления.

В этом примере мы определяем пользовательскую структуру с именем MyView, которая наследуется от класса Apple View и соответствует протоколу View, определяя тело вычисляемого свойства (также как представление), которое имеет одно подпредставление Text с текстом «Hello, World». !» в этом.

При запуске этой структуры отображается одно текстовое представление с текстом «Hello, World!» В пользовательском интерфейсе.

Apple предоставляет различные предопределенные представления (например, текст), которые вы можете использовать в теле представления для создания пользовательского интерфейса.

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

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

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

Полное обсуждение того, как представления работают в Xcode, см. в разделе документации Apple SwiftUI. Основы представления.

Документация и ресурсы

У Apple есть 27-минутное видео с WWDC ’23 под названием «Создание программного пользовательского интерфейса с помощью предварительного просмотра Xcode», в котором кратко описано, как использовать предварительные просмотры Xcode, чтобы видеть ваш пользовательский интерфейс по мере его создания.

В документации Xcode у Apple есть полное руководство о том, как предварительно просмотреть свой пользовательский интерфейс при его разработке в Xcode, под названием «Предварительный просмотр интерфейса вашего приложения в Xcode».

Также см. нашу предыдущую статью «Как использовать предварительный просмотр Xcode, чтобы увидеть, как ваше приложение выглядит по мере его создания».