[iOS] AutoLayout을 이해해 봅시다.

뭐 아직도 AutoResizing을 이용하여서 개발을 하는 사람들도 있겠지만 이제는 AutoLayout이 거의 기본이라 생각이 듭니다.

그렇지만 자신이 하지 않던 방식이라고 학습을 하지 않는 개발자들 때문에 오토레이아웃을 하여 놓고도 골치를 겪게 되죠...

그래서 제대로 알았으면 싶어서 이 글을 한번 적어볼까 합니다.

1. 문제의 발단

아주 쉬운데 왜 그렇게 어렵게 생각하는걸까요?

주변의 이야기를 들어보면 솔찍히 어려운것도 어려운것이지만 알고 나도 귀찮아서 안한다고 합니다.

왜냐면 그냥 이번 프로젝트 지나면 이 레이아웃을 고칠 일도 없는 SI업무를 많이 하니까요.

그렇다면 다음에 오는 분은 유지보수를 하면서 다시 만드시면 되죠 ㅋㅋ

이걸로 인하여 다들 서로 수명을 줄여주고 계신겁니다.

2. 제대로 하려면 어떤 생각을 해야하나?

저는 그냥 아주 단순하게 생각했습니다.

안드로이드 xml레이아웃을 짜는것처럼 생각하는겁니다.

안드로이드 개발을 안하신 분들에게는 죄송하지만 RelativeLayout을 이렇게 우리는 개발을 하고 있었습니다.

아주 쉽고 아주 직관적이죠. 그렇지 않나요? ㅎㅎ

3. 그럼 개념들을 알아봅시다

1) instrinsicContentSize

- UILabel, UIButton, UIImageView 등은 width, height를 지정하지 않아도 자신들이 알아서 크기를 가지고 있습니다. 이것이 바로 instrinsicContentSize입니다. 이러한 녀석들은 width, height를 가지고 있어서 따로 지정하지 않아도 오류가 발생하지 않습니다. UIView를 컨테이너로 사용하게 되면 오류가 발생하죠...

2) constraint

- 자신이 어딘가에 속해 있는 제약 조건입니다. anchor를 leading, top으로 지정하여서 사용하는 방식과 동일합니다. 각 제약에는 하나씩의 anchor가 필요합니다.

3) priority, isActive

- 자신의 중요도입니다. 1부터 1000까지라고 생각하면 되고, 우리가 그냥 지정하지 않고 넣어주게 되면 1000(Required) 를 가지고 있습니다. 중간중간 의미 있는 값은 750(DefaultHigh), 250(DefaultLow) 이렇게 있습니다.

- 만약 중요도가 높은 제약과 낮은 제약을 두개를 같이 연결하여 두고, 서로 다른 값을 넣어두게 되는 상황이 있을것입니다. View의 visible을 관여할 경우에... 이러한 경우에 isActive의 값을 false로 두게 되면, isActive가 true가 되어 있는 제약을 사용하게 됩니다.

- iOS 9부터는 stack view가 나오게 되면서 이러한 visible에 대한 처리를 하여줄 부분들이 없어지게 되었습니다. 아주 편해졌죠.

- 만약 이렇게 두개의 제약을 번갈아 사용하여야 하는 상황이라면 IBOutlet을 weak으로 사용하면 안됩니다. ARC로 인하여 회수가 되기 때문입니다.

4) LayoutRelation

- 조건의 수치에 대한 최대 혹은 최소에 대한 값을 지정할수 있습니다.

- lessThanOrEqual : 작거나 같음, equal : 같음, greaterThanOrEqual : 크거나 같음

5) Content Hugging

- 오른쪽의 show the size inspector 를 보면 하단에 이런 제약이 있습니다. Compression resistance와 쌍으로 이루어져있으며, 이것은 최대크기의 제한을 두는 제약입니다. 이건 그림을 봐야 할것 같아서 예를 들어 드리죠.

이렇게 만들기 위해서는 왼쪽뷰의 크기를 고정하거나 여러가지 일을 하여야 합니다.

그렇지만 이렇게 하지 않고, 만약 1Layout에 글자의 길이가 변하는 상태라고 합시다.

이런 상황이면 고정폭을 주게 되면 Layout이 넘치가 될것이고, 그러면 코드에서 다시 넓이를 조정하여 주어야 하는 아름 다운 코딩을 하여야 합니다. ㅠ

1번 Label 입니다.

2번 Label 입니다.

이렇게 되어서 최대크기의 제한의 값이 적은쪽이 더 넓은 공간을 가질수 있게 되는 겁니다.

6) Content Compression Resistance

- 최소크기의 제약을 두는 방법입니다. 이것도 약간의 예를 들어야 할것 같네요. 일단 내용은 최소크기의 제약을 두는것입니다. 많이들 헷갈려 하실겁니다. 그렇지만 알아두면 좋아요.

일단 2Layout에 width를 300을 주고, priority를 1000을 주었습니다. 당연히 자신의 크기를 꼭 지켜야 하기에 꼭 300을 가지고 갑니다.

자 2Layout의 width의 priority를 750으로 변경하였습니다.

이렇게 되면 1Layout의 compression Resistance의 priority인 750과 동일하게 됩니다.

그래서 자신의 가장 최소크기를 가지게 되는겁니다.

이해가 가시나요?

다들 즐거운 오토레이아웃 되세요 ㅎㅎ

Apple Link

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW21