[🍎IOS]SwiftUI Tutorial 01 정리

[IOS]01 SwiftUI Essential

새로운 프로젝트의 어플 구현을 위해 애플 공식 페이지의 tutorial을 한글로 정리하였습니다.

영어버전 > https://developer.apple.com/tutorials/swiftui

---

Section 1. Create a New project and Explore the Canvas

• 시작하기에 앞서 프로젝트 생성을 위해 ios > App 으로 선택하여 프로젝트명을 설정합니다.

• landmarksApp.swift 를 선택해서 클릭
  • display에 제공되는 body part를 담당하는 부분
  • @main : app의 첫 시작을 나타내는 속성

• Editor 탭에서 canvas 를 선택하고 Resume를 누르면 지금 작성하고 있는 코드의 프리뷰를 볼 수 있습니다.
  • Editor > canvas > Resume
  • Text(): 함수 내에 화면에 표시하고 싶은 텍스트를 입력한다 (파이썬의 print()과 유사하다)

---

Section 2. Customize Text View

• 텍스트를 클릭하고 “SwiftUI Inspector”를 클릭하면 사진과 같은 창이 뜨게 됩니다.
  • text section에서 직접 text를 바꿀 수 있습니다.
  • Font section에서 직접 형식도 바꿀 수 있습니다.
  • Font의 color section을 통해 직접 색도 변경할 수 있습니다.

---

Section 3. Combine Views using Stacks

• cmd + click 해당 Text() 함수를 누르면 네비게이션 바가 뜨는데 이 중에서 “Embed in VStack”을 선택한다.
• 가장 오른쪽 상단 “+” 을 누르고 > Text 버튼 클릭
• script에 써진 Text를 기존의 Text 아래에 붙여넣으면 사진과 같은 형식이 된다.

import SwiftUI

struct ContentView: view {
    var body: some View {
        VStack {
            Text("Pang!")
                .font(.title)
                .padding()
                .foregroundColor(.black)
            Text("Show me your memo")
        }
    }
}

• VStack 함수에 alignment를 수정하여 text를 정렬시킬 수 있다.
• 정렬 방식
  • VStack() : 수직으로 요소 정렬
  • HStack() : 수평으로 요소 정렬

import SwiftUI

struct ContentView: view {
    var body: some View {
        VStack(alignment:.leading){
            Text("Pang!")
                .font(.title)
                .padding()
                .foregroundColor(.black)
            Text("Show me your memo")
        }
    }
}

• “embed in hstack” 탭을 누른 뒤 다른 text 도 병렬로 삽입할 수 있다.
  • HStack 내부에 병렬로 배열하고 싶은 text를 적는다.
  • Spacer() → 두 text가 양끝에 위치하도록 한다
  • .padding() → UI 화면에서 간격을 적절히 떨어지도록 한다

---

---

Section 4. Create a Custom Image view

• Assets에 crop할 사진을 load 한다.
• File > New > File > SwiftUI View

• Image() 함수를 호출한 다음 > Assets에 load 한 이미지 파일 이름을 적으면 사진이 뜬다.
• clipShape()를 통해 사진을 원형으로 변경 가능하다.

struct circleimage: View {
    var body: some View {
        Image("landmark")
            .clipShape(Circle())
    }
}

---

---

Section 5. Use SwiftUI Views from other Frameworks

import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.116_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()
    }
}

• 이전과 같은 방식으로 File > New > File 탭으로 가서 file 을 하나 더 생성한다.
• 생성된 파일에 MapKit 라이브러리를 import 한다.
• 아래의 코드를 입력하면 오른쪽 사진과 같이 지도창을 띄운 것을 볼 수 있다.

---

---

Section 6. Compose the Detail View

• 위에서 만든 각각의 기능들을 한 화면에 담아보도록 하겠습니다!
• 하나로 합치기 위해 → 각각의 모듈을 VStack()으로 묶어줍니다
• MapView() → 지도 표시
• Divider() → text 사이 나누는 선
• Spacer() → 간격 조절

import SwiftUI

struct ContentView: View {
    var body: some View {
                // 하나로 합치기 위해 VStack()으로 묶어줍니다
        VStack{
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)

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

            VStack(alignment: .leading){
                Text("Pang!")
                    .font(.title)
                    .foregroundColor(.black)
                HStack {
                    Text("Show me your memo")
                        .font(.subheadline)
                    Spacer()
                    Text("here")
                        .font(.subheadline)
                }

                Divider()

                Text("Login")
                    .font(.title2)
                Text("To start this app")

            }
            .padding()

            Spacer()
        }
    }
}

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

    }
}