[SwiftUI] Composing Complex Interfaces

원문: 튜토리얼 페이지

Composing Complex Interfaces

이번 장에서는 여러 뷰들을 합친 하나의 화면을 만들어본다. 지금까지도 여러개의 뷰를 사용했지만 이번 장에서는 스크롤뷰를 합치는 것..! storyboard로 치면 tableView 안에 collectionView가 있는 느낌이랄까.

Add a Category View

앱을 실행했을 때 가장 먼저 볼 화면인 Home 화면을 제작한다.

1. Home 화면이 될 CategoryHome SwiftUI View 파일을 만든다.
2. body 내에 NavigationView를 추가하고 title은 “Featured”로 지정한다.

Create a Category List

사실 우리가 튜토리얼 처음에 받았던 landmarkData.json 파일 안에는 category 정보도 함께 있었는데, 아직 그건 사용을 안해서 Landmark 구조체에 추가하지 않았었다.

1. Landmark 코드 수정

이번 섹션에서 category를 추가해 파싱할 수 있도록 Landmark 코드를 수정한다.

var category: Category
    enum Category: String, CaseIterable, Codable {
        case lakes = "Lakes"
        case rivers = "Rivers"
        case mountains = "Mountains"
    }

category에는 lakes, revers, mountains 세 종류가 있고 json 파싱을 위해 역시나 Codable을 채택했다. 추후 화면에 카테고리 명을 보여주기 위해 String enum으로 만들었다.

1. categories 프로퍼티 생성 ModelData에서는 category 별로 landmark를 분류할 수 있도록 [String: [Landmark]] 딕셔너리를 생성한다.

Dictionary에서 grouping을 사용할 수 있는지 몰랐는데, 이것도 별도 포스팅으로 남겨둬야겠다.

1. CategoryHome에서 categories 접근해 노출하도록 수정 이제 아까 만들어둔 CategoryHome으로 돌아간다.

modeldata에 있는 category에 접근하기 위해 @EnvironmentObject var modelData: ModelData를 선언한다. preview에도 .environmentObject를 추가한다.

NavigationView 내부에 List를 추가해 category의 key값을 목록으로 노출시킨다.

Create a Category Row

우리가 CategoryHome에서 카테고리 이름만 노출시킨다면 이건 Complex 하다고 하기엔 조금 부족하다. 각 카테고리에 속한 랜드마크를 스크롤뷰로 노출시키도록 해보자.

요것이 우리가 만들어야 하는 Category Row.

Row에 나타나야하는 것을 생각해보면, 카테고리 명과 랜드마크의 이미지, 이름 정도가 있다. 랜드마크의 이미지와 이름은 VStack으로, 이 VStack과 카테고리 명을 다시 VStack으로 묶어야 할 것만 같다. 그리고 좌우로 스크롤이 가능하도록 랜드마크의 이미지와 이름이 묶인 VStack을 ScrollView로 묶어보자.

1. CategoryItem 만들기

랜드마크의 이미지와 이름을 묶어서 보여주는 CategoryItem을 만들어본다.

Item을 생성할 때 필요한 landmark를 프로퍼티로 선언하고 VStack 내부에 랜드마크의 이미지와 이름을 넣어주었다. 양 옆 간격을 위해 padding 값도 적용한다.

1. CategoryRow 만들기

ScrollView 내부에서 RowItem을 가로로 묶어서 보여주도록 HStack을 사용했다. 그리고 ScrollView와 카테고리 명을 VStack으로 묶어주었다.

Complete the Category View

이제 다시 CategoryHome으로 돌아가서 메인화면 작업을 마무리해보자.

현재는 List 내부에 카테고리 명만 노출되고 있지만 이 부분을 아까 만든 CategoryRow를 노출할 수 있도록 수정한다. 기존에 Text로만 출력되던 부분을 CategoryRow(categoryName: key, items: modelData.categories[key]!)로 변경하자. 아래와 같이 바뀐다.

가장 위에는 featured 랜드마크 이미지를 보여주고 싶다..! List 위에 이미지가 들어가야 하는데 놀랍게도 json 파일에 isFeatured 값이 있네..?

우선 Landmark 구조체에 값을 추가한다. 그리고 ModelData에서 우리가 화면 노출에 사용할 수 있도록 features: [Landmark] 배열을 만든다.

var features: [Landmark] {
     landmarks.filter { $0.isFeatured }
}

그리고 다시 CategoryHome으로 돌아가서 List의 가장 위에 featured의 첫번째 이미지가 나오도록 수정하면…!

요렇게 원하던 화면이 완성된다 😎

.listRowInsets(EdgeInsets())를 사용하면 List의 Row들이 꽉 차게 나온다. (edge inset 0)

Add Navigation Between Sections

Home 화면도 완성되었으니 이제 Home과 Detail 화면을 연결해 화면 이동을 해보자.

1. CategoryRow에 navigation link 추가 각 CategoryItem을 누르면 이동할 수 있도록 NavigationLink를 추가해준다.

2. tab 을 생성해 리스트 화면과 메인화면을 이동할 수 있도록 수정

@State private var selection: Tab = .featured

enum Tab {
     case featured
     case list
}

ContentView에 탭이동에 필요한 값인 Tab enum을 추가한다. 기본 값은 .featured로 설정한다.

현재 ContentView에는 List를 노출하도록 body에 설정되어 있으므로 TabView 를 추가해 탭을 이동할 수 있도록 수정하자.

TabView(selection: $selection) {
         CategoryHome()
             .tag(Tab.featured)

         LandmarkList()
             .tag(Tab.list)
}

여기까지만 하면 아래 탭뷰만 생성이 되고 이동은 안되는 화면이 된다. tabItem을 설정해 탭뷰에 아이콘이 노출될 수 있도록 한다.

As Is	Te Be

프리뷰를 실행시켜 작동해보자. 디테일뷰로, 탭이동도 잘되는지 모두 확인..!

마무리

SwiftUI가 처음 도입되고 나서는 생소해서 못 쓸 것 같았는데 이렇게 튜토리얼로 돌려보니까 생각보다 괜찮은 것 같다. 아직은 적응이 안됐기도 하고 지원하는 메서드 같은걸 자세히 모르기 때문에 쓰는데 오래 걸리지만 이것도 적응하면 충분히….? 오히려 코드로 짜서 더 좋은 것 같다. 뷰가 복잡해지면 파일 분리를 잘 해서 코드의 가독성을 잃지 않도록 하는 게 중요해지지 않을까?