[iOS - SwiftUI] 튜토리얼 - 4. 모델과 뷰 사용, preview 수정 (.resizable(), frame, previewLayout, Group)

구현할 Row

* 애플 튜토리얼의 프로젝트 파일을 받아서 실습하고 그 중에서 중요한 부분만 포스팅

데이터 모델 정의

• 애플에서 제공해준 assets폴더와 landmarkData 확인

landmarkData.json

[
    {
        "name": "Turtle Rock",
        "category": "Rivers",
        "city": "Twentynine Palms",
        "state": "California",
        ...

• 모델도 기존 swift에서 사용하던 방식처럼, json파일을 디코딩 하기위해서 Codable을 따르도록 구현

import Foundation
import SwiftUI
import CoreLocation

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

• (이전에서 알아본) CircleImage 구현

CircleImage

import SwiftUI

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"))
    }
}

Cell에 사용될 Row 구현

• LandmarkRow 정의

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
      Text("Hello, World!")
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
      LandmarkRow(landmark: landmarks[0]) // landmarks는 전역에 선언된 mock 데이터 프로퍼티
    }
}

• Text에 데이터 적용

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
      Text(landmark.name) // <-
    }
}

• 이미지를 추가하고, resizable을 통해 이미지의 크기를 변경 (frame크기가 아닌 contentSize의 크기를 조정)

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
      HStack {
        landmark.image
          .resizable() // frame크기가 아닌, 컨텐트 사이즈를 조정
          .frame(width: 50, height: 50, alignment: .leading)
        Text(landmark.name)
      }
    }
}

• 오른쪽 영역에 Spacer를 주어서 왼쪽으로 정렬되도록 구현

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
      HStack {
        landmark.image
          .resizable()
          .frame(width: 50, height: 50, alignment: .leading)
        Text(landmark.name)
        Spacer() // <-
      }
    }
}

지금까지 구현한 Row = HStack(Image + Text + Spacer)

Preview 수정 방법

• preview에 지금은 iPhone이 전체 나오지만, 아래처럼 Row만 나오도록 하는 방법

preview 디폴트	preview 수정

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

• .previewLayout를 추가하여 조정

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

Group 추가 방법

• 커서를 위치하고, shift + cmd + A > Group 검색하여 생성

• Group 생성 후 LandmarkRow도 하나 더 추가

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

* 참고

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