[iOS 오토레이아웃 Views with Intrinsic Content Size] Simple Label and Text Field

[iOS 오토레이아웃 Views with Intrinsic Content Size] Simple Label and Text Field

from apple auto layout guide

간단하게 label과 text field로 hugging priority와 compression resistance를 알아보겠습니다.

1. 뷰컨트롤러에 label과 text field를 가져와서 아래처럼 제약조건을 걸어줍니다.

* (1,2번) safe area에는 margin이 없기 때문에 +8 을 해줍니다.

* 3번의 standard는 애플에서 지정한 뷰끼리의 표준간격(?)이라고 보시면 됩니다. 

* baseline은 text를 기반으로 한 label이나 textField에 있는 기준선이라고 보시면 됩니다. 이 기준선은 text를 기준으로 합니다.

first base line

1. Name Label.Leading = Safe Area.Leading + 8

2. Name Text Field.Trailing = Safe Area.Trailing + 8

3. Name Text Field.Leading = Name Label.Trailing + Standard

4. Name Text Field.Top = Safe Area.top + 20

5. Name label.firstBaseline = Name Text Field.firstBaseline

2 기본적인 CHCR(hugging, compression resistance)입니다.

Name	Horizontal hugging	Vertical hugging	Horizontal resistance	Vertical resistance
Name Label	251	251	750	750
Name Text Field	250	250	750	750

3 기본적으로 autolayout도 frame based layout에 기반을 두고 있습니다. 즉. 뷰의  x,y,width,height가 명확히 제시 돼야 합니다. 위 제약조건들을 보면 두 뷰의 x,y는 명확하지만 width와 height는 알 수 없습니다. 그래도 오류가 나지 않는 것은 두 뷰의 intrinsic content size와 CHCR때문입니다. 일단 간단한 height를 먼저 보면 각각의 text 크기를 표현하기 위한 최소한의 높이를 두고 있습니다. 이를 intrinsic content size, 고유사이즈라고 하면 아름답게 보이기 위해서 apple에서 지정한 것입니다. 그리고 label보다는 textfield의 height가 조금 더 높기 때문에 4번 처럼 제약조건을 준 것입니다. 이러한 이유로 height를 주지 않아도 됩니다.

그리고 width를 글자수와 관련있습니다. width의 intrinsic content size는 글자수에 따라 달라지기 때문입니다. 글자수가 늘어나면 width로 자연스럽게 늘어납니다. label을 보면 'Name'이라는 글자를 표현하기 좋은 width만 가지고 있습니다. 그렇다면 text field는 place holder text 이상으로 width가 늘어난 걸까요? 이는 hugging priority랑 관련이 있습니다. 제약조건에서 따로 label과 textfield에 width를 주지 않았기 때문에 superview width영역을 가득 채우게 됩니다. 즉, 

superview.width = 1번의 간격 8 + label.width + 3번의 간격 standard + textfield.width+ 2번의 간격 8

여기서 1,3,5은 고정이고 나머지 영역을 label.widtdh와 textfield.width가 채워야 합니다. 즉 두 뷰의 width를 늘려야 합니다. 이때 작용하는 속성이 hugging priority입니다. 위 표에서 보면 label이 251 textefield가 250입니다. hugging prirority는 최대값 같이 작용합니다. 즉, 뷰가 늘어날 때 intrinsic content size을 지키려는 힘이라고 생각하면 됩니다. label이 1만큼 크기 때문에 label은 'Name'을 표시할 수 있는 크기만 가지고 나머지 영역은 textfield가 채우게 됩니다. 

지금까지는 영역이 여유가 있는 상황이었습니다. 반대로 영역이 부족할 때를 한 번 보겠습니다. label과 textfield에 text를 가득 채우겠습니다. 그러면 아래와 같이 오류가 납니다.

상황을 먼저보면 label과 textfield에 text를 채워서 intrinsic content size가 늘어난 상황입니다. 현재 영역에서는 다 표시하기에 너비가 너무 넓어져서 줄여야 합니다. 이 때 작용하는 속성이 compression resistance입니다. 이것은 최소값 같이 작용합니다. 작, 뷰가 줄어들 때 intrinsic content size을 지키려는 힘이라고 생각하면 됩니다. 줄어둘 수 있는 것은 간격 3개와 label, textfield의 width입니다. 3개의 간격은 우선순위가 1000이기 때문에 고정이고, label과 textfield의 compression resistance는 750입니다. 따라서 우선순위가 낮은 것을 조정해야 하는데 2개의 뷰가 똑같은 compression resistance를 가지고 있기 때문에 오류가 나는 것입니다. 어느 것을 줄여야 할 지 모르는 것이죠. 그래서 아래 표처럼 바꿔주면 경고는 사라지고 label의 추가된 text를 온전히 다 표시되고 textfield가 줄었습니다.

Name	Horizontal hugging	Vertical hugging	Horizontal resistance	Vertical resistance
Name Label	251	251	751	751
Name Text Field	250	250	750	750

label 750 / text field 749 이렇게 하면 됩니다. 또는 text field의 text를 온전히 표시하고 싶으시면 textfield의 크기를 label보다 높게 해주면 됩니다.