iOS - SwiftUI 튜토리얼 : Creating and Combining Views Part 3

Apple - SwiftUI Tutorial 원문

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

 

SwiftUI Tutorial Part 1. https://atelier-chez-moi.tistory.com/60

 - Section 1 : 새 프로젝트를 생성하고 캔버스(Canvas) 살펴보기

 - Section 2 : 텍스트 뷰 커스터마이징

 

SwiftUI Tutorial Part 2. https://atelier-chez-moi.tistory.com/61

 

 - Section 3 : 스택을 사용하여 뷰를 결합하기

 - Section 4 : 커스텀 이미지 뷰를 생성하기

 

 

반가워요, INSWAG 입니다. 이번에는 섹션 5번부터 알아보도록 하겠습니다.

기존 UIKit 은 어떤 역할을 할지 궁금했는데 여기서 궁금증이 어느 정도 해소되려나 봅니다..!

시작해볼까요? Bonne Chance !

 

 

 

Section 5 - UIKit 과 SwiftUI View 를 함께 사용하기

 

이제 여러분은 맵 뷰(map view) 를 만들어 볼 준비가 되었어요.

맵을 렌더링하기 위해서 MapKit 으로부터 MKMapView 클래스를 사용할 수 있어요.

 

SwiftUI 내부에서 UIView 의 서브클래스(subclass)들을 사용하기 위해서, 여러분은 SwiftUI 뷰 안으로 'UIViewRepresentable' 프로토콜을 준수하는 다른 뷰를 감싸도록 할 거에요. SwiftUI 는 WatchKit 과 AppKit 뷰들과 유사한 프로토콜을 포함하고 있어요.

 

시작을 위해 'MKMapView' 를 나타낼 수 있는 새로운 커스텀 뷰를 생성합니다.

 

Let's get it !

 

Step 1.

 - 'File > New > File' 을 선택하고, 'iOS' 를 플랫폼으로 선택 > 'SwiftUI View' 템플릿 선택 > 'Next' 선택.

 - 새 파일을 'MapView.swift' 로 이름 짓고 Create 클릭.

 

Step 2.

 - Mapkit 을 import 해주고 'MapView' 의 타입으로 'UIViewRepresentable' 을 타입으로 다음과 같이 선언합니다.

 - Xcode 가 표시하는 에러는 걱정마세요. 몇 단계가 지나면 해결될거에요 :)

 

* UIViewRepresentable 프로토콜 ?

 - 이 친구는 두 가지 필수 조건(requirement)을 가집니다. 여러분이 꼭 추가해주셔야 해요.

   1. makeUIView(con text:) 메소드 : MKMapview 를 생성하는 친구

   2. updateUIView(_: context:) 메소드 : view 를 구성하며 어떠한 변화에 대해 응답하는 친구

 

Step 3.

 - 'body' 프로퍼티를 빈 'MKMapview' 를 생성 및 리턴하는 'makeUIView(context:)' 메소드로 대체합니다.

 

 

Step 4.

 - 'Turtle Rock' 에다 맵의 중심을 맞추기 위한 정확한 좌표(coordinate)로 맵 뷰의 지역(region)을 설정해주는 'updateUIView(_: context:)' 메소드를 다음과 같이 생성하세용

 

미리보기가 정적 모드(static mode)일 때, 미리보기는 SwiftUI View 만 완전히 렌더링 됩니다.

왜냐하면 'MKMapView' 는 UIView 의 서브클래스이기 때문에, 여러분은 맵을 보기 위해서 실시간 미리보기로 스위칭해줘야 할겁니다.

 

Step 5.

 - 'Live Preview' 버튼(사진에서 작게 표시된 부분) 을 클릭해서 미리보기(preview)를 라이브 모드(live mode)로 스위칭해주세요. 여러분은 아마도 'Try Again' 이나 'Resume' 버튼을 여러분의 미리보기 상에서 클릭해줘야 할 수도 있어요.

 - 잠시 후에, 여러분은 'Turtle Rock' 의 고향인 'Joshua Tree National Park' 의 지도를 보게 될 거에요 :)

 

Super ! 여기까지 잘 따라오셨다면 잘 하신거에요 :)

그럼 바로 Section 6 로 가볼까요?

 

 

---

 

Section 6. 디테일 뷰를 구성하기 

 

 

이제 여러분은 필요한 모든 구성 요소들을 가지게 되었어요. 

