SwiftUI) SwiftUI Essentials - 2 Building Lists and Navigation

SwiftUI 튜토리얼 Swift UI Essentials 챕터의 2번째 내용입니다.

---

Building Lists and Navigation

- 기본 랜드마크 상세 뷰를 만들었으니 전체 목록과 그 각각의 항목에 대한 상세 위치를 나타낼 수 있도록 만들어줄게요 !
- 모든 랜드 마크에 대한 정보를 표시할 수 있는 뷰를 작성하고 사용자가 탭 하여 랜드 마크에 대한 세부 사항 뷰를 볼 수 있는 스크롤 목록을 동적으로 생성합니다 !

- UIKit에서 TableView나 CollectionView를 만드는 과정이랑 유사한 것 같아요 ! 

 

1. 랜드마크 모델 만들기 !

- 이전 튜토리얼에서는 모든 커스텀 뷰의 정보를 하드 코딩해보았습니다.

- 이번 튜토리얼에서는 데이터를 커스텀뷰로 전달하여 표시하는 방법을 배울 것입니다.
- 위에 첨부되어있는 스타터 프로젝트를 다운로드 받으시고 샘플 데이터를 한번 둘러보세요.

 

landmarkData.json

0.00MB

우선 모델을 만들어 볼게요 !

1. 위의 JSON 파일을 다운받아서 넣어줍니다.

2. Landmarks.Swift 파일을 만들어서 JSON의 키 이름과 일치하는 몇 개의 프로퍼티를 정의해주세요 !

{
        "name": "Turtle Rock",
        "category": "Featured",
        "city": "Twentynine Palms",
        "state": "California",
        "id": 1001,
        "park": "Joshua Tree National Park",
        "coordinates": {
            "longitude": -116.166868,
            "latitude": 34.011286
        },
        "imageName": "turtlerock"
    }

요게 json 데이터 이구요.

struct Landmark: Hashable, Codable {
    var id: Int
    var name: String
    var park: String
    var state: String
    var description: String
}

 

랜드마크 모델은 id, name, park, state, description으로 구성했습니다.

파일에서 Data를 읽기위해선 Decodable 프로토콜의 구성요소를 사용해야하기 때문에,

Codable 프로토콜을 conform 해줬습니다.

 

Resources.zip

2.51MB

- 그리고 위의 Resource 파일에서 랜드마크 이미지들을 전부 넣어줬습니다.

- 그다음에 Landmark 모델에 이미지 로드하는 연산 프로퍼티를 추가해줍니다.

 

- 사용자는 오직 이미지에만 관심이 있으므로, imageName은 private로 설정해줍니다. ( 이런 것까지 설명해주네요 '.')

- 그 다음은 위치 정보 추가 ! 내부에 Coordinates라는 struct를 하나 더 만들어주고 latitude, longtitude 프로퍼티를 정의합니다.

- 이는 JSON 데이터 구조와 일치하도록 중첩된 Coordinates 타입을 사용해줬습니다. 

- 그 다음에는 Mapkit 프레임워크와 상호작용하는데 유용한 locationCoordinate 라는 프로퍼티를 추가해줍니다. ( import CoreLocation 을 해줘야합니다. )

var locationCoordinate: CLLocationCoordinate2D {
        CLLocationCoordinate2D(
            latitude: coordinates.latitude,
            longitude: coordinates.longitude)
    }

- Mapkit 에서 위치정보를 주고받는데 사용하는 struct인 것 같습니당 !

---

[ ModelData.Swift 파일 만들기 ]

 

- 다음으로, ModelData.Swift 파일을 만들어주고, load(_: ) 메서드를 생성해줬습니다.

- 이 메서드는 main 번들에서 JSON 파일을 가져옵니다 !

- load 메서드는 반환 타입이 Decodable 프로토콜을 conform하는 것에 의존한다고 합니다. 

- 아래 코드를 보면, Array 타입으로 랜드마크 목록을 가져오고 있습니다. 

var landmarks: [Landmark] = load("landmarkData.json")

