Swift UI @ObservedObject 프로토콜을 이용한 View 이동

안녕하세요. 
날씨가 많이 더워졌습니다. 
오늘은 @ObservedObject 프로토콜을 이용해서 View 간 이동하는 것을 구현해보았습니다. 

SwiftUI @ObservedObject 를 이용한 화면 이동

 

우선 저처럼 초보인 개발자분이라면 제일 궁금한게 SwiftUI로 여러개의 화면을 만들었는데 이걸 어떻게 이동하는지에 대해서겠죠?
저도 예제를 열심히 따라가면서 궁금하던게 이런 부분이어서 이렇게 소스를 올려봅니다. 
생각보다 간단합니다.

먼저 ObservableObject 프로토콜을 상속받아서 사용할 Router class를 생성합니다.

//
//  ViewRouter.swift
//  PageView
//
//  Created by 이정훈 on 2020/05/05.
//  Copyright © 2020 이정훈. All rights reserved.
//  ObservableObject protocol

import Foundation
import Combine
import SwiftUI



class ViewRouter : ObservableObject{
    
    let objectWillChange = PassthroughSubject<ViewRouter,Never>()
    
    var currentPage: String = "page1" {
        didSet{
            objectWillChange.send(self)
        }
    }
}

저는  ViewRouter class 로 이름을 명명했습니다. 
page간 이동을 모니터랑 할 변수를 선언했습니다. 

그리고 저는 매번 쓰는 ContentView Swift를 이번에는 사용하지 않는 방법으로 구현했습니다. 

MainView라는 이름으로 하나 생성을 했습니다.

import SwiftUI

struct MainView: View {
    
    //@State var page = "page1"
   @ObservedObject var viewRouter: ViewRouter
    
    var body: some View {
         VStack {
             
            if viewRouter.currentPage == "page1" {
                SubPage1(viewRouter: viewRouter)
            }
            else if viewRouter.currentPage == "page2"{
                SubPage2(viewRouter: viewRouter)
            }
        }
    }
}

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
       MainView(viewRouter: ViewRouter())
    }
}

viewRouter를 상단에 선언을 하구요. Previews쪽에도 이렇게 변경을 해주었습니다. 
그리고 SwiftUI View 2개를 위와 같이 SubPage1, SubPage2이렇게 생성을 해주었답니다.
여기서 기존 ContentView를 사용안하고 MainView를 사용할려면 SceneDelegate.swift를 변경해주셔야합니다.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).

        // Create the SwiftUI view that provides the window contents.
        //let contentView = ContentView()
        
        //메인 뷰 선언
        //let mainView = MainView()
        
        // Use a UIHostingController as window root view controller.
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: MainView(viewRouter: ViewRouter()))
            self.window = window
            window.makeKeyAndVisible()
        }
    }

rootView 부분을 위와 같이 수정을 해주셔야 MainView를 사용하실수 있습니다.

이제 마지막으로 SubPage1, SubPage2의 소스만 보시면 됩니다.
SubPage1의 소스만으로 아마 SubPage2는 예측이 되시리라 생각이 들어 SubPage1만 올려드립니다.

//
//  SubPage1.swift
//  PageView
//
//  Created by 이정훈 on 2020/05/05.
//  Copyright © 2020 이정훈. All rights reserved.
//

import SwiftUI

struct SubPage1: View {
    @ObservedObject var viewRouter: ViewRouter
    
    var body: some View {
        VStack {
            Image(systemName: "house")
                .resizable()
                .frame(width:60, height:60)
            
            Button(action: {self.viewRouter.currentPage = "page2"}   ) {
                Text("2페이지 이동")
                
            }
            .frame(width: 150.0, height: 50.0)
            .foregroundColor(.white)
            .background(Color.blue)
            .cornerRadius(15)
            .padding(.top,50)
        }
    .padding()
    }
}

struct SubPage1_Previews: PreviewProvider {
    static var previews: some View {
        SubPage1(viewRouter: ViewRouter())
    }
}

위와 같이 적용하시고 버튼을  클릭하시면 viewRouter의  currentPage 의 값이 변경되면서 View간 이동을 하실 수 있습니다.
꼭 node 의 Router를 사용하는 것 같습니다. 

그럼 저는 오늘도 다른 예제를 붙들러 갑니다.
즐거운 코딩생활 되세요. ^^