이름(name), 장소(place), 원형 이미지(circularimage), 위치에 대한 지도(map for the location)를 가지게 되었죠.

 

지금까지 사용해 온 도구들로 여러분의 커스텀 뷰를 결합해 랜드마크 디테일 뷰를 위한 파이널 디자인을 만들어보세요.

 

Step 1.

 - 프로젝트 네비게이터에서, 'ContentView.swift' 파일을 선택합니다. (방금까지는 MapView.swift 에서 작업했었죠?)

 

Step 2.

 - 또 다른 VStack 안에 있는 3개의 텍스트 뷰를 가지고 있는 VStack 을 넣어줍니다.

 

Step 3.

 - 여러분의 커스텀 MapView 를 스택의 상단에 더해줍니다. 아래 사진을 참고하세요 :)

 - MapView 의 사이즈를 'frame(width: height:)' 를 이용해 설정합니다.

 - 여러분이 오직 height 파라미터만을 구체적으로 명시해줄 때(width 는 선언이 안되어있는 상태죠?), view 는 자동적으로 view 가 가진 컨텐츠의 넓이(width)에 맞춰 사이즈를 갖게 됩니다. 이러한 경우에 MapView 친구는 사용가능한 공간을 채우기 위해 확장합니다. (아래 사진과 같이 말이죠)

 

Step 4.

 - 결합된 뷰 내에서 렌더링된 지도를 보기 위해 'Live Preview' 버튼을 클릭합니다.

 - 여러분은 Live Preview 를 보여주는 동안에도 view 를 편집하는 것이 가능해요.

이미지다 보니 특별히 변한건 없네요... :(

 

 

Step 5.

 - 'CircleImage' 뷰를 스택에 더해주세요.

 

Step 6.

 - 맵 뷰의 상단에 이미지의 레이어를 맞추기 위해, 이미지에 offset 값을 -130 포인트를 수직으로(vertically) 주도록 합니다.

 - 그리고 padding 을 -130 포인트를 뷰의 아래(bottom)로 부여합니다.

 - 이러한 조절은 이미지를 위로 움직여서 텍스트를 위한 공간을 만듭니다.

 

Step 7.

 - 'Spacer' 를 바깥쪽 VStack 하단에 추가해서 스크린의 상단에 컨텐츠를 밀도록 하겠습니다.

 

Step 8.

 - 마지막으로 스크린의 상단 가장자리로 지도 콘텐츠를 확장시키기는 것을 가능케 하기 위해서 'edgesIgnoringSafeArea(.top)' 수정자(modifier)를 맵 뷰에 추가해줍니다.

 

여기까지 잘 따라오셨나요?

이제 마지막 섹션만 남았습니다. 아 물론 뷰를 생성하고 결합하는 것에 대한 섹션이 그렇다는 것이고

아직 전체적인 주제는 7개가 더 남았어요 ㅎㅎㅎㅎㅎㅎ......

 

다행스럽게도, 마지막 세션은 배운 내용에 대한 문제입니다 !

자신이 이해를 잘 했는지 확인해볼까요?

 

 

Section 7. Check Your Understanding

 

Question 1. 커스텀 SwiftUI view 를 생성할 때, 어디에 뷰의 레이아웃을 선언해야 하나?

 

보기 1. 뷰의 이니셜라이저 내(In the view's initializer)

보기 2. body 프로퍼티 내(In the 'body' property)

보기 3. layoutSubviews() 메소드 내(In the 'layoutSubviews()' methods)

 

 

Question 2. 다음의 뷰 코드로부터 어떤 레이아웃 렌더링을 얻을 수 있는가?

 

 - 뷰 코드)

- 보기)

 

Question 3. 다음 중 커스텀 뷰의 body 프로퍼티 로부터 3개의 뷰를 리턴하는 정확한 방식은 어떤 것인가?

 

 - 보기)

 

Question 4. 뷰를 구성하기 위한 수정자(modifier) 메소드를 사용하는 정확한 방식은 어떤 것인가?

 

- 보기)

 

 

정답은 다음 포스팅에서 알려드리겠습니다..! 혹시 얼른 알고 싶으신 분은 가장 상단의 원문 링크에서 확인하세요~

다음 포스팅에서는 리스트 생성과 네비게이션에 대해 공부해보도록 하겠습니다.

 

수고하셨습니다 :)