Integrando SwiftUI em UIKit e implementando View com Coordinator

É a primeira vez que trabalho em um projeto que está usando SwiftUI para implementar novos fluxos, mas como os fluxos são majoritariamente UIKit, é preciso fazer uma pequena integração com na hora de exibir um fluxo em SwiftUI.

Para simular um fluxo …


This content originally appeared on DEV Community and was authored by Lys

É a primeira vez que trabalho em um projeto que está usando SwiftUI para implementar novos fluxos, mas como os fluxos são majoritariamente UIKit, é preciso fazer uma pequena integração com na hora de exibir um fluxo em SwiftUI.

Para simular um fluxo de navegação entre telas, vamos pensar que a tela com as opções é o nosso fluxo inicial feito em UIKit (programaticamente/view code) e a tela de imóveis agendados que será exibida, é a nossa view em SwiftUI.

Gif de gravação de tela mostrando ação do botão

Para um Coordinator inicial, pensaremos em algo como

import UIKit

protocol PropertyCoordinatorProtocol: AnyObject {
    func navigateToSchedule()
}

class PropertyCoordinator: PropertyCoordinatorProtocol {
    private var navigationController: UINavigationController
    private let viewModel: PropertyViewModel

    init(navigationController: UINavigationController) {
        self.navigationController = navigationController
        self.viewModel = PropertyViewModel()
        viewModel.coordinator = self
    }

    func start() {
        let viewController = PropertyViewController(viewModel: viewModel)
        navigationController.pushViewController(viewController, animated: false)
    }
}

Para exibir a view, criaremos um método navigateToSchedule que fará a apresentação a partir da nossa Navigation Controller.

func navigateToSchedule() {
    let scheduleViewController = ScheduleViewController()
    navigationController.present(scheduleViewController, animated: true)
}

Ao criar ScheduleViewController, a instancia de UIHostingController é o que permite incorporar uma view SwiftUI dentro de um layout UIKit.

private lazy var mainView: UIView = {
    let view = ScheduleView()
    let controller = UIHostingController(rootView: view)
    addChild(controller) 
    controller.view.translatesAutoresizingMaskIntoConstraints = false
    return controller.view
}()

O addChild(controller) adiciona o UIHostingController como filho do controlador atual, o que é necessário para gerenciar corretamente os ciclos de vida das views dentro de um view controller pai.

A view controller exibida será assim

import UIKit
import SwiftUI

final public class ScheduleViewController: UIViewController {
    private lazy var mainView: UIView = {
        let view = ScheduleView()
        let controller = UIHostingController(rootView: view)
        addChild(controller) 
        controller.view.translatesAutoresizingMaskIntoConstraints = false
        return controller.view
    }()

    public override func loadView() {
        self.view = UIView()
        view.backgroundColor = .clear
        setupHierarchy()
        setupConstraints()
    }

    func setupHierarchy() {
        view.addSubview(mainView)
    }

    func setupConstraints() {
        guard let superview = self.mainView.superview else { return }

        NSLayoutConstraint.activate([
            mainView.topAnchor.constraint(equalTo: superview.safeAreaLayoutGuide.topAnchor),
            mainView.bottomAnchor.constraint(equalTo: superview.safeAreaLayoutGuide.bottomAnchor),
            mainView.trailingAnchor.constraint(equalTo: superview.safeAreaLayoutGuide.trailingAnchor),
            mainView.leadingAnchor.constraint(equalTo: superview.safeAreaLayoutGuide.leadingAnchor)
        ])
    }

    public override func viewDidLoad() {
        super.viewDidLoad()
    }

    public override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        mainView.frame = view.bounds 
    }
}

E na View Controller principal, teremos um método que será chamado quando o botão for clicado

@objc func goToScheduleView() {
    viewModel.showScheduleView()
}

E a view model terá um método que chamará o Coordinator

func showScheduleView() {
    coordinator?.navigateToSchedule()
}

Código no github


This content originally appeared on DEV Community and was authored by Lys


Print Share Comment Cite Upload Translate Updates
APA

Lys | Sciencx (2024-08-16T01:53:33+00:00) Integrando SwiftUI em UIKit e implementando View com Coordinator. Retrieved from https://www.scien.cx/2024/08/16/integrando-swiftui-em-uikit-e-implementando-view-com-coordinator/

MLA
" » Integrando SwiftUI em UIKit e implementando View com Coordinator." Lys | Sciencx - Friday August 16, 2024, https://www.scien.cx/2024/08/16/integrando-swiftui-em-uikit-e-implementando-view-com-coordinator/
HARVARD
Lys | Sciencx Friday August 16, 2024 » Integrando SwiftUI em UIKit e implementando View com Coordinator., viewed ,<https://www.scien.cx/2024/08/16/integrando-swiftui-em-uikit-e-implementando-view-com-coordinator/>
VANCOUVER
Lys | Sciencx - » Integrando SwiftUI em UIKit e implementando View com Coordinator. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/16/integrando-swiftui-em-uikit-e-implementando-view-com-coordinator/
CHICAGO
" » Integrando SwiftUI em UIKit e implementando View com Coordinator." Lys | Sciencx - Accessed . https://www.scien.cx/2024/08/16/integrando-swiftui-em-uikit-e-implementando-view-com-coordinator/
IEEE
" » Integrando SwiftUI em UIKit e implementando View com Coordinator." Lys | Sciencx [Online]. Available: https://www.scien.cx/2024/08/16/integrando-swiftui-em-uikit-e-implementando-view-com-coordinator/. [Accessed: ]
rf:citation
» Integrando SwiftUI em UIKit e implementando View com Coordinator | Lys | Sciencx | https://www.scien.cx/2024/08/16/integrando-swiftui-em-uikit-e-implementando-view-com-coordinator/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.