Starbucks Caramel Frappuccino
본문 바로가기
  • 그래 그렇게 조금씩
UIKit/AutoLayout

4. Stack Views_ 스택뷰

by Toughie 2023. 3. 25.

잘 활용하면 더욱 간편하게 레이아웃을 잡을 수 있는 스택뷰에 대해 알아보자.

(복잡한 제약을 각각 걸어주기 보다는 내부 프로퍼티를 활용함)

https://developer.apple.com/videos/play/wwdc2015/218/

 

Mysteries of Auto Layout, Part 1 - WWDC15 - Videos - Apple Developer

Auto Layout is a powerful constraint-based layout engine that can drive complex and dynamic interfaces on both iOS and OS X. Learn...

developer.apple.com

 

axis (방향)

(Vertical, Horizontal) - 수직, 수평 _ (SwiftUI에서 VStack, HStack을 떠올려 보자.)

 

distribution: UIStackView.Distribution (사이즈)

- fill

(스택뷰 안에 요소들을 최대한 늘려서 꽉 채움_근데 누가 얼마나 늘어나야 하는가?

-> Hugging Priority가 낮은 애들이 늘어날 것이다.

 

- fillEqually

말 그대로 같은 각 요소들을 같은 사이즈로 채우는 것

 

- fillProportionally

각자의 콘텐츠 사이즈 비율에 맞춰서 채워지는 것

 

- equalSpacing

fill과 비슷하지만, 요소간 간격을 동일하게 가져 가는 것.

 

- equalCentering

각 뷰의 센터를 가르는 선을 그린다 생각하고 그 선끼리 간격이 동일한 것

 

alignment: UIStackView.Alignment (위치)

-fill

스택뷰의 axis의 반대 방향으로 컨텐츠를 꽉 채움

 

-leading

leadingd에 맞춰짐 (고유 컨텐츠 사이즈는 유지)

 

- top

top에 맞춰짐 (고유 컨텐츠 사이즈는 유지)

 

- firstBaseline, lastBaseline

각 요소별 첫번째 텍스트의 첫줄 밑을  맞춰 주는 것 

각 요소별 마지막 텍스트의 마지막 줄의 위치를 맞춰 주는 것

firstBaseline / lastBaseline

-center

말 그대로 스택뷰의 중앙에 맞춰줌

 

-trailing

말 그대로 trailing에 맞춰줌

 

-bottom

말 그대로 bottom에 맞춰줌

 

 

spacing: CGFloat

CGFloat타입으로 스택뷰 안에 뷰들의 간격을 조절

 

[학습 소스]

공식문서, 야곰 오토레이아웃 정복하기 강의

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

https://yagom.net/courses/autolayout/

 

'UIKit > AutoLayout' 카테고리의 다른 글

6. Debugging Auto Layout  (0) 2023.03.26
5. 스택뷰 연습  (0) 2023.03.25
3. Auto Layout - 화면 회전  (0) 2023.03.25
2. Auto Layout_Priority  (0) 2023.03.24
1. Auto Layout - Interface Builder 톺아보기  (0) 2023.03.22