Предварительный просмотр UIViewController с предварительным просмотром SwiftUI

SwiftUI меняет правила игры и уже принес нам столько пользы с момента своего выпуска.

Однако по-прежнему остаются вопросы о том, достаточно ли стабилен SwiftUI для использования в производственном коде? На это я отвечаю, да. Он более стабилен, чем когда-либо, когда он был выпущен много лет назад.

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

Сегодня вы узнаете об одном дополнительном преимуществе использования SwiftUI Preview независимо от вашего стиля кода.

Общая проблема

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

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

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

Решение с предварительным просмотром SwiftUI

Независимо от того, пишете ли вы свой пользовательский интерфейс программно или с помощью XIB/Storyboard, это принесет вам большую пользу и сэкономит вам много времени, потому что все, что вам действительно нужно, — это небольшие изменения пользовательского интерфейса, которые вы сделали. Вы можете сделать это либо на UIView, либо на UIViewController, так как все в значительной степени обернуто под них, вы можете использовать его практически для всего.

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

UIViewController с предварительным просмотром SwiftUI

Давайте создадим код, который активирует SwiftUI Preview для UIViewController. Для этого создайте новый файл со следующим кодом.

import SwiftUI
@available(iOS 13, *)
// 1
public struct ViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable {
    let viewController: ViewController
    // 2
    public init(_ builder: @escaping () -> ViewController) {
        viewController = builder()
    }
    
    // 3
    public func makeUIViewController(context: Context) -> ViewController {
        viewController
    }
   
    // 4
    public func updateUIViewController(_ uiViewController: ViewController, context: Context) {}
}
  1. Apple создала протокол UIViewControllerRepresentable для управления UIKit ViewController в интерфейсе SwiftUI.
  2. Инициализируйте файл ViewController.
  3. Создайте объект ViewController с его начальным состоянием.
  4. Обновите ViewController информацией из SwiftUI. Это обязательно и намеренно оставлено пустым, поскольку мы сосредоточены только на создании.

Предварительный просмотр с предварительным просмотром SwiftUI

Теперь, когда вы установили приведенный выше код, вы можете использовать его на своем UIViewController.

Этот код может быть внизу файла ViewController.

Просто замените ViewController() именем файла, который вы хотите просмотреть.

import SwiftUI
struct ViewControllerExamplePreview: PreviewProvider {
    static var previews: some View {
        ViewControllerPreview {
            ViewController()   
        }
    }
}

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

Предварительный просмотр нескольких устройств

Другой вариант использования, который вы, вероятно, могли бы использовать, — это увидеть изменения как на телефоне без выреза, так и на телефоне с вырезом. Например, iPhone 8, iPhone SE, iPhone 8 Plus не имеют безопасной зоны, а iPhone X, iPhone 11, iPhone 12 имеют безопасную зону. Пользовательский интерфейс может иногда выглядеть немного иначе, если ограничения установлены неправильно.

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

В зависимости от типа iPhone, который вам нужен, вы можете просто написать его название (iPhone X) или тип модели (iPad8,1).

import SwiftUI
struct ViewControllerExamplePreview: PreviewProvider {
    static var previews: some View {
        ViewControllerPreview {
            ViewController()
        }
        .previewDevice("iPhone 13")
        
        ViewControllerPreview {
            ViewController()
        }
        .previewDevice("iPhone 8")
    }
}

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