func load<T: Decodable>(_ filename: String) -> T {
    let data: Data

    guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
    else {
        fatalError("Couldn't find \(filename) in main bundle.")
    }

    do {
        data = try Data(contentsOf: file)
    } catch {
        fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
    }

    do {
        let decoder = JSONDecoder()
        return try decoder.decode(T.self, from: data)
    } catch {
        fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
    }
}

- 마지막으로 폴더링까지 완료 ~

 

 

2. 행을 나타내는 뷰 생성

- 첫 번째 뷰는 각각의 랜드마크에 대한 상세정보를 보여주기 위한 행(row)입니다.

- 이 행을 나타내는 뷰는 랜드마크의 프로퍼티 정보를 저장합니다. 

- 나중에 여러 행을 결합하여 랜드마크 목록을 만들어보겠습니다.

 

1) LandmarkRow라는 이름으로 SwiftUI 뷰 파일을 만들어줍니다.

2) landmark라는 저장 프로퍼티를 추가해줍니다.

-> LandmarkRow를 초기화 중에 landmark가 필요하므로 landmark 프로퍼티를 추가할 때 미리보기가 멈춥니다.

- preview를 수정하기 위해 preview provider를 수정해야 합니다.

- LandmarkRow_Previews의 static 프로퍼티에서 landmarkData 배열의 첫 번째 요소를 지정하여 Landmark 매개 변수를 LandmarkRow 초기화 프로그램에 추가하십시오.

 

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow(landmark: landmarks[0])
    }
}

 

- 다음으로는 바디에 HStack Embed 해주고, 텍스트는 landmark.name,  위에는 이미지를 추가해줍니다.

- 사이즈는 50 * 50 으로 해줍니다.

    var body: some View {
        HStack {
            landmark.image
                .resizable()
                .frame(width: 50, height: 50)
            Text(landmark.name)

            Spacer()
        }
    }

 

3. 행 프리뷰 커스터마이징하기

- Xcode의 캔버스는 현재 편집기에서 PreviewProvide프로토콜을 채택하는 타입에 대해서 자동으로 인식하고 표시합니다.

- 미리 보기 제공자(preview provide)는 크기와 장치를 구성하는 옵션과 함께 하나 이상의 뷰를 반환합니다.
- 미리보기 제공자(preview provide)에서 반환된 콘텐츠를 사용자 정의하여 가장 유용한 미리보기를 렌더링 할 수 있습니다.

 

 

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LandmarkRow(landmark: landmarks[0])
            LandmarkRow(landmark: landmarks[1])
        }
        .previewLayout(.fixed(width: 300, height: 70))
    }
}

- previewLayout(_:) 수정자(modifier)를 사용해서 목록 안의 행의 근접한 크기로 설정 가능

- 그룹은 뷰 콘텐츠를 그룹화하기 위한 컨테이너입니다.

- Xcode는 그룹의 하위 뷰들을 캔버스에서 가가 분리된 형태의 미리보기로 렌더링 합니다.

- 코드를 좀 더 간단하게 만들기 위해 previewLayout(_:)의 호출하는 위치를 그룹 외부로 옮깁니다.

- 그러면 이런식으로 프리뷰 커스터마이징이 됩니당.

 

 

4. 랜드마크 리스트 만들기.

- SwiftUI의 리스트 타입을 사용할 때 뷰의 플랫폼별 목록을 표시할수있습니다.
- 목록의 요소는 지금까지 생성 한 스택의 자식 뷰와 같이 정적이거나 동적으로 생성 될 수 있습니다.

- 정적 뷰와 동적으로 생성 된 뷰를 혼합 할 수도 있습니다.

 

1) LandmarkList라는 이름으로 SwiftUI 뷰를 만들어줍니다.

2) 기본 텍스트를 리스트로 바꾸고 LandmarkRow 인스턴스에 리스트의 항목으로 처음 두 개의 랜드 마크를 제공합니다.

struct LandmarkList: View {
    var body: some View {
        List {
            LandmarkRow(landmark: landmarks[0])
            LandmarkRow(landmark: landmarks[1])
        }
    }
}

 

 

5. 동적으로 리스트 만들기.

