[Raywenderlich] UIStackView 튜토리얼. (UIStackView Tutorial: Introducing Stack Views)

런타임에 뷰를 추가/삭제하는 상황을 생각해봅시다. 물론 추가/삭제된 뷰와 근처에 있던 뷰들의 위치도 잘 잡아주어야 합니다.

어떤 방법이 있을까요? 스토리보드에 새로운 뷰와 관련된 Constraint Outlet을 추가하고 active를 on/off 하면 될까요? 아니면 오픈소스? 

직접 코드로 구현할 수도 있겠네요.

이 경우 View Hierarchy가 변하는 것은 아니지만 어떻게든 새로운 뷰를 스토리보드에 넣으려면 많은 고민이 들겁니다.

뷰를 추가/삭제할 때마다 모든 Constraints를 제거하고 새로운 Constraints를 추가하는 방법을 떠올릴 수 있겠네요. 이게 기존 Constraints를 수정하는것보다 쉽긴 하죠.

하지만 UIStackView가 있다면, 위 작업이 꽤나 간단해집니다. 스택뷰를 사용하면 Horizontally/Vertically로 놓여진 뷰를 핸들링하기 편합니다.

UIStackView의 alignment, distribution, spacing 등 몇 개의 프로퍼티 값만 세팅해주면 자기가 알아서 뚝딱뚝딱 해주거든요.

Note : 해당 포스트는 오토 레이아웃에 대한 배경지식이이 필요합니다. 오토 레이아웃에 대한 글은 [Auto Layout Tutorial Part 1]를 참고하세요.

---

Getting Started

이번 튜토리얼에서는 Vacation Spots라는 앱으로 작업을 할텐데요. 관광지에 대한 정보를 보여주는 앱입니다.

Starter Project에서 프로젝트를 다운을 받아주세요. 그리고 iPhone6 시뮬레이터에서 작동을 시켜주세요. 앱을 실행하면 아래화면이 나타납니다.

London셀을 눌러서 화면을 이동해봅시다.

별다른 문제 없어보이지만 몇가지 이슈가 있습니다.

1. 앱을 Landscape모드로 돌린 뒤 화면 하단을 보면, 3개의 버튼이 화면 사이즈에 관계 없이 fixed된 값으로 간격을 두고 있습니다. 

(Command - left를 누르면 시뮬레이터가 회전합니다.)

2. WEATHER텍스트 옆에 있는Hide버튼을 눌러보면 컨텐츠가 사라집니다. 하지만 컨텐츠 영역이 Reposition되지 않고 공백상태로 자리만 차지하고 있네요.

3. 섹션의 순서도 개선 해야겠습니다. WHAT TO SEE섹션이 WHY VISIT섹션 바로 아래에 놓이는게 좀 더 보기 좋겠네요. 개선하면 [WHY VISIT] - [WHAT TO SEE] - [WEATHER] - [RATING] 순서가 되겠네요.

4. Landscape모드에서 화면 아래에 있는 세 개의 버튼이 화면 Bottom edge에 좀 붙어있습니다. 섹션 간의 간격을 좀 줄이면 버튼의 Bottom margin이 좀 더 보기좋은 값을 갖을 수 있을 것 같네요.

이제 개선사항이 정리되었으니 작업을 시작해보겠습니다. 프로젝트 파일을 열어주세요.

Main.storyboard파일을 열어서 Spot Info View Controller scene을 열어봅시다.

Label과 Button이 갖고 있는 배경색은 편리한 작업을 위해서 임의로 넣은 것이니 신경쓰지 않으셔도 됩니다. 실제로 런타임에 배경색은 제거됩니다.

중요한 내용은 아니지만 SpotInfoViewController의 viewDidLoad()메소드안에 있는 이 부분이 배경색을 제거하는 부분입니다.

// Clear background colors from labels and buttons for view in backgroundColoredViews { view.backgroundColor = UIColor.clearColor() }

