[IOS AUTOLAYOUT] Nested Stack Views

[IOS AUTOLAYOUT] Nested Stack Views

from apple auto layout guide document

1. 일단 해당하는 뷰들을 위 사진과 유사하게 위치한다

2 총 7개의 stack view를 가지고 안에서 부터 작게 만든다

2-2 제약사항을 걸어줍니다.

    - root stackview는 root view controller 크기에 맞게 채운다. (약간의 여백)

    - 이미지 뷰는 비율이 1:1 ( 가로 세로 길이가 같게)

    - 3개의 text field에 크기는 같게

 2-3 sack view 속성을 수정해 준다.

Stack	Axis	Alignment	Distribution	Spacing
First Name	Horizontal	First Baseline	Fill	8
Middle Name	Horizontal	First Baseline	Fill	8
Last Name	Horizontal	First Baseline	Fill	8
Name Rows	Vertical	Fill	Fill Equally	8
Upper	Horizontal	Fill	Fill	8
Button	Horizontal	First Baseline	Fill Equally	8
Root	Vertical	Fill	Fill	8

* first base line을 하면 저렇게 각 뷰의 base line을 기준으로 맞춘다.

첫 번째 name row stack과 두 번째, 세 번째의 차이를 보면 알 수 있다.

* 이 정도 만으로도 얼추 비슷하게 됐지만 시뮬에서 보면 엉망이다

 - 이미지 뷰의 크키가 너무 커졌고

- 가로 모드에서는 텍스트뷰가 사라졌다

세로모드가로모드

2 -4 위 문제를 CHCR(content hugging compression resistance) 수정을 통해 결한다.

  - 일단 textView를 제외한 나머지 뷰들은  intrinsic content size 유지하고 나머지 공간을 textView가 차지하게 하고 있습니다  이는 text view에 content hugging 을 다른 뷰보다 낮추면 된다 앞서 simple stack에서 했던 것과 같다

- 그리고 image view 는 Name rows stack view 의 크기와 같아야 합니다. 

여기서 알아야 할게 스택뷰는 자식뷰들을 느슨하게 안고(?) 있다고 한다. 즉 자식뷰들의 intrinsic content size를 최대한 맞춘다고 이해하면 될 것 같다. 근데 문제가 imageview에 intrinsic content size는 image 크기에 달라진다. 따라서 이미지가 커지면 stack view까지 커지는 것이다. 이를 방지해야 한다. 즉 imageview가 intrinsic content size를 지키지 못하도록 compression resistance를 낮처야 한다. 문서에서는 매우 낮게 낮추라고 하면서 48을 제시하고 있다.

( stack view가 image view를 느슨하지만 압박을 하고 있다. 뷰가 압박을 받을 때 intrinsic content size 를 고수하려는 속성이 compression resistance이다 이게 크면 클수록 intrinsic content size를 지키려는 힘이 강하다는 것이다. 반대로 이를 낮추면 intrinsic content size를 키지지 못 한다)

이렇게 하면 image view는 intrinsic content size 고수하지 못 한 채 stacview가 압박 하는 것 만큼 높이가 줄어 든다. 그 크기는 자연스럽게  Name rows stack view의 크기와 같아 진다 (Name rows stack view의 intrinsic content size는 보장이 되므로)

이렇게 하면 될 것 같았지만 문제가 있다. 위에서 image view의 높이가 줄어 준다고 했다. 그런데 image view는 비율이 1:1이다. 따라서 높이가 줄어들면 너비도 줄어 든다

따라서 image view의 Horizontal과 Vertical compression resistnace를 둘다 48로 해야 하는 건 물론이거니와 label과 text field에 CHCR속성도 수정 해줘야 한다.

어떻게 해야 할까? image view의 너비가 줄어 드니까 label과 text field가 늘어날 것이다. 늘어날 때 intrinsic content size를 고수하는 속성은 hugging 이다. label은 intrinsic content size은 고수해야 하고 text field는 그렇지 않으니 text field의 horizontal hugging을 매우 낮춰야 한다. 문서에서는 48이나 더 작게 하라고 한다.

Name	Horizontal hugging	Vertical hugging	Horizontal resistance	Vertical resistance
Image View	250	250	48	48
Text View	250	249	250	250
First, Middle, and Last Name Labels	251	251	750	750
First, Middle, and Last Name Text Fields	48	250	750	750

위와 같이 하면 끝이다.

* 다만 다 했는데도 가끔 스토리보드에서 이상하게 나올 때가 있다. 스토리보드에 오류가 좀 있는 것 같다. Guiding Principles of AutoLayout 5 에도 있지만 시뮬이나 실기기를 믿으라고 한다 시뮬이나 실기기에서 돌려보면 잘 나올 것이다.

스토리보드 오류...