[ Swift UI 강좌 ] 2. 스위프트 iOS - 네비게이션 이동하기

이번에는 스위프트 UI를 통해서 네비게이션 컨트롤러?는 아니고 네비게이션 뷰를 만들어보겠습니다. 저도 좀 생소하긴 한데요. 스위프트 UI는 별도로 컨트롤러가 없는 것 같습니다. 물론 더 공부해봐야 알겠지만 네비게이션 컨트롤러도 뷰로 표현하는 것 같군요. 일단 네비게이션은 iOS에서 매우 중요하기 때문에 네비게이션 뷰를 통해서 간단하게 화면 전환하는 방법을 알아보겠습니다.

 

저번 강좌에서 간단한 버튼 이벤트를 만들어봤습니다. 필요하시면 참고하시길 바랍니다.

tttap.tistory.com/106

[ Swift UI 강좌 ] 1. 스위프트 iOS - 버튼 이벤트 만들기

 

1. 프로젝트를 생성합니다. Navigation 이라고 만들어볼게요. 인터페이스는 SwiftUI 라이프 사이클은 SwiftUI App 언어는 Swift 로 설정합니다.

1. 프로젝트 설정

---

 

2. ContentView 파일을 열고 기존에 있던 Hello, world 텍스트를 제거합니다.

2. Hello, world! 텍스트 제거

---

 

3. body에 NavigationView를 추가해줍니다. .navigationTitle을 통해서 네비게이션의 타이틀을 결정할 수 있습니다.

NavigationView {
    Text("Hello")
            .navigationTitle("첫번째 페이지")
}

3. NavigationView 추가

---

 

4. NavigationLink를 만들고 저번에 배운 VStack을 이용해서 Text 와 NavigationLink를 Vertical 스택으로 묶어줍니다.

NavigationView {
    VStack {
        Text("Hello")
            .navigationTitle("첫번째 페이지")
        
        NavigationLink(
            destination: NextView(),
            label: {
                Text("Navigate")
            })
    }
}

4. NavigationLink 추가

---

 

5. 이제 잘 이동하는 지 볼께요 오른쪽 프리뷰에서 Navigate 라는 버튼을 누르면 다음 페이지로 이동하는 것을 볼 수 있습니다.

5. 화면 이동 테스트

---

 

6. 지금은 네비게이션으로 이동하는 페이지가 그냥 Text로 되어 있습니다. 이 destination 속성을 실제 뷰 객체로 바꿔보겠습니다. 다음 코드를 입력해서 새로운 뷰를 생성합니다.

struct NextView: View {
    var body: some View {
        Text("두번째 화면")
    }
}

6. NextView 생성

---

 

7. 이제 destination 속성에 NextView() 객체를 생성해서 이동할 목적지를 변경해줍니다.

7. destination 연결

---

 

8. 마지막으로 두번째 화면인 NextView에도 NavigationLink를 추가해서 FinalView로 이동하는 코드를 추가합니다.

8. FinalView 생성

---

9. 전체 코드입니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
NavigationView {
    VStack {
        Text("Hello")
            .navigationTitle("첫번째 페이지")
        
        NavigationLink(
            destination: NextView(),
            label: {
                Text("Navigate")
            })
    }
}
    }
}

struct NextView: View {
    var body: some View {
        VStack {
            Text("두번째 화면")
            
            NavigationLink(
                destination: FinalView(),
                label: {
                    Text("Navigate")
                })
        }
    }
}

struct FinalView: View {
    var body: some View {
        Text("마지막 화면")
    }
}

struct ContentView_Previews: PrviewProvider {
    static var previews: some View {
        ContentView()
    }
}