그리고 Label과 Button이 갖고 잇는 placeholder텍스트도 런타임에 모델에 해당하는 값으로 셋팅됩니다. 

현재 스토리보드에 있는 Scene들은 사이즈가 600 x 600으로 셋팅되어 있지 않습니다. 평소에 Size Class를 사용하시는 분들이라면 익숙치 않을 수 있겠네요.

Size Class가 활성화 되어있긴 합니다만 사이즈가 iPhone 4-inch로 설정되어 있습니다. 이렇게 하는게 실제 디바이스 런타임에서의 화면과 비슷해서 셋팅했구요. 디바이스 크기가 달라져도 오토레이아웃으로 화면에 맞게 리사이징 됩니다.

---

Your first stack view

처음으로 스택뷰를 적용해볼 곳은 화면 하단에 있는 세 개의 버튼입니다. 스택뷰를 이용하면 스택뷰 하위에 있는 뷰들의 정렬를 컨트롤 할 수 있습니다. distribution값을 이용해 뷰의 간격을 조정할 수 있는데요. 여러 옵션중 하나인 동일한 뷰 간격을설정해보겠습니다.

스택뷰를 생성은 굉장히 쉽습니다. 먼저 세 개의 버튼을 선택해주세요. 스토리보드의 Spot Info View Controller scene에 있는 세 개의 버튼을 Command-Click을 통해 선택하시면 됩니다.

아, 그리고 Outline view메뉴가 열려있지 않다면 Show Document Outline버튼을 눌러서 열어주세요.

Outline view에 세 개의 버튼이 다 선택되어 있나요?

선택되어 있지 않다면 Outline view에서도 Command-Click을 통해 선택할 수 있습니다. 세 버튼 모두 선택해주세요.

선택했다면 스토리보드 캔버스 하단에 있는 메뉴바 중 Stack버튼을 눌러주세요.

이제 세 버튼이 하나의 스택뷰에 포함(embedded)되었습니다.

세 버튼이 모두 다닥다닥붙어있는데요. 간단히 수정해보겠습니다.

현재 상황을 정리해보면 스택뷰라는 뷰가 생겼고, 그 안에 세 개의 버튼이 위치하고 있습니다. 그럼 세 버튼의 위치는 스택뷰가 잡아주면 되는데. 스택뷰 자체에는 아직 Layout Constraint가 없습니다. 

스택뷰를 생성하면 기존의 뷰에 있던 모든 Constraint는 제거됩니다. 실제로 위 작업에서 세 버튼과 관련된 Constraint는 모두 제거 되었습니다. 스택뷰를 만들기 전에는 아래처럼 Submit Rating버튼과 RATING라벨의 간격에 대한 Constraint가 있었습니다.

하지만 스택뷰를 만든 뒤에 어떻게 되었죠? 네. 맞습니다. Constraint가 사라졌습니다.

Size inspector(⌥⌘5)를 살펴봐도 Constraint를 확인할 수 있는데, 보시다시피 어떤 Constraint도 추가되어 있지 않네요.

그래서 스택뷰를 만든 뒤에는 스택뷰에 대한 Constraint를 설정해주어야 합니다.

스택뷰에 Constraint를 추가하기 위해서는 먼저 스택뷰를 선택해야겠죠. 스토리보드에서 스택뷰를 선택하는 방법은 여러가지가 존재합니다. 

제일 간단한 방법이 Outline view에서 스택뷰를 선택하는 것이구요.

아니면 scene에 있는 스택뷰에서 Shift - Right Click을 하는 것입니다. 스택뷰위에 커서를 두고 Shift-Right Click을 하면 아래와 같이 선택한 뷰에 해당하는 Hierarchy가 나타납니다. 여기서 스택뷰를 선택하면 됩니다.

스택뷰를 선택하셨다면 Pin버튼을 눌러서 Constraint를 추가합니다.

Constrain to margins에 체크를 해주시고 아래 값을 Constraints to edge에 입력해 줍니다.

