Построение SwiftUI PreviewProvider для представлений UIKit


Построение SwiftUI PreviewProvider для UIKit Views

Простой способ мгновенно увидеть изменения в вашем UIKit ViewController — в реальном времени и по требованию

Вы когда-нибудь пробовали SwiftUI? Не находите ли вы, что он настолько восхитителен и прост в работе?

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

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

По сути, мы хотим создать систему живого предварительного просмотра для наших представлений UIKit с помощью SwiftUI.


Есть много способов облегчить этот процесс, например, простые аннотации, такие как @IBDesignable, @IBInspectable и т. д.

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

Поэтому в этой статье вы узнаете новый и более простой способ мгновенного просмотра изменений. Если вы использовали SwiftUI, вы уже знаете его, но мы добавили к нему небольшой трюк, чтобы он работал с UIKit.

SwiftUI: PreviewProvider

PreviewProvider — это тип протокола, который создает предварительные просмотры в Xcode. Он содержит ассоциированный тип Previews, который имеет тип View. View — это представление SwiftUI, которое мы вернем для отображения PreviewProvider — мы увидим это позже.

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

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

⌘ + ⌥ + Return (Command + option + Return).

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

UIKit: PreviewProvider

Итак, теперь, когда мы знаем о PreviewProvider и о том, как он работает в SwiftUI, как мы можем добиться этого в UIKit?

Ответ прост: Мы должны преобразовать нашу кодовую базу UIKit во что-то, что понимает SwiftUI, и использовать SwiftUI PreviewProvider для просмотра живой симуляции контента. Есть предположения, как это сделать?

Как преобразовать содержимое UIKit в содержимое SwiftUI?

Это намного проще, чем вы думаете. Не стоит усложнять. Все, что нам нужно, это популярный протокол UIViewControllerRepresentable.

UIViewControllerRepresentable действует как мост, помогающий преобразовать UIViewController в представление SwiftUI. Вы уже догадались, что мы планируем сделать?

Реализация

Теперь, когда мы знаем о UIViewControllerRepresentable и PreviewProvider в SwiftUI, давайте запачкаем руки и применим их на практике.

Контроллер UIKit

Давайте создадим простой контроллер UIKit (UIViewController), который содержит некоторые модификации пользовательского интерфейса:

class ViewController: UIViewController {

    @IBOutlet var imageView: UIImageView!
    @IBOutlet var titleLabel: UILabel!
    @IBOutlet var confirmBtn: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        setupView()
    }

    private func setupView() {
        imageView.layer.cornerRadius = imageView.frame.height / 2
        imageView.clipsToBounds = true
        imageView.layer.borderWidth = 1
        imageView.layer.borderColor = UIColor.red.cgColor

        titleLabel.text = "This is a test ViewController to see if we can use swiftUI previews for UIKit Controllers"

        confirmBtn.setTitle("Confirm", for: .normal)
        confirmBtn.backgroundColor = .cyan
        confirmBtn.clipsToBounds = true
        confirmBtn.layer.borderWidth = 1
        confirmBtn.layer.borderColor = UIColor.blue.cgColor
        confirmBtn.layer.cornerRadius =  20
    }
 }
Вход в полноэкранный режим Выход из полноэкранного режима

Если мы запустим этот ViewController, вы увидите что-то вроде этого:

Теперь давайте создадим SwiftUI Preview. Любые изменения, которые мы сделаем в UIKit UI, могут быть просто отображены в реальном времени, и нам не придется собирать и компилировать, как раньше.

Преобразование UIViewController в SwiftUI Controller

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

import Foundation

#if canImport(SwiftUI) && DEBUG
import SwiftUI

struct ViewControllerRepresentable: UIViewControllerRepresentable {

    func makeUIViewController(context: Context) -> some UIViewController {
        return UIStoryboard(name: "Main", bundle: nil).instantiateInitialViewController()!
    }

    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {

    }
}
#endif
Вход в полноэкранный режим Выход из полноэкранного режима

В приведенном выше коде:

  • canImport(SwiftUI) используется для обеспечения компиляции только для тех версий iOS, которые поддерживают SwiftUI.

  • DEBUG гарантирует, что он будет запущен только в нашей отладочной среде.
    Внутри функции MakeUIViewController(context: Context) нужно просто инстанцировать контроллер, который вы хотите видеть в предварительных просмотрах.
    Здесь я просто инстанцировал свой Main Storyboard.

Предварительный просмотр нашего UIViewController с помощью PreviewProvider

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

Добавьте следующие строки кода перед #endif:

struct ViewController_Preview: PreviewProvider {
    static var previews: some View {
         ViewControllerRepresentable()    
    }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

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

import Foundation

#if canImport(SwiftUI) && DEBUG
import SwiftUI

struct ViewControllerRepresentable: UIViewControllerRepresentable {

    func makeUIViewController(context: Context) -> some UIViewController {
        return UIStoryboard(name: "Main", bundle: nil).instantiateInitialViewController()!
    }

    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {

    }
}

struct ViewController_Preview: PreviewProvider {
    static var previews: some View {
        ViewControllerRepresentable()
    }
}
#endif
Вход в полноэкранный режим Выход из полноэкранного режима

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

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

EmadBeyrami / UIKitPreviews

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

Простой способ увидеть изменения вашего UIKit ViewController в реальном времени и по требованию.

Это практический проект для моей статьиПровайдер предварительного просмотра SwiftUI для UIKit полезен. читайте. 🙂

Введение

Вы когда-нибудь пробовали SwiftUIНе находили ли вы его таким восхитительным и простым в работеВиды UIKit, если вы работаете над дизайном, который в основном работает с вашей кодовой базой, и вы должны проверять его время от времени, чтобы убедиться, что ваш код делает дизайн UI, который вы пытаетесь сделать; Поэтому время от времени вы компилируете и собираете свой код в симуляторе, чтобы проверить результат, но в SwiftUI вы можете увидеть изменения, которые вы сделали по требованию, без необходимости ждать, пока ваш проект соберется и скомпилируетсяЧто если мы можем использовать это или что-то подобное…

Посмотреть на GitHub

Купите мне кофе ☕️:

Пожертвовать

paypal.com

nowpayments.io

Ссылки:

Мой Medium:

betterprogramming.pub

Оцените статью
devanswers.ru
Добавить комментарий