[SwiftUI] 01. Creating and Combining views

SwiftUI Essentials의 첫 단락인 Creating and Combining views이다. 

< Section 1. 새 프로젝트 생성하고 Canvas 둘러보기 > 

섹션 1에서는 프로젝트 생성법에 대해 말하고 있다. 

XCode를 키면 나오는 화면을 보자

프로젝트를 생성하면 다음 화면이 나온다

Single View App을 누르고 진행하자.

프로젝트명은 SwiftUI로만 하지 않으면 된다. 프레임워크의 이름을 썼을 때 충돌을 하는 경우가 있으니 다른 이름을 사용하자. 

그리고 이제 실행하면 나오는 기본 ContentView.swift의 Canvas 화면이다. 

import SwiftUI

struct ContentView: View {

    var body: some View {

        Text("Hello World")

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

SwiftUI는 두 개의 structures를 선언한다. 첫 번째 structure는 View 프로토콜을 따르고 view의 content와 layout을 구성한다. 두 번째 structure는 그 view의 preview를 선언한다. 

실행은 간단하게 "Command + R" 하여 빌드한다. 

< Section 2. Text View 커스터마이즈하기 > 

코드를 바꾸거나 inspector를 사용함으로써 view's display를 커스터마이즈 할 수 있다. 

import SwiftUI

struct ContentView: View {

    var body: some View {

        Text("Turtle Rock")

            .font(.title)

            .foregroundColor(.green)

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

* font() : 폰트의 형태를 정해준다 

- .title : 타이틀

- .subheadline : 부제목

* foregroundColor()

- .color : color에 색상을 넣어 text의 색을 바꿔준다. 

< Section 3. Stacks를 사용하여 Views 결합하기 > 

title view를 넘어서 더 추가적으로 VStack, HStack(+ 앞뒤로)을 이용하여 글씨의 위치를 바꿔줄 수 있다.

Command를 함수를 클릭하면 editing 화면이 등장한다. 

import SwiftUI

struct ContentView: View {

    var body: some View {

        VStack {

            Text("Turtle Rock")

                .font(.title)

            Text("Joshua Tree National Park")

        }

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

VStack으로 수직으로 Text를 쌓은 것이다. 

위에 title로 먼저 쓴 text가 위에 오고 뒤에 작성 한 text가 바로 아래 생성된다.

import SwiftUI

struct ContentView: View {

    var body: some View {

        VStack {

            Text("Turtle Rock")

                .font(.title)

            Text("Joshua Tree National Park")

                .font(.subheadline)

        }

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

아까 위에서 봤던 .subheadLine을 추가한 결과이다. 

VStack(alignment: .leading)

VStack 부분에 위를 추가 해주면 텍스트가 좌측으로 정렬된다

import SwiftUI

struct ContentView: View {

    var body: some View {

        VStack(alignment: .leading) {

            Text("Turtle Rock")

                .font(.title)

            HStack {

                Text("Joshua Tree National Park")

                    .font(.subheadline)

                Text("California")

                    .font(.subheadline)

            }

        }

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

이어서 HStack을 VStack안에 추가하여 Horizontal하게 Text를 입력해준다. 

HStack {

                Text("Joshua Tree National Park")

                    .font(.subheadline)

                Spacer()

                Text("California")

                    .font(.subheadline)

텍스트와 텍스트 사이에 Spacer()를 추가하여 공간을 만들어준다. 

import SwiftUI

struct ContentView: View {

    var body: some View {

        VStack(alignment: .leading) {

            Text("Turtle Rock")

                .font(.title)

            HStack {

                Text("Joshua Tree National Park")

                    .font(.subheadline)

                Spacer()

                Text("California")

                    .font(.subheadline)

            }

        }

        .padding()

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

마지막으로 .padding()을 추가하여 사이드에 공간을 조금 넣어준다. 

< Section 4. Custom Image View를 생성해보자 > 

이름과 지역은 다 준비 되었으니 이미지를 추가해보자 

이미지를 추가하기 전에 마스크, 두께, 그림자를 이미지에 적용하는 법을 알아보자!

왼쪽의 네비게이션 메뉴를 보면 "Assets.xcassets"라는 폴더를 발견할 수 있다. 이를 클릭하면

이런 화면이 나오는데  좌측 하단의 +를 눌러 이미지를 추가할 수 있고, 이미지를 드래그 해와서 추가할 수도 있다. 

그리고 이미지를 불러올 수 있도록 도와주는 Supporting Views를 만들어 볼 것이다. 앞서 만든 것 처럼 Command + N을 해서 새 .swift 파일을 만들어보자. 이름을 CircleImage.swift로 해보자. 

import SwiftUI

struct CircleImage: View {

    var body: some View {

        Image("turtlerock")

    }

}

struct CircleImage_Preview: PreviewProvider {

    static var previews: some View {

        CircleImage()

    }

}

처음에는 네모난 이미지 원형 그대로 출력이 된다. 

import SwiftUI

struct CircleImage: View {

    var body: some View {

        Image("turtlerock")

            .clipShape(Circle())

    }

}

struct CircleImage_Preview: PreviewProvider {

    static var previews: some View {

        CircleImage()

.clipShape(Circle())을 통해 이미지를 원형을 잘라낼 수 있다. 

그리고 Circle()의 색상과 라인두께를 .stroke(Color._ , lineWidth: _)로 정해줄 수 있다. 

import SwiftUI

struct CircleImage: View {

    var body: some View {

        Image("turtlerock")

            .clipShape(Circle())

            .overlay(

                Circle().stroke(Color.gray, lineWidth: 4))

    }

}

struct CircleImage_Preview: PreviewProvider {

    static var previews: some View {

        CircleImage()

    }

}

import SwiftUI

struct CircleImage: View {

    var body: some View {

        Image("turtlerock")

            .clipShape(Circle())

            .overlay(

                Circle().stroke(Color.gray, lineWidth: 4))

            .shadow(radius: 10)

    }

}

struct CircleImage_Preview: PreviewProvider {

    static var previews: some View {

        CircleImage()

그리고 .shadow(radius:_)를 통해 원 주변에 그림자를 생성할 수 있다. 

그리고 Color만 white로 바꾸면 다음의 그림을 얻을 수 있다.

아! 그리고 방금 만든 CircleImage.swift 파일과 다음 섹션 5에서 만들 파일은 프로젝트 내의 하위 폴더를 하나 만들어서 관리해야한다!

요런식!

< Section 5. UIKit과 SwiftUI Views를 동시에 사용해보자 > 

이제 지도를 만들 준비가 됐다. MapKit의 MKMapView 클래스를 사용하여 지도를 렌더링 할 수 있다. 

UIView를 SwiftUI에서 쓰기 위해 View를 UIViewRepresentable 프로토콜로 바꿔줘야한다. SwiftUI는 WatchKit, AppKit같은 유사한 뷰가 있다. 

아까 전 처럼 새 .swift 파일을 생성해준다. 이름은 MapView!

import SwiftUI

import MapKit

struct MapView: UIViewRepresentable {

    var body: some View {

        Text("Hello World")

    }

}

struct MapView_Preview: PreviewProvider {

    static var previews: some View {

        MapView()

    }

}

body 쪽을 다음과 같이 바꿔준다. 

import SwiftUI

import MapKit

struct MapView: UIViewRepresentable {

    func makeUIView(context: Context) -> MKMapView {

        MKMapView(frame: .zero)

    }

}

struct MapView_Preview: PreviewProvider {

    static var previews: some View {

        MapView()

    }

}

이 makeUIView(context:) 메소드는 빈 MKMapView를 생성하고 반환하는 역할을 한다. 

import SwiftUI

import MapKit

struct MapView: UIViewRepresentable {

    func makeUIView(context: Context) -> MKMapView {

        MKMapView(frame: .zero)

    }

    func updateUIView(_ view: MKMapView, context: Context) {

        let coordinate = CLLocationCoordinate2D(

            latitude: 34.011286, longitude: -116.166868)

        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)

        let region = MKCoordinateRegion(center: coordinate, span: span)

        view.setRegion(region, animated: true)

    }

}

struct MapView_Preview: PreviewProvider {

    static var previews: some View {

        MapView()

    }

}

이 updateUIView(_:context:) 메소드는 지도상 지역의 정확한 좌표를 찍어주는 역할을 한다. 실제 Turtle Rock의 좌표이다. 

다른 좌표를 이용해보고 싶다면, 구글지도나 네이버지도에서 원하는 지역을 클릭 후 위도와 경도를 얻으면 된다. 

순서대로 입력해주면 원하는 지역의 지도를 반환해준다!!

이 파일도 Supporting Views 폴더에 넣어둔다!

이 사실을 모르고 계속 이 파일을 실행시키려고 하는 실수를 했다... 이는 Python으로 치면 .py 폴더로 내가 원하는 Class를 만든 것과 같다.

그러니 폴더를 생성해서 그 안에서 관리 할 것! 어차피 빌드되는 것은 ContentView.swift만임!

< Section 6. 세세한 View를 구성해보자 > 

이제 모든 구성 요소를 얻었다! 이름, 지역, 원형의 이미지, 지역상 위치! 그럼 이제 무얼 해야 할까?

지금까지 만든 것들을 합치면 된다!

import SwiftUI

struct ContentView: View {

    var body: some View {

        VStack {

            VStack(alignment: .leading) {

                Text("Turtle Rock")

                    .font(.title)

                HStack(alignment: .top) {

                    Text("Joshua Tree National Park")

                        .font(.subheadline)

                    Spacer()

                    Text("California")

                        .font(.subheadline)

                }

            }

            .padding()

        }

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

기존에 텍스트만 만들어 놨던 코드에 VStack {}을 하나 더 추가해준다!

그리고 VStack안에 아까 만들어놨던 기능들을 하나하나 추가해보자

import SwiftUI

struct ContentView: View {

    var body: some View {

        VStack {

            MapView()

                .frame(height: 300)

            VStack(alignment: .leading) {

                Text("Turtle Rock")

                    .font(.title)

                HStack(alignment: .top) {

                    Text("Joshua Tree National Park")

                        .font(.subheadline)

                    Spacer()

                    Text("California")

                        .font(.subheadline)

                }

            }

            .padding()

        }

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

* .frame(width:height:) : 너비와 높이를 지정할 수 있다. 

import SwiftUI

struct ContentView: View {

    var body: some View {

        VStack {

            MapView()

                .frame(height: 300)

            CircleImage()

                .offset(y: -130)

                .padding(.bottom, -130)

            VStack(alignment: .leading) {

                Text("Turtle Rock")

                    .font(.title)

                HStack(alignment: .top) {

                    Text("Joshua Tree National Park")

                        .font(.subheadline)

                    Spacer()

                    Text("California")

                        .font(.subheadline)

                }

            }

            .padding()

        }

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

그리고 아까 만든 CircleImage()를 추가해준다!

전체적으로 아래서 위로!

.offset으로 y축으로 위로 이미지를 끌어올린다.

그리고 .padding을 하단에 넣는다.

import SwiftUI

struct ContentView: View {

    var body: some View {

        VStack {

            MapView()

                .frame(height: 300)

            CircleImage()

                .offset(y: -130)

                .padding(.bottom, -130)

            VStack(alignment: .leading) {

                Text("Turtle Rock")

                    .font(.title)

                HStack(alignment: .top) {

                    Text("Joshua Tree National Park")

                        .font(.subheadline)

                    Spacer()

                    Text("California")

                        .font(.subheadline)

                }

            }

            .padding()

            Spacer()

        }

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

그리고 Spacer()를 넣어서 VStack을 스크린 위로 올려준다. 

조금 더 올라간 모습을 볼 수 있다.

import SwiftUI

struct ContentView: View {

    var body: some View {

        VStack {

            MapView()

                .edgesIgnoringSafeArea(.top)

                .frame(height: 300)

            CircleImage()

                .offset(y: -130)

                .padding(.bottom, -130)

            VStack(alignment: .leading) {

                Text("Turtle Rock")

                    .font(.title)

                HStack(alignment: .top) {

                    Text("Joshua Tree National Park")

                        .font(.subheadline)

                    Spacer()

                    Text("California")

                        .font(.subheadline)

                }

            }

            .padding()

            Spacer()

        }

    }

}

struct ContentView_Preview: PreviewProvider {

    static var previews: some View {

그리고 .edgesIgnoringSafeArea(.top)을 하여 지도를 스크린의 위쪽까지 확장시켜준다!

큰 차이는 안보이는 듯....

이렇게 Swift Essential의 첫 단락 Creating and Combining Views 가 마무리 되었다.

섹션 7의 퀴즈는 각자 풀어보는게 좋을 것 같다! 위에서 배운 내용들을 점검하는 수준이라 어렵진 않다!

내가 코드를 치면서 계속 바뀌는 화면을 보니 재밌고 흥미로운 것 같다...! 

재밌어서 더 손이가는 Swift인 것 같다~

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