- 목록의 요소를 개별적으로 지정하는 대신 컬렉션에서 직접 행을 생성 할 수 있습니다.
- 데이터의 컬렉션과 컬렉션의 각 요소에 대한 뷰를 제공하는 클로저를 전달하여 컬렉션의 요소를 표시하는 목록을 만들 수 있습니다.

- 제공된 클로저를 사용하여 목록의 각 요소를 자식뷰로 변환합니다.

 

1) 앞에서 만든 2개의 정적 랜드마크Row를 제거하고, 대신 LandmarkData를 List 초기화 프로그램에 전달하세요.

2) 식별 가능한 데이터에 대한 작업을 나열합니다. 두 가지 방법 중 하나로 데이터를 식별 할 수 있습니다.

-> 데이터와 함께 각 요소를 고유하게 식별하는 속성의 주요 경로를 전달하거나 데이터 유형이 Identifiable 프로토콜을 준수하게합니다.

3) 클로저에서 LandmarkRow를 반환하여 동적으로 생성 된 목록을 완성하십시오.
-> 이것은 landmarkData 배열의 각 요소에 대해 하나의 LandmarkRow를 작성합니다.

struct LandmarkList: View {
    var body: some View {
        List(landmarkData, id: \.id) { landmark in
            LandmarkRow(landmark: landmark)
        }
    }
}

4) Landmark 모델에 Identifiable 프로토콜 채택을 추가하세요. + Landmark 타입에는 이미 Identifiable 프로토콜에 필요한 id 속성이 있음 !

5) 이제 Landmark List에서 id 파라미터를 제거해주세요.

struct LandmarkList: View {
    var body: some View {
        List(landmarks) { landmark in
            LandmarkRow(landmark: landmark)
        }
    }
}

- 요렇게 완성.

 

6. 네비게이션 설정 및 상세 페이지

- 목록이 올바르게 렌더링되지만 개별 랜드 마크를 탭하여 해당 랜드 마크의 세부 사항 페이지를 아직 볼 수는 없습니다.
- NavigationView에 탐색 기능을 포함시킨 다음 NavigationLink에 각 행을 중첩하여 탐색 기능을 목록에 추가하여 대상 뷰로의 전환을 설정해보겠습니다.

 

 

1) 상세보기 뷰를 만들거에요. LandmarkDetail.Swift 파일을 만들어줍니다.

2) ContentView 내용을 copy해서 body에 넣어주세요.

3) 그리고 ContentView의 body에는 LandmarkList()를 넣어주세요.

4) LandmarkList에서 동적으로 생성된 리스트를 NavigationView로 감싸주세요 !

5) Navigation 타이틀도 설정해줍니다

6) 리스트 클로저안에서 LandmarkDetail 뷰를 목적지로 하여 반환 된 행을 NavigationLink에 래핑합니다.

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

+ 프리뷰를 라이브 모드로 전환하면 네비게이션을 클릭해서 탐색할 수 있다고 합니다. -> 바로 디테일 페이지로 연결이 됩니다.

여기까지 완성 ~

 

7. 자식 뷰에게 데이터 전달하기

- LandmarkDetail뷰는 여전히 하드 코딩된 세부 정보를 사용하여 랜드마크를 표시합니다.

- LandmarkRow와 마찬가지로 LandmarkDetail 타입으로 구성된 뷰는 데이터 소스로 landmark 프로퍼티가 필요합니다.
- 자식뷰부터 시작하여 CircleImage, MapView, LandmarkDetail을 변환하여 각 행을 하드 코딩하는 대신 전달된 데이터를 표시합니다.

 

1) 앞에서 만들었던 CircleImage.swift에서 저장 이미지(image) 프로퍼티를 CircleImage에 추가합니다. 

2) Turtle Rock의 이미지를 전달하도록 Prview provider를 업데이트하세요.

struct CircleImage: View {
    var image: Image

    var body: some View {
        image
            .clipShape(Circle())
            .overlay {
                Circle().stroke(.white, lineWidth: 4)
            }
            .shadow(radius: 7)
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage(image: Image("turtlerock"))
    }
}

3) MapView.swift에서 좌표 속성을 MapView에 추가하고 Prview provider에 고정좌표를 업데이트 하세요.

