[iOS - SwiftUI] 튜토리얼 - 6. 네비게이션 (NavigationView, navigationTitle, NavigationLink, .navigationBarTitleDisplayMode)

구현된 네비게이션

네비게이션 사용 방법

• NavigationView를 단순히 추가

struct LandmarkList: View {
  var body: some View {
    NavigationView {  // <-
      List(landmarks, id: \.id) { landmark in
        LandmarkRow(landmark: landmark)
      }
    }
  }
}

• 추가된 NavigationView의 영역 확인

• List위에 Navigation의 Title 추가
  • 리스트에 navigationTitle()로 추가

struct LandmarkList: View {
  var body: some View {
    NavigationView {
      List(landmarks, id: \.id) { landmark in
        LandmarkRow(landmark: landmark)
      }
      .navigationTitle("Landmarks") // <-
    }
  }
}

(navigationTitle을 사용하면 아래처럼 자연스럽게 스크롤하면 타이틀이 위로 이동)

• 셀을 선택하면 그와 연관된 페이지가 뜨도록 Navigation 설정
  • NavigationLink 사용
  • 클로저 2개를 삽입
  • 첫번째 클로저에는 해당 셀을 탭했을때 이동할 화면
  • 두번째 클로저에는 (label:) Rows 그대로 입력

struct LandmarkList: View {
  var body: some View {
    NavigationView {
      List(landmarks, id: \.id) { landmark in
        NavigationLink { // <-
          LandmarkDetail(landmark: landmark)
        } label: {
          LandmarkRow(landmark: landmark)
        }
      }
      .navigationTitle("Landmarks")
    }
  }
}

• 등장하는 화면에 NavigationTitle을 적용하고 싶은 경우, 등장할 페이지에 navigationTitle을 사용

struct LandmarkDetail: View {
  var landmark: Landmark
  
  var body: some View {
    ScrollView {
      MapView(coordinate: landmark.locationCoordinate)
        .ignoresSafeArea(edges: .top)
        .frame(height: 300)
      
      ...
    }
    .navigationTitle(landmark.name) // <-
  }
}

• 네비게이션 타이틀을 위쪽 중앙으로 배치하고 싶은 경우, navigationBarTitleDisplayMode(.inline) 사용

struct LandmarkDetail: View {
  var landmark: Landmark
  
  var body: some View {
    ScrollView {
      MapView(coordinate: landmark.locationCoordinate)
        .ignoresSafeArea(edges: .top)
        .frame(height: 300)
      
      ...
    }
    .navigationTitle(landmark.name)
    .navigationBarTitleDisplayMode(.inline) // <-
  }
}

• 실행하기위해서 다시 빌드하지 않아도, preview에서 바로 확인이 가능
  • preview에서 재생버튼 클릭하고 그대로 사용 가능

Preview - 디바이스 설정 방법

• 일반적인 preview

struct LandmarkList_Previews: PreviewProvider {
  static var previews: some View {
    LandmarkList()
  }
}

• previewDevice를 사용하면 디바이스 설정이 가능

struct LandmarkList_Previews: PreviewProvider {
  static var previews: some View {
    LandmarkList()
      .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)")) // <-
  }
}

• ForEach를 사용하여 여러개의 디바이스를 동시에 확인 가능

struct LandmarkList_Previews: PreviewProvider {
  static var previews: some View {
  	// ForEach([], id:) 사용
    ForEach(["iPhone SE (2nd generation)", "iPhone XS Max"], id: \.self) { deviceName in
      LandmarkList()
        .previewDevice(PreviewDevice(rawValue: deviceName))
    }
  }
}

* 참고

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation