[SwiftUI] Tutorials 1. Creating and Combining View

XCode에서 App을 선택하고

Product Name: Landmarks

Interface: Swiftui

Language: Swift를 선택한다.

 

기본적으로 SwiftUI는 두 개의 구조체를 선언합니다. 첫 번째 구조체는 View프로토콜을 따르며 View의 콘텐츠 및 레이아웃을 정의합니다.

두 번째 구조체는 첫 번째 구조체에 대한 Preview를 선언합니다.

 

Preview에서 Hello, World를  Command-클릭하면 구조화된 편집 팝오버를 띄우고 Show SwiftUI Inspector를 선택합니다.

Inspector에서 텍스트를 Turttle Rock를 변경하고, font를 title로 변경합니다.

foregroundColor를 변경하려면 텍스트 상에서 .foregroundColor(.green)을 입력합니다.

이렇게 되면 Tuttle Rock의 font는 title이란 스타일로 변경되며 글자 색은 초록색으로 변경됩니다.

이렇게 인스펙터(화면상에서)를 사용하여 속성을 변경하거나 제거하면 Xcode가 코드를 즉시 업데이트합니다.

텍스트 상에서도 Text("Turttle Rock") 을 Command - 클릭 하면 속성을 수정할 수 있습니다. 검은색으로 바꿔줍니다

 

TurttleRock을 스택을 추가해 줍니다.

스택은 V스택(수직을 기준으로 쌓는), H스택(수평을 기준으로 쌓는), Z스택(스택을 쌓는)이 있습니다.

 

TurttleRock을 Cmd - 클릭해서 Embed in VStack을 선택해서 스택 안에 넣어주고  Cmd + Shift + L을 눌러서 Text를 스택 안으로 드래그해줍니다.

 

Text를 Joshua Tree National Park로 변경하고, font를 subheadline으로 변경합니다.

 

Josua Tree National Park를 cmd-클릭하여 Hstack에 추가해주고 Hstack 내부에 Text: California를 추가해준다.

텍스트와 텍스트 사이에 Spacer를 추가하여 디바이스의 전체 너비를 사용하도록 지정해 공원과 상태를 분리한다.

padding()을 사용하여 랜드마크의 이름과 세부 정보에 약간의 공간을 제공한다.

padding을 사용하면 상하좌우의 컴포넌트 사이의 약간의 공간을 잡아준다.

다음 이미지 뷰를 만들어 본다

애플이 튜토리얼에서 제공하는 프로젝트 파일을 다운로드 받으면 이미지가 들어있다. 해당 이미지를 Assets에 넣어준다

그 다음 SwiftUI View파일을 하나 생성한다 Cmd - N

파일명은 CircleImage

CircleImage파일을 다음과 같이 수정하면 프리뷰를 통해 원형 이미지가 추가된 것을 알 수 있다,

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")//이미지
            .clipShape(Circle())//원형으로 변환하겠다
            .overlay{
                Circle().stroke(.white, lineWidth: 4)//원형 테두리 두께는 4 색은 흰색
            }
            .shadow(radius: 7)
    }
}

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

 

---

다른 프레임워크에서 SwiftUI를 사용하기

또 하나의 SwiftUI View파일을 만든다 파일명은 MapView, 우리는 MapKit 프레임워크를 사용할거기때문에 MapKit을 import해준다.

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

@State 변수로 만든 변수는 뷰와 상호작용 하는 변수다. 뷰를 활용해 변수를 바꿀수도, 변수를 사용해 뷰를 바꿀수도 있다.

@State변수로 뷰를 접근할 때에는 $키워드를 붙혀줘야한다. 그래야 $변수를 뷰에 바인딩 할 수 있다.

---

지금까지 3개의 뷰를 만들었다 

TextVeiw, Image View, Map View!

세 개를 결합해서 최종 디자인을 만들 것이다.

ContentView.swift파일로 들어가서 VStack위에 Vstack을 추가해 주고 아까 만들어 놓은 MapView와 Image View를 추가한 후 수정자들을 추가해주면 된다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .ignoresSafeArea(edges: .top) //화면 상단 가장자리까지 확대
                .frame(height: 300) //width 생략시 뷰 width에 맞춰짐
            
            CircleImage()
                .offset(y: -130) //y축 기준 -130 offset
                .padding(.bottom, -130) //뷰 하단을 기준으로 -130만큼 패딩 지정
            
            VStack(alignment: .leading) {
                VStack {
                    Text("Turtle Rock")
                        .font(.title)
                        .fontWeight(.medium)
                        .foregroundColor(.green)
                    HStack {
                        Text("Josua Tree National Park")
                            .font(.subheadline)
                        Spacer()
                        Text("California")
                            .font(.subheadline)
                    }
                    .font(.subheadline) // HStack내부 전체에 해당 폰트 적용
                    .foregroundColor(.secondary) // HStack 내부 전체에 해당 컬러 적용
                    
                    Divider()// 구분선 추가
                    
                    //부가 설명 추가
                    Text("About Turtle Rock")
                        .font(.title2)
                    Text("Descriptive text goes here.")
                    
                }
                .padding()
                
                Spacer()
            }
        }
            
    }
}

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

 

최종 뷰의 모습