Top: 20, Leading: 0, Trailing: 0, Bottom: 0

아래 사진처럼 값이 입력되었고 I자 막대기(빨간색)이 실선으로 표시되었는지 확인하셨다면, Add 4 Constraints 버튼을 눌러주세요.

이제 스택뷰의 위치가 잡혔습니다. 하지만 첫 번째 버튼(Submit Rating)이 혼자서 여백공간을 잡아먹고 있네요. 이제 버튼의 위치를 조정해봅시다.

스택뷰가 하위 뷰들을 어떻게 배치할 것인지는 distribution이라는 프로퍼티가 결정합니다. 현재는 Fill로 셋팅되어 있습니다. 정렬방향을 따라 하위뷰로 꽉 채운다는 뜻인데요. 위를 보면 스택뷰의 길이만큼 하위뷰가 꽉 채우고 있죠? 

이 경우에는 첫 번째 뷰가 모든 여백을 잡아먹게 됩니다. 뷰의 content hugging priority가 다른 경우엔 priority가 가장 낮은 뷰가 차지하겠지만 동일한 priority를 갖는다면 첫 번째 뷰가 차지하게 됩니다.

버튼의 배치에도 수정이 필요해보입니다. 세 버튼 모두 같은 여백을 갖도록 수정해보겠습니다. 

스택뷰를 선택한 채로, Attributes inspector로 이동한 뒤 Distribution의 값을 Fill에서 Equal Spacing으로 수정해주세요.

이 상태로 앱을 실행해보겠습니다. 이제 화면을 돌려도 버튼이 적절하게 배치가 잘 되네요.

이 버튼의 레이아웃을 스택뷰를 사용하지 않고 작업해야 했다면, 이런 방법을 생각해볼 수 있습니다. 버튼 사이에 여백을 담당하는 뷰를 만들어 [버튼]-[여백뷰]-[버튼]-[여백뷰]-[버튼] 이런 형태로 만들 수 있겠습니다(아래 그림참조). 그리고 여백뷰에 동일한 width constraint를 추가해주면 되겠죠. 하지만 이 작업엔 고려해야할 Constraint가 너무 많습니다.

알아보기 쉽게 여백뷰를 회색 바탕으로 나타내보았습니다. 

사실 스토리보드에서 이 작업을 해주는건 어려운일이 아닙니다. 하지만 뷰가 Dynamic하다면 굉장히 피곤해지겠죠. 일일이 constraint를 지정한 뷰들 사이에 새로운 뷰를,, 것도 런타임에 넣고 빼는 작업은 생각만해도 아찔하네요.

동일한 작업을 스택뷰로 한다면, 뷰를 넣고 빼는 일은 UIView의 hidden프로퍼티 하나만으로 모든게 해결됩니다. 실제로 아래에서 WEATHER섹션의 Hide기능을 이렇게 구현할 예정입니다.

---

Converting the sections

1번 과제를 해결했으니 넘어가보죠. 

남은 3가지 개선사항을 마무리하기 위해 SpotInfoViewController에 있는 다른 섹션들도 모두 스택뷰로 변경하겠습니다. 

Rating section을 먼저 수정하겠습니다.

Rating section

Rating section에는 RATING라벨과 별점을 나타내는 라벨이 있습니다.

두 라벨을 선택하여 Stack버튼을 눌러주세요.

Pin버튼을 눌러 아래와 같이 3개의 Constraints를 설정해주세요. Constrain to margins에도 꼭 체크를 해주세요.

Top: 20, Leading: 0, Bottom: 20

이제 Attributes inspector에서 spacing 값을 8로 셋팅해줍니다.

셋팅을 완료하면 아래처럼 Misplaces Views warning이 뜨거나 별점 라벨이 superview의 끝까지 뻗어있을 수가 있는데요. 

XCode에서 일시적으로 발생한 warning이니 무시해도 됩니다. 다른 작업을 진행하면 이 warning도 사라질겁니다.

