SwiftUI Tutorials - Landmarks(1)

이번 시간에는 apple developer 공식 사이트에 있는 swiftui 튜토리얼을 따라 하면서 공부한 내용을 차근차근 정리해볼 것이다.

 

Landmark라는 앱은 사용자에게 좋아할 만한 장소를 보여주고 공유하기 위한 앱으로 랜드마크에 대한 세부 정보까지 함께 확인할 수 있다.

이 앱을 이용하여 기존에 배웠던 스택과 이미지, Textview, 그리고 지도를 이용하기 때문에 Mapkitd을 이용하는 방법으로 아주 재밌게 새로운 개념 또한 정리해볼 수 있을 것 같다. 

 

https://developer.apple.com/tutorials/swiftui

Apple Developer Documentation

---

1.  프로젝트 생성

 

프로젝트 생성의 경우 Xcode에서 생성하게 되며 프로젝트 이름은 Landmarks, 인터페이스로는 Swiftui, 언어 설정으로는 Swift로 설정하면 쉽게 끝난다. 자신이 원한다면 프로젝트 이름의 경우 바꿔도 좋겠지만 난 튜토리얼이니깐 그대로 따라 가보겠다. 

 

 

 

---

2. Text View Customize

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            .font(.title)
    }
}

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

 

코드를 보면 이미 기존에 많이 보던 ContenView에 Turtle Rock을 입력해주고 폰트와 글자에 색을 입혀주었다.

그리고 여기까지 하면서도 새롭게 알아냈던 것은 Command + 마우스 클릭을 통해  수정자(modifier)를 수정할 수 있다는 것이다.

이건 내가 앞에서 공부하면서 빼먹었거나 넘어간 내용인 것 같다. 지금이라도 알았으면 된 거지!

 

자신이 수정자를 추가하고자 하는 것에 Command + 마우스 클릭을 하면 show Swiftui inspector가 있는데 이걸 클릭하면 해당 요소에 대한 수정자를 추가 혹은 삭제할 수 있다. 예시 화면을 보면

Text부터 font,frame까지 모두 설정 할 수있다.

 

 

---

3.  Combine Views Using Stacks

 

이 부분에서는 주로 Text view와 스택을 다루는 기초적인 부분을 배우게 된다. 그래서 랜드마크에 대한 세부 정보가 들어 있는 섹션을 스택 위, 아래, 좌우 자유자재로 두는 법을 배우게 된다. 

 

바로 위에서 Command + 마우스 클릭을 통해 수정자를 추가하였다면 이번에는 선택한 요소를 원하는 스택에 추가하는 것이 가능하다. 

 

아까 Turtle Rock을 출력하고 이것을 한번 VStack에 포함시켜보았다. 이후 Joshua Tree National Park를 출력하기 위해 하나를 더 추가해주고 이것 또한 아까처럼 수정자를 추가하여 폰트를 지정해주었다.

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_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

그리고 방금 추가한 VStack의 initializer를 편집해서 뷰를 가장자리로 이동하게끔 정렬하였다. 

Joshua Tree National Park를 감싸는 HStack을 추가하여 좌우로 나눠지게 하여 california 텍스트를 추가하였다. 

마지막으로 이 둘 사이에 padding() 메서드를 이용해서 랜드마크의 이름과 세부 정보 사이에 더 많은 공간을 할당할 수 있게 되었다. 

 

 

---

4. Create a Custom Image View

import SwiftUI

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

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

이번에는 새로운 Swiftui파일 CircleImage를 만들고 Turtle Rock 이미지 하나를 추가해준다. 여기서 clipshape를 통해 이미지의 모양을 자른 것처럼 나오게 할 수 있다. 여기서는 Cirecle을 사용하였기 때문에 기존 사각형이었던 이미지가 동그랗게 나오는 것을 확인할 수 있을 것이다. 그리고 overlay를 이용해서 뷰를 중첩되게 보이게 하는데 Zstack과 유사한 것이라고 생각하면 편하다.

그래도 이해가 잘 가지 않는 다면 overlay를 추가하기 전과 후를 확인해보면 더욱 확인하기 쉽다. 

 

