[SwiftUI] 생성과 뷰 결합 (애플 튜토리얼 대략 설명)

그림 1.

그림 1. xcode에서 프로젝트를 생성한다.

 

그림 2.

 그림 2.와 같이 iOS에서 App를 선택한다.

그림 3.

 

그림 3.과 같이 프로젝트명을 쓰고 Interface에서 SwiftUI를 선택한다. 그리고 Language는 Swift를 선택한다.

// 프로젝트명 + App.swift

import SwiftUI

@main
struct LandmarksApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

 

기본적으로 프로젝트명 + App.swift와 ContentView.swift 파일이 생성된다.

 

그림 4.

 

Xcode에서 ContentView.swift 파일을 선택하면 그림 4.와 같이 왼쪽에는 코드가 오른쪽에는 미리보기가 보인다.

신규 swiftUI 파일을 만들때는 File > New > File을 선택한다. 그리고 그림 5.와 같이 iOS 내 User Interface에서 SwiftUI View를 선택하여 신규 파일을 만든다.

 

그림 5.

 

// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)

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

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                    Spacer()
                    Text("California")
                }
                .font(.subheadline)
                .foregroundColor(.secondary)

                Divider()

                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()

            Spacer()
        }
    }
}

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

 

 

 

// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/)
            .overlay {
                Circle().stroke(.white, lineWidth: 4)
            }
            .shadow(radius: 7)
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

 

 

 

그림 6.

 

그림 6.은 CircleImage.swift 파일에서 원형 이미지 표현에 대한 계층 구조를 보여주고 있다.

 

// MapView.swift

import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )

    var body: some View {
        Map(coordinateRegion: $region)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

 

 

 

<참조>

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

Apple Developer Documentation