스토리보드로 StackView를 배치하던 도중
Axis, Alignment, Distribution, Spacing 등을 발견했다.
Axis는 Horizontal, Vertical이 있는 걸 봐서 스택뷰 내부의 컨텐츠를 수평으로 배치할 것인지, 수직으로 배치할 것인지 직관적으로 알 수 있었다.
Alignment도 하나하나 눌러보니 감 잡음.
근데 Distribution은 번역하면 분배, 분포 등의 의미를 가졌는데 뭐지??
https://developer.apple.com/documentation/uikit/uistackview/distribution
UIStackView.Distribution | Apple Developer Documentation
The layout that defines the size and position of the arranged views along the stack view’s axis.
developer.apple.com
스택뷰 내부 컨텐츠(뷰)의 위치와 사이즈를 설정하는 레이아웃이라고 한다.
레이아웃의 종류는
fill, fillEqually, fillProportionally, equalSpacing, equalCentering 5가지가 있다.
fill
compression resistance priority, hugging priority 등 우선순위에 따라 스택뷰를 꽉 채운다.
https://may1coding.tistory.com/54
UIKit ;; hugging priority, compression resistance priority (+Intrinsic Size)
Hugging Priority와 Compression Resistance Priority StackView의 Distribution.fill 의 설명에서 내부 컨텐츠들을 스택뷰에 채우는데, Hugging Priority와 Compression Resistance Priority에 기반한다고 했다. 따라서 Hugging Priority
may1coding.tistory.com
실습 >
distribution의 default값이 fill로 설정되어 있기 때문에
컨텐츠(뷰) 하나를 배치하는 경우 스택뷰에 꽉 차게 배치된다.
컨텐츠 하나를 추가해봤더니 스택뷰의 width에 꽉 차게 배치되는 것을 볼 수 있다.
fillEqually
: 내부 컨텐츠들이 모두 동일한 크기를 가지도록 스택뷰를 채운다.
실습 >
(컨텐츠 1개)
컨텐츠 하나를 배치했더니 fill과 동일하게 stackview의 width에 꽉 차게 배치된다.
(컨텐츠 2개)
컨텐츠 하나를 더 추가해봤더니 fill과 달리 button과 switch가 같은 크기의 공간을 차지하면서 배치된다.
switch 자체의 크기는 버튼처럼 늘어나지 않은 것으로 보아 고정된 크기인 듯 하다.
(컨텐츠 3개)
컨텐츠 하나를 더 추가해봤더니 1:1:1 의 공간을 차지하고 있는 것을 볼 수 있다.
fillProportionally
: 내부 컨텐츠들의 고유 크기를 유지하면서 스택뷰를 채운다.
실습 >
(컨텐츠 1개)
(컨텐츠 2개)
버튼 고유의 크기보다 switch의 고유 크기가 좀 더 작은 것을 확인할 수 있다.
(컨텐츠 3개)
각 컨텐츠들의 고유 크기를 유지하면서 스택뷰의 크기를 채운다.
equalSpacing
: 내부 컨텐츠 사이 공간(spacing)이 모두 동일하게 스택뷰를 채운다.
실습 >
(컨텐츠 2개)
(컨텐츠 3개)
각 컨텐츠 사이의 spacing이 동일한 것을 확인할 수 있다.
equalCentering
: 내부 컨텐츠들의 y축(horizontal stack일 경우)과의 사이가 동일하도록 스택뷰를 채운다.
실습 >
(컨텐츠 2개)
컨텐츠 2개로는 EquallySpacing과 차이를 확인할 수 없다.
(컨텐츠 3개)
EquallySpacing과 차이를 확인할 수 있다. spacing이 아닌 각 컨텐츠들의 y축으로부터의 간격이 모두 같다.
'iOS > UIKit' 카테고리의 다른 글
| UIKit ;; Core Data (1) 정의와 Core Data Stack (0) | 2023.04.07 |
|---|---|
| UIKit ;; hugging priority, compression resistance priority (+Intrinsic Size) (0) | 2023.03.10 |
| UIKit ;; Mapkit으로 지도에 현 위치 표시하기 4탄 (위도, 경도 값을 주소로 변환하기) (0) | 2022.11.13 |
| UIKit ;; Mapkit으로 지도에 현 위치 표시하기 3탄 (지도의 위도, 경도 값 받아오기) (0) | 2022.11.13 |
| UIKit ;; Mapkit으로 지도에 현 위치 표시하기 2탄 (유저 현위치 띄우기) (0) | 2022.11.13 |