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

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 3 - 스택을 사용하여 뷰를 결합하기

 

이전 섹션에서 여러분이 생성해본 타이틀 뷰를 넘어, (이번에) 여러분은 랜드마크에 대한 디테일한 내용들을 포함하는 텍스트 뷰를 추가해볼 것입니다. 공원의 이름(name of the park)이나 그 랜드마크의 주(state) 같은 것들 말이죠. (우리 나라로 치면 '구' 에 가까우려나요..? '시' 인가?)

 

SwiftUI 뷰를 생성할 때, 여러분은 뷰의 body 프로퍼티 내부에 'content(내용), layout(레이아웃), behavior(동작)' 를 설명합니다. 하지만, body 프로퍼티는 오직 단일 뷰(single view)를 리턴하죠. (이를 해결하기 위해) 다수의 뷰를 (뷰들을 수평, 수직, 앞 뒤로 그룹화하는) 스택으로 결합(combine)하거나 끼워(embed)넣을 수 있어요.

 

이번 섹션에서 여러분은 수직 스택(vertical stack) 을 사용하여 타이틀을 (공원에 대한 디테일한 정보를 포함하고 있는) 수평 스택(Horizontal stack) 위에 위치시켜보도록 하겠습니다.

 

(텍스트로는 잘 안다가오나요? 바로 아래와 같이 만들어보는 것을 목표로 하겠습니다)

 

Let's get it !

Step 1.

 - 텍스트 뷰의 이니셜라이저를 popover 스타일의 편집창을 보여지기 위해서 "Command + Click" 합니다.

 - 그리고 "Embed in VStack" 을 클릭하세요.

 * 여담으로 업데이트 전 Xcode 에서 'Command + Click' 을 하면 이렇게 나왔지요~

 

 

다음으로 여러분은 라이브러리로부터 'Text' 라는 뷰를 드래깅 함으로서 스택(stack)에 텍스트 뷰를 추가할 것입니다.

 

 

Step 2.

 - '+' 플러스 버튼을 클릭해서 라이브러리를 오픈합니다. Xcode 윈도우의 상단 오른쪽에 있어요.

 - 그리고 'Text' 뷰(사진에서 음영으로 표시된 부분)를 여러분의 코드 내 위치로 드래그를 해줍니다. "Turtle Rock" 텍스트 뷰 바로 다음이죠.

 

Step 3.

 - 'Text' 뷰의 placeholder text 를 "Joshua Tree National Park" 로 대체합니다.

 

원하는 레이아웃과 일치시키기 위해서 위치를 커스터마이징하겠습니다.

 

Step 4.

 - 다음의 사진과 같이 ".subheadline" 을 설정해주세요. 

 

Step 5.

 - VStack 이니셜라이저에 정렬(alignment) 속성으로서 ".leading" 속성을 주도록 편집해보세요.

  * 기본적으로 스택은 스택의 축에 맞춰서 스택의 내용(Content)의 중심을 맞추며 문맥에 맞춰 적절한 간격(Spacing)을 제공합니다. (+ ".leading" 속성을 주었더니 전체적으로 글자가 왼쪽으로 쏠린 것 보이시죠?)

 

다음으로, 또 다른 텍스트 뷰를 위치의 오른편에 추가할 것입니다. 이 뷰는 공원의 소유 주(state)에 관한 내용입니다.

 

Step 6.

 - 캔버스 내에서 "Joshua Tree National Park" 를 "Command + Click" 하고 "Embed in HStack" 을 선택한다.

    (이 말은 로케이션(조슈아 트리 국립 공원)과 수평으로 스택을 만들겠다는 이야기입니다)

 

Step 7.

 - 새로운 텍스트 뷰를 다음 사진의 위치처럼 추가해주시고(아까 + 눌러서 추가했던 것처럼), placeholder text를 공원의 state 로(사진에서는 California) 변경합니다.

 - 그리고 폰트에 ".subheadline" 을 설정하세요.

 

