[웹개발자의 IOS 탐방기] 3. NavigationView 컨테이너뷰를 사용하여 설정창 띄우기

서론

NavigationView는 SwiftUI에서 네비게이션 기능을 제공하는 컨테이너 뷰로서, 주로 계층적 구조의 콘텐츠를 표시하거나 상세 정보를 보여줄 때 사용된다. 예를 들어, 목록에서 항목을 선택하면 해당 항목의 상세 정보 페이지로 이동하는 경우에 NavigationView와 함께 사용한다. 때문에 SwiftUI에서 제공하는 네비게이션 스택을 활용하여 화면 전환을 간편하게 구현할 수 있어서 NavigationView를 활용하여 설정창으로의 화면이동을 구현해보자.

 

SettingView.swift 파일 생성

사용자 로그인/아웃 폼 부터 시작하여 푸쉬 알림 설정, 알림 내역 확인 등을 할 수 있는 Setting에 관련된 뷰 파일을 생성한다. 이 파일은 추후 목적에 맞게 디벨롭 해나갈 예정이다.

//
//  SettingView.swift
//  webApp
//
//  Created by mingyukim on 11/1/23.
//

import SwiftUI

struct SettingView: View {
    var body: some View {
        Text("설정 화면입니다.")
            .navigationBarTitle("설정", displayMode: .inline)
    }
}

ContentView.swift 파일 수정

NavigationView 컴포넌트뷰를 사용하는 방법은 간단하다. 화면 전환이 시작될 전체 영역을 NavigationView로 감싸준 후에, 이동이 이루어질 액션에 NavigationLink를 사용하면 화면 전환이 이뤄진다. 때문에 화면전환이 이뤄져야하는 WebView와 ToolbarView를 아우르는 ContentView의 VStack을 NavigationView로 감싸준다.

struct ContentView: View {
    
    @ObservedObject var webViewModel: WebViewModel = WebViewModel()
    
    var request: URLRequest = URL(string: Constants.DOMAIN_PATH).map { URLRequest(url: $0) }!
    
    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                WebView(request: request, webViewModel: webViewModel)
                
                ToolbarView(
                goBackAction: webViewModel.goBack, 
                goForwardAction: webViewModel.goForward, 
                goHomeAction: webViewModel.goHome
                )
                    .background(Color.gray.opacity(0.1))
            }
        }
    }
}

ToolbarView.swift 파일 수정

ToolbarView의 "설정" 버튼을 클릭하면 SettingView로 화면 전환을 수행하려고 하기 때문에 이 화면 전환을 관리하기 위해 @State 프로퍼티 래퍼인 showSettings를 사용한다. 버튼을 클릭하면 showSettings 값이 true로 변경되어, 이 변경 사항에 따라 NavigationLink가 활성화되며 SettingView로의 화면 전환이 수행된다.

struct ToolbarView: View {
    
    @State private var showSettings = false
    
    var goBackAction: () -> Void
    var goForwardAction: () -> Void
    var goHomeAction: () -> Void
    
    var body: some View {
        HStack {
            Button(action: {goBackAction()}) {
                Text("이전")
            }
            
            Spacer()
            
            Button(action: {goForwardAction()}) {
                Text("다음")
            }
            
            Spacer()
            
            Button(action: {goHomeAction()}) {
                Text("홈")
            }
            
            Spacer()
            
            NavigationLink(destination: SettingView(), isActive: $showSettings) {
                Button(action: {
                    showSettings = true
                }) {
                    Text("설정")
                }
            }
            
            
        }
        .padding()
    }
    
}

결과물