[ios autolayout] simple stackview

[ios autolayout] simple stackview

애플의 Auto layout guide에 나오는 simple stackView를 만들어 보겠습니다.

1 뷰컨트롤러에 수직스택뷰를 놓고 그 안에 차례대로 레이블, 이미지뷰, 버튼을 놓습니다.

2 그리고 스택뷰를 슈퍼뷰에 꽉차게 제약을 걸어줍니다.

그럼 아래와 같이 됩니다

왜 이렇게 됐을까요? 

- 제약 구조를 보면 4개의 각 변들이 safe area에 딱 붙는 걸 볼 수 있습니다.

safeArea는 ios11부터 도입 된 것으로 뷰들이 상태바나 툴바 같은 영역을 침범하는 것을 방지 해줍니다.

- stackView에 Alignment와 Distribution 이 Fill입니다.

Alignment가 fill이면 StackView axis의 수직 방향으로 꽉 채웁니다. 따라서 현재 수직방향이기 때문에 뷰들이 가로로 꽉 채운 모습을 볼 수 있습니다.

또한 Distribution이 Fill입니다. 따라서 각 뷰의 hugging이나 compression resistance를 가지고 axis방향으로 꽉 채우게 됩니다.

이 때 좀 더 자세히 살펴봐야 할 것이 각 뷰들의 hugging과 compression resistance priority입니다. 그 중에서도 hugging priority를 봐야 합니다.

왜냐하면 위 3개의 뷰가 stackView를 꽉 채워야 하기 때문에 뷰가 늘어나야 합니다. 이 때 작용하는 것이 hugging priority입니다. 관련 설명은 아래 글에 있습니다.

2018/07/05 - [iOS] - [ios autolayout ]What is the StackView

그럼 각각의 우선순위를 보겠습니다.

	label	imageView	Button
Vertical hugging priority	251	251	250

현재 뷰가 세로로 늘어나기 때문에 veritcal을 봐야 합니다.

전 글에서도 말했지만 hugging은 뷰가 늘어날 때 고유크기를 유지하려고 하는 속성입니다. 위 표에서 보면 button이 다른 2 개의 뷰보다 작습니다. 따라서

label과 imageView는 고유 크기를 유지하는 반면에 button은 stackView에 나머지 영역을 채울 때까지 늘어나게 됩니다. 따라서 위와 같이 되는 것이죠.

그러면 label과 button은 고유 크기를 유지한 채 imageView가 늘어나게 하려면 imageView에 hugging priority를 249로 가장 낮게 해주면 됩니다.

다음은 imageView에 image를 넣어주고 content mode를 aspect fit으로 합니다

이는 이미지비율 유지한 채 이미지를 이미지뷰에 맞춘다는 의미입니다. 따라서 여백이 생길 수 있습니다

그리고 label을 중앙정렬하고 label과 button text를 바꾸주면 됩니다.

여백이 있습니다. stacview에 각 제약들의 Constant를 16씩 주겠습니다.

마지막으로 뷰가 가로가 됐을 때입니다. 뷰가 가로로 되면 슈퍼뷰의 세로폭이 줄어들기 때문에 자연스럽게 stacview의 세로폭도 줄어듭니다. 이 때는 뷰들의 크기를 줄여야 합니다. 이 때 작용 하는 것은 compression resistance priority입니다 당연히 vertical을 봐야겠죠

	label	imageVIew	button
vertical cs	750	750	750

3개다 똑같기 때문에 어떤 뷰를 줄여야 할 지 알 수 없습니다. 따러서 아래와 같이 경고가 뜨게 됩니다

label과 button은 고유크기를 유지하는 게 좋기 때문에 imageView를 749로 내립니다. 그럼 경고가 사라집니다

label과 button은 뷰가 줄어들 때 고유크기를 지키고자 750을 만큼 노력했고 imageView는 749밖에 노력을 안 했습니다. 따라서 label과 button은 고유 크기를 지켰고 노력이 1 부족한 imageView가 고유크기를 지키지 못 한 채 나머지 영역을 채우기 된 것입니다.

마지막으로 스택뷰의 spacing속성을 standard로 줘서 뷰끼리 너무 딱 붙지 않게 했습니다. standard는 애플에서 추천해주는 값이므로 쓸 수 있으면 쓰는 게 좋다고 생각합니다. 디자인에서는 조너선 아이브가 더 잘 알테니까요

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH11-SW1