overlay(X) vs overlay(O)

 

---

5. Use SwiftUI Views From Other Frameworks

이번에도 새로운 MapView라는 Swiftui파일을 하나 만들어주자. 

이 파일에서는 이전과는 다르게 Mapkit이라는 것을 Import문에 추가해준다. 여기서 Mapkit은 앱 내에서 지도를 표시하기 위해 반드시 Import를 해줘야 그것과 관련된 기능에 액세스 할 수 있기 때문이다.

 

그리고 지도에 대한 지역 정보를 저장할 수 있는 변수를 하나 만든다. 이때 @State 속성을 사용해서 둘 이상의 view에서의 수정 할 수있는 앱 데이터를 설정할 수 있게 된다.  그럼 Swiftui는 기본 스토리지를 관리하고 변하는 값에 따라 view를 자동을 업데이트 할 수있게 된다. 

 

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

코드를 보면 CLLocationCoordinate2 D, MKCoordinateSpan 등등 조금은 난해해보이는 코드들이 갑자기 생겼다. 위치와 관련 있겠지~하고 넘어가면 튜토리얼을 하는 의미가 없지 않은가?! 한번 찾아보자!!

 

• MKCoordinateRegion : 특정 위도와 경도를 중심으로 하는 직사각형의 지리적 영역을 표시해준다 
• MKCoordinateSpan : 지도 영역의 너비와 높이를 지정한다. 
• CLLocationCoordinate2D : 위치와 관련된 위도 및 경도로, WGS 84 참조 프레임을 사용하여 지정한다. 

결론: 확실한 건 지도와 관련된 것이다.

 

이제 view부분으로 넘어가서 기본 텍스트를 위에서 위도와 경도로 지정해둔 지역의 값을 바인딩하는 지도 view를 가져왔다. 

 

 

---

6. Compose the Detail View

 

이제 지금 까지 만들었던 뷰들을 하나로 한번 합쳐보는 작업을 해보자. 메인이 되는 ContentView에서 작업을 하게 된다. 

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

 

갑자기 완성본이 나와서 놀랐겠지만 한줄씩 천천히 해석해보자.

아까 마지막 스택에서 Vstack을 하나 더추가하여 현재까지의 뷰를 감싸준다. 그리고 그 안에는 Mapview를 추가 하여 방금까지 했던 과정을 한번에 출력하였다. 그래서 이전에 있던 스택들 위로 하나의 스택이 더 생겼기 때문에 지도가 위에 뜨게 된다. 그리고 ignoresSafeArea를 이용하여 위쪽에 안전영역을 무시하고 꽉찬 화면으로 출력되게 된다.  

 

그리고 이제 여기서 아까 동그라미 모양으로 만든 Turtle Rock 이미지를 한번 위에 올려주자. 여기서는 수정자를 사용하여 마치 지도 위에 얹혀 있는 느낌을 받을 수 있게 된다. 애플 공식 문서에는 다음과 같이 정의되어있다. 여기까지의 과정을 그림으로 확인해보자. 

 

offset :지정된 수평 및 수직 거리만큼 이 뷰를 오프셋 합니다. 

 

 

그리고 이제 마지막으로 이 랜드마크에 대한 추가 설명 텍스트를 추가하고 이를 구분선으로 구분 지어준다. 

구분선을 만들어 줄 때는 Divider를 사용하며 이를 통해 텍스트 간에 구분선을 그려서 각각의 요소들이 구분 지어 보이게 만들어준다. 

그래서 최종적인 ContentView의 모습은 아래와 같다. 

 

---

 

이번 시간에는 Swiftui를 이용하여 앱에서 필수적인 뷰를 만들고 합쳐보기도 하는 과정을 공부해보았다. 기초적인 것 같지만 매우 중요한 스택부터 수정자들까지 다양하게 나왔기 때문에 복습 또한 필요해 보이며, 개인 프로젝트에서도 사용할 수 있도록 해볼 것이다.

 

다음 시간에는 list와 navigation에 대해 공부하며 실습하는 시간을 가져 보자!👏👏