그래도 무시하기 찝찝해서 바로 고쳐야겠다 하시면, 스택뷰의 frame을 살짝 건드려주면 해결됩니다. 스택뷰의 Alignment속성이 Fill로 되어 있을텐데, Top으로 바꾸었다가 다시 Fill로 설정해보세요. 아래처럼 정상적으로 표시되죠?

여기까지 작업내용을 빌드해서 돌려보면, 뭐 이전과 똑같을 겁니다.

Unembedding a stack view

이쯤에서 스택뷰를 해제하는 법에 대해서 설명해야겠네요. 요번 튜토리얼에서 사용하진 않을 거지만 알아두셔야할 내용입니다.

작업을 하다보면 구조변경, 리팩토링 등등의 이유로 더 이상 스택뷰가 필요없다고 생각할 수 있습니다. 이 때 스택뷰를 해제해주어야 할텐데 아주 간단합니다.

제거하려는 스택뷰를 선택한 뒤, Option키를 누른 채 Stack버튼을 눌러보세요. 그러면 아래화면이 나타날텐데, Unembed버튼을 눌러주면 스택뷰가 제거됩니다.

Your first vertical stack view

위에서 작업한 스택뷰는 모두 Horizontal이었죠? 이제 vertical 스택뷰를 만들어 보겠습니다. WHY VISIT라벨과 <whyVisitLabel>라벨을 선택해주세요.

Stack버튼을 눌러주세요. Vertical스택으로 할 지, Horizontal스택으로 할 지는 뷰의 위치에 따라 XCode가 알아서 결정해줍니다.

스택뷰를 만들기 전에 <whyVisitLabel>라벨은 superview의 오른쪽 끝까지 Stretch되어 있었습니다. 하지만 위에서 보셨다시피 기존의 뷰가 갖고있던 모든 Constraints는 스택뷰의 생성과 동시에 제거됩니다. 또한 스택뷰에도 어떤 Constraints도 없는 상태입니다. 이 때 스택뷰의 초기 width는 하위뷰의 width값 중 가장 큰 값을 갖게 됩니다.

스택뷰를 선택하여 Pin버튼을 눌러 Constraints를 설정해 줍니다. Constrain to margins를 체크하고 Top, Leading, Trailing을 0으로 설정해줍니다. 그리고 Bottom 설정은 아래화면과 같이 화살표를 클릭하여 WEATHER(current distance = 20)으로 설정해주세요. (19.xxxxx일 수도 있어요. 제가 그랬네요)

저 추천 Constraint는 가장 가까운 뷰를 우선으로 보여주기 때문에 디폴트로 Hide버튼으로 체크되어 있지만, 우리는 WEATHER 라벨과의 Constraint가 필요하기 때문에 바꿔준겁니다.

그럼 Add 4 Constraints를 클릭해주세요. 아래 화면처럼 나타날겁니다.

이제 스택뷰가 superview의 오른쪽끝에 pinning되었네요. 하지만 <whyVisitLabel>은 여전히 짧은상태입니다. 이 라벨도 스택뷰와 같은 width로 만들어 주고 싶네요.

alignment프로퍼티를 통해 해결해보겠습니다.

Alignment property

alignment프로퍼티는 스택뷰가 하위뷰들을 어떻게 정렬할 것인지를 결정합니다. Vertical스택뷰의 경우에는 Fill, Leading, Center, Trailing 총 4개의 값을 갖을 수 있습니다.

Horizontal스택뷰의 경우에는 조금 다릅니다.

Horizontal스택뷰는 Top대신 Leading을, Bottom대신 Trailing을 갖고 있네요. 그리고 FirstBaseline과 LastBaseline이라는 값도 추가로 갖고 있습니다.

그럼 Vertical 스택뷰의 alignment값에 따른 정렬방식을 화면을 통해서 살펴보겠습니다.