Step 8.

 - 디바이스의 전체 너비(full width)를 사용하기 위해 레이아웃을 지정하려면, 공원(park=Joshua...)과 주(state = California)를 두 개의 텍스트 뷰를 가진 수평 스택(Horizontal stack)에 "Spacer()" 를 추가해줘서 분리시킵니다.

  * "Spacer" 라는 애는 (자신이 가진 컨텐츠에 의해서만 오직 정의되는) 자신만의 사이즈를 가지는 대신, 부모 뷰의 모든 공간을 사용하는 자신을 포함하는 뷰를 만들기 위해 확장합니다. (쉽게 얘기하면 사이즈가 컨텐츠 기준이 아닌 부모 뷰가 기준 !)

 

Step 9.

 - 마지막으로, "padding()" 수정자(modifier) 메서드를 사용하여 랜드마크의 이름(Landmark's name = Turtle Rock)과 세부적 내용(detail = Joshua .. & California)에게 약간의 숨실 공간(양 쪽 끝에 생긴 공백을 말하겠죠?) 을 주도록 합니다.

 

좋습니다. 스택을 활용하여 뷰를 구성하는 방법을 마스터했어요 !

다음은 커스텀 이미지 뷰를 생성해보도록 하겠습니다. 애플 튜토리얼이 매우 친절하네요 :)

 

 

 

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

 

이름과 위치에 대한 뷰를 모두 설정했으니, 다음 해야 할 것은 랜드마크를 위한 이미지를 추가하는 것이죠!!!

이 파일에 추가적인 코드를 더하는 대신, 이미지에 mask, border, drop shadow 와 같은 효과를 적용하는 커스텀 뷰를 생성할 거에요.

 

 

프로젝트의 Asset catalog 에 이미지를 추가하면서 시작하죠.

 

Step 1.

 - 프로젝트 파일 Resources 폴더 내에 있는 'turtlerock.png' 를 찾아 asset catalog's editor 로 그것을 드래그합니다.

 - Xcode 는 이 이미지에 대한 새로운 image set 을 생성합니다.

 

다음은, 새로운 SwiftUI 뷰를 여러분에 커스텀 이미지 뷰(Custom Image View)를 위해 생성할 것입니다.

 

Step 2.

 - 'File > New > File' 을 선택하여 템플릿 셀렉터(template selector)를 다시 오픈합니다.

 - 'User Interface' 섹션에서 'SwfitUI View' 를 선택하기 위해 클릭하고 'Next' 클릭하세용

 - 'CircleImage.swift' 라 이름 붙여주시고 'Create' 를 클릭합니다.

 

여러분은 이미지를 삽입하고 원하는 디자인과 일치시키기 위해 이미지가 표시되는 것을 수정도 할 준비가 되었어요.

 

Step 3.

 - 텍스트 뷰를 Turtle Rock 이미지로 'Image(_:)' 이니셜라이저를 사용하여 대체해주세용.

 

Step 4.

 - '.clipShape(Circle())' 이란 호출(a call) 을 이미지에 둥근 모양을 적용하기 위해 추가해주세요.

  * (기존에서는 cornerRadius 와 clipToBounds 속성을 이용했던 것으로 기억합니다..)

 - The 'Circle' type is a shape that you can use as a mask, or as a view by giving the circle a stroke or fill.

 

Step 5.

 - 또 다른 회색 획(gray stroke)을 가지는 원을 만드세요.

 * 획(stroke) : 글씨나 붓으로 선을 긋는 행위를 말합니다. 여기서는 다음의 사진처럼 회색 부분을 선으로 그엇다고 보시면 되겠슴다.

 - 그리고 그것을 오버레이(overlay)로서 이미지에 테두리를 만들기 위해 추가합니다.

 * 오버레이(overlay) : 입히는 것을 뜻합니다.

 

 

Step 6.

 - 다음으로 10 포인트의 radius 를 가지는 shadow 효과를 추가합니다. (쉽게 쉐도우 효과라고 칩시다 !)

 

Step 7.

 - 외곽 선의 색을 화이트로 변경합니다.

 - 이제 이것은 완전한 이미지 뷰가 되었어요 :)

 

 

휴.. 섹션 3,4 가 생각보다 시간을 오래 잡아먹었네요. (모르는 영어 단어 ㅂㄷㅂㄷ)

다음 시간에 섹션 5부터 이어서 알아보겠습니다.