4) 좌표값을 기반으로 지역을 업데이트하는 메서드 추가. - setRegion

5) onAppear라는 현재 좌표를 기반으로 위치 계산을 트리거 하는 view modifier를 추가.

 

struct MapView: View {
    var coordinate: CLLocationCoordinate2D

    @State private var region = MKCoordinateRegion()

    var body: some View {
        Map(coordinateRegion: $region)
            .onAppear {
                setRegion(coordinate)
            }
    }

    private func setRegion(_ coordinate: CLLocationCoordinate2D) {
        region = MKCoordinateRegion(
            center: coordinate,
            span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
        )
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView(coordinate: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868))
    }
}

 

6) LandmarkDetail로 가서, Landmark property를 추가해줍니다.

7) 그리고 데이터 전달을 위해서 LandmarkList 와 연결된 부분에 현재 landmark를 목적지로 설정합니다 !

struct LandmarkDetail: View {
    var landmark: Landmark
    //...
}

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

 

8) 이제 LandmarkDetail에서 필요한 모든 값들을 전달해줍시다 !

9) 그리고 사용자가 설명을 스크롤 할 수 있도록 VStack을 ScrollView로 바꿔줍니다. + 필요없는 Spacer 삭제

10 ) 마지막으로, navigationTitle을 랜드마크 이름으로 설정해주고,

navigationBarTitleDisplayMode를 inline으로 설정해줍니다.

 

struct LandmarkDetail: View {
    var landmark: Landmark

    var body: some View {
        ScrollView {
            MapView(coordinate: landmark.locationCoordinate)
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)

            CircleImage(image: landmark.image)
                .offset(y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text(landmark.name)
                    .font(.title)
                HStack {
                    Text(landmark.park)
                        .font(.subheadline)
                    Spacer()
                    Text(landmark.state)
                        .font(.subheadline)
                }
                .font(.subheadline)
                .foregroundColor(.secondary)

                Divider()

                Text("About \(landmark.name)")
                    .font(.title2)
                Text(landmark.description)
            }
            .padding()
        }
        .navigationTitle(landmark.name)
        .navigationBarTitleDisplayMode(.inline)
    }
}

 

8. Previews 동적으로 생성하기.

- 다음으로 LandmarkList_Previews preview provider에 코드를 추가하여 다양한 장치 크기에서 목록보기의 미리보기를 렌더링합니다.

- 기본적으로 미리보기는 active scheme 에서 장치의 크기로 렌더링됩니다.

- previewDevice (_ :) modifier 메서드를 호출하여 미리보기 장치를 변경할 수 있습니다.

 

1) 현재 목록 미리보기를 변경하여 iPhone SE 크기로 렌더링합니다. Xcode의 scheme 메뉴에 표시되는 모든 장치의 이름을 제공 할 수 있습니다.

 

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

 

 

2) ForEach로 여러 기기를 한꺼번에 볼 수 있습니다.

- 목록 미리보기 내에서 장치 이름 배열을 데이터로 사용하여 LandmarkList를 ForEach 인스턴스에 포함시킵니다. 
ForEach는 리스트와 동일한 방식으로 컬렉션에서 작동하므로 스택, 목록, 그룹 등의 하위 뷰를 사용할 수있는 모든 위치에서 사용할 수 있습니다. 데이터 요소가 여기에서 사용하는 문자열과 같은 간단한 값 유형 인 경우 \ .self를 식별자의 키 경로로 사용할 수 있습니다.

 

3) previewDisplayName (_ :) 수정자를 사용하여 장치 이름을 미리보기의 레이블로 추가하십시오. 

4) 캔버스에서 모든 장치들을 비교하고 렌더링을 확인할 수 있습니당 !

 

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE (3rd generation)", "iPhone 14"], id: \.self) { deviceName in
            LandmarkList()
                .previewDevice(PreviewDevice(rawValue: deviceName))
                .previewDisplayName(deviceName)
        }
    }
}

 

 

여기까지 ~ 이번 시간에는 리스트를 만드는 방법을 배웠는데요.

생각보다 재밌네요 스유 ㅋㅎㅋㅎ