Fill

Lading

Center

Trailing

저희는 Fill을 사용하도록 하겠습니다. alignment값을 다 테스트해보셨다면 Fill로 설정해주세요~!

Fill은 스택뷰의 하위뷰를 스택뷰의 길이만큼 꽉 채워서 사용하겠다는 뜻입니다. 그래서 저희가 원하던 대로 <whyVisitLabel>의 width가 길어지게 되었죠. 

하지만 계산에 없었던 WHY VISIT라벨도 길어졌네요. 그럼 어떻게 해야할까요?

우선 WHY VISIT 섹션에서는 그냥 길어진 상태로 남겨두겠습니다. 사실 좀 길어도 상관 없거든요.

하지만 WEATHER섹션에서는 얘기가 달라집니다. Hide버튼 때문인데요. 어떻게 이 문제를 해결해야할까요? WHAT TO SEE 섹션을 살펴본 뒤 WEATHER섹션에서 해결해보도록 하겠습니다.

Convert the "what to see" section

WHAT TO SEE 섹션은 WHY VISIT섹션과 거의 동일합니다. 따라서 간단하게만 짚고 넘어가겠습니다.

1. WHAT TO SEE라벨과 <whatToSeeLabel>라벨을 선택해주세요.

2. Stack버튼을 눌러주세요.

3. Pin버튼을 눌러주세요.

4. Constrain to margins를 체크한 뒤 아래 Constraints값을 넣어주세요.

Top: 20, Leading: 0, Trailing: 0, Bottom: 20

5. Alignment프로퍼티는 Fill로 설정해주세요.

이 작업을 다 하셨다면 스토리보드에는 아래와 같이 나타나야 합니다.

이쯤에서 빌드하여 실행해봐도, 달라진게 없습니다.

이제 WEATHER 섹션만 남았습니다. 고고~

---

Convert the weather section

WEATHER섹션은 다른섹션보다 복잡합니다. 보시다시피 Hide버튼때문인데요.

WEATHER라벨, <weatherInfoLabel>라벨, Hide버튼. 총 3개의 뷰를 스택뷰에 넣어야 하는데요. 이런 방법을 생각해볼 수 있습니다.

WEATHER라벨과 Hide버튼을 Horizontal 스택뷰로 만들고, 이 스택뷰와 <weatherInfoLabel>라벨을 Vertical 스택뷰로 만드는 것입니다.

이 작업을 하면 아래와 같이 나타나겠네요.

위 화면을 보시면 WEATHER라벨의 height가 늘어난 것을 확인할 수 있습니다. Hide버튼의 height에 맞춰 늘어난건데요. 이렇게 되면 WEATHER라벨과 <weatherInfoLabel>라벨 사이에 공백이 생기기 때문에 수정이 필요해 보입니다. 

위에서 알아보았던 alignment프로퍼티를 통해 수정할 수 있습니다. 이 값을 Bottom으로 설정하면 아래화면처럼 변경될 겁니다.

그런데 Hide버튼이 스택뷰의 height를 좌지우지하는게 정말 거슬리네요. 쟤가 얼마나 길어질지 누가 압니까..  그래서 Hide버튼을 스택뷰에서 제거하려 합니다.

WEATHER라벨과 <weatherInfoLabel>라벨만 스택뷰로 만들고, Hide버튼은 WEATHER라벨과의 Constraint를 통해서 위치를 잡도록 하겠습니다.

WEATHER섹션에서 작업한 스택뷰를 다시 원래상태대로 되돌리겠습니다. Command-z버튼을 통해서 원복하시거나, 스택뷰를 Unembed해주세요. (통수 죄송합니다. 원본글도 통수ㅜㅜ)

WEATHER라벨과 <weatherInfoLabel>라벨을 선택해주세요.

Stack버튼을 눌러주세요.

Pin버튼을 눌러 Constrain to margins를 체크한 뒤 아래 Constraints값을 입력해 주세요.

Top: 20, Leading: 0, Trailing: 0, Bottom: 20

Alignment는 Fill로 셋팅을 해주시구요.

이제 Hide버튼과 WEATHER라벨의 Constraint를 설정할 차례입니다. Hide버튼을 WEATHER라벨 오른쪽에 붙여야하는데, WEATHER라벨이 스택뷰를 꽉채우고 있기 때문에 WEATHER라벨의 width를 줄여야 합니다. 그런데 <weatherInfoLabel>라벨의 width는 줄이면 안되겠죠..

하나의 스택뷰에 있는 2개의 뷰가 1개는 Fill효과를, 1개는 Left효과를 가져야 한다는 결론이 나오네요. 어떻게 해결해야할까요?

이 문제는 WEATHER라벨을 Vertical 스택뷰로 만들어 해결할 수 있습니다.

Vertical 스택뷰의 alignment속성인 Leading을 사용하면 가능할 것 같네요.

Document outline에서 WEATHER라벨을 선택하거나 Scene에서 Control-Shift-click을 통해 WEATHER라벨을 선택해줍니다.

Stack버튼을 클릭해주세요.

Alignment를 Leading으로 바꿔주세요. Stack뷰가 Vertical로 설정되어 있는지 꼭 확인해주세요!

바깥에 있는 스택뷰는 Fill속성을 갖기 때문에 하위에 있는 2개의 뷰. [WEATHER를 담은 스택뷰], <weatherInfoLabel>라벨 2개의 width가 stretch된 상태입니다.

그리고 안에 있는 스택뷰. 즉 WEATHER라벨이 담겨있는 스택뷰는 Leading속성을 갖기 때문에, 이 스택뷰 자체의 width는 길지만 하위뷰인 WEATHER라벨의 width는 텍스트영역만큼만 차지하게 됩니다.

여기서 빌드한 뒤 실행하면 아래화면과 같이 나타납니다. Hide버튼의 위치가 아직 잡히지 않았네요.

WEATHER라벨을 스택뷰로 만들면서 Hide버튼에 걸려있던 Constraint가 모두 사라졌기 때문인데요. 다시 Constraint를 설정해줍시다.

Hide버튼을 Control-drag하여 WEATHER라벨로 드래그해줍니다.

Shift버튼을 누른채로 Horizontal Spacing과 Baseline을 체크한 뒤 Add Constraints를 눌러줍니다. (Shift버튼을 누른 뒤 옵션을 선택하면 한 번에 여러 옵션을 선택할 수 있습니다.)

다시 앱을 빌드하여 실행해보면 Hide버튼이 제 위치를 잡은걸 확인할 수 있습니다. 그리고 Hide버튼을 누르면 상세텍스트가 사라지고 그 아래 공간도 알아서 채워짐을 확인할 수 있습니다. 이와 관련된 오토레이아웃 설정을 따로 한것이 아님에도 말이죠.

 

이제 각 섹션이 독립적인 스택뷰로 구현되었습니다. 다음은 이 스택뷰들을 묶어 상위 스택뷰로 관리하는 방법을 소개합니다. (유용함 주의)

Top-level stack view

Command-click을 통해 5개의 스택뷰를 모두 선택해주세요.

Stack버튼을 눌러주세요.

Pin버튼을 눌러 Constrain to margins를 체크한 뒤 모든 edge를 0으로 설정해주세요. 스택뷰의 Spacing은 20으로, Alignment는 Fill로 설정해주세요.

빌드하여 실행해보면 아래와 같이 나타납니다.

WEATHER스택뷰가 다시 스택뷰로 포함되면서 Hide버튼의 Constraint가 또 날아갔습니다.. 위에서 설정한 것처럼 다시 Constraint를 추가해줍시다.

Control-drag로 Hide버튼에서 WEATHER라벨로 드래그 해주세요. Shift키를 누른뒤 Horizontal Spacing과 Baseling을 선택하고 Add Constraints를 눌러줍니다.

빌드하여 실행하면 Hide버튼이 제 자리를 찾을걸 확인할 수 있습니다.

Repositioning views

모든 섹션이 하나의 스택뷰에 포함되었기 때문에, what to see섹션과 weather섹션의 위치를 바꿔보겠습니다.

Outline view에서 중간에 있는 스택뷰를 선택하여 1,2번 스택뷰 사이로 드래그 해줍니다.

이제 weather섹션이 세 번째 섹션이 되었습니다. 하지만 Hide버튼은 스택뷰에 포함된 뷰가 아니기 때문에 자동으로 이동하지 않았네요. 다시 제 위치를 잡아줍시다.

런타임에는 제 위치를 찾아가겠지만 원활한 작업을 위해 Scene에서도 제 자리를 찾아주어야겠죠?

Constraint가 사라진게 아니라 misplaced view warning이니 update frame을 통해 간단히 수정 가능합니다.

Resolve Auto Layout Issues버튼을 눌러 Selected Views섹션에 있는 Update Frames를 눌러주세요.

**** XCode 8점대에서 Update Frames가 바뀌었네요. 이제 버튼이 따로 생겼습니다. 자주쓰는거라 애플에서 따로 뺏나 보네요.

그럼 다시 Hide버튼이 제 위치를 찾았죠?

새로운 뷰를 넣고 빼는 작업을 UIStackView로 해보니 어떠신가요. 꽤 괜찮지 않나요?

Size class based configuration

위 개선사항목록에서 4번을 개선해보겠습니다. Landscape모드에서는 화면의 세로길이가 매우 작기 때문에 섹션간 간격을 좀 조절할 필요가 있습니다.

위에서는 spacing을 20으로 설정해두었죠?

Size클래스를 이용하여 Landscape모드에서는 spacing이 10으로 설정되도록 수정해보겠습니다.

top-level 스택뷰를 선택하여 Spacing 프로퍼티 입력칸 왼쪽에 있는 +버튼을 눌러보세요.

Any Width > Compact Height 를 선택해주세요.

wAny hC 필드에 10을 셋팅해주세요. 세로길이가 짧다면, Spacing이 10으로 설정 될 것입니다.

앱을 빌드하여 실행해보시면, Portrait모드에서는 차이가 없습니다. 하지만 화면을 Rotate하여 Landscape모드로 만들면 아래 사진처럼 섹션간 간격이 줄어들었습니다.

Animation

WEATHER섹션의 내용을 Show/Hide할 때, 애니메이션이 들어간다면 좀 더 좋은 UX를 제공할 수 있습니다.

UIStackView의 애니메이션도 UIView애니메이션 엔진으로 모두 사용가능합니다. 즉, 스택뷰의 hidden프로퍼티를 통해 Show/Hide 애니메이션 효과를 간단히 구현할 수 있습니다. 

이 프로젝트에서 드디어 코드수정을 할 차례가 왔군요..

SpotInfoViewController.swift를 열어 updateWeatherInfoViews(hideWeatherInfo:animated:)메소드를 보겠습니다. 메소드의 마지막즈음 아래와 같은 코드가 있을 겁니다.

weatherInfoLabel.hidden = shouldHideWeatherInfo

이 코드를 아래와 같이 수정해주세요.

if animated { UIView.animateWithDuration(0.3) { self.weatherInfoLabel.hidden = shouldHideWeatherInfo } } else { weatherInfoLabel.hidden = shouldHideWeatherInfo }

수정하셨다면, 앱을 빌드하여 실행해보세요.

Show/Hide효과가 좀 더 나아졌나요?

UIView의 프로퍼티인 hidden뿐만 아니라, UIStackView가 갖는 프로퍼티들(alignment, distribution, spacing, axis)로도 애니메이션이 가능합니다.

출처 : https://www.raywenderlich.com/114552/uistackview-tutorial-introducing-stack-views