[iOS] 폰트 크기에 따라 망가지는 Auto Layout 잡기

Auto Layout을 잡는 방법은 개발자마다 또 상황에 따라서 전부 다릅니다!! 그래서 이게 맞다! 저게 맞다! 할 필요 없이 그냥 자기만의 방식대로 잘 잡으면 돼요~!

 

하지만 Label이나 Button 같은 경우엔 뭔가 잡힐 거 같으면서도 계속 깨지는 경우가 너무 많았습니다.. 특히나 오토레이아웃을 잡아놓고 폰트 크기를 바꾸면 레이아웃이 망가지고 그랬습니다 ㅠ 그래서 애플에서 제공해주는 가이드가 있지 않을까 하는 생각에 애플 문서를 들여다 보았습니다. 해석하는데 엄청 시간이 걸렸지만.. 그래도! 몇 가지 깨우친 게 있어 오늘은 가이드에서 제공해주는 대로 오토레이아웃을 잡아보려고 합니다!

 

AutoLayout 들어가기

이 글은 오토레이아웃이 무엇인지 안다는 가정하에 작성하였습니다!

오토레이아웃이 무엇인지 알고 싶다면 Auto Layout Guide - Getting Started를 참고할 수 있습니다. 한국어로 정리된 글을 읽고 싶다면, 미흡하지만 제가 리드미로 정리해놓은 AutoLayout 들어가기를 참고해도 좋을 것 같습니다~!

 

 

고유 콘텐츠가 있는 뷰(Views with Intrinsic Content Size)

제목 뜻이 잘 이해가 안 갈지도 모릅니다 ㅎㅎ 저도 글을 읽기 전까지 Intrinsic Content 가 대체 뭐지??? 였으니까요.

 

고유 콘텐츠가 있는 뷰는 Label, Button 과 같은 콘텐츠들을 가지고 있는 뷰들을 말합니다. 

이러한 Label이나 Button, TextField 객체들은 UIView와 달리 Auto Layout의 Constraint를 몇 가지 안줘도 오토레이아웃이 잡힌다고 하네요.

 

가장 간단해 보이는 아래 뷰의 Auto Layout을 잡아볼게요. 

이 레이아웃은 로그인과 회원가입 뷰에서 정말 많이 보이는 뷰입니다. 

 

위 뷰의 오토레이아웃 잡는 것은 너무 간단해서 문서의 그림으로 대체했습니다.

여기서 잠깐 질문이 들 수 있어요. 3번과 같이 NameLabel과 NameTextField를 이어줬을 뿐인데 왜 NameTextField는 저렇게 width가 길까?! 그건 textfield의 Hugging Priority는 250, label은 251로 우선순위가 낮기 때문입니다. 

 

textfield의 Hugging의 우선순위를 252로 label보다 높이면 아래와 같은 그림처럼 돼요!

 

기본적으로 textfield의 Hugging Priority는 250, label의 Hugging Priority는 251이에요.

 

 

 

원래는, 이렇게 오토레이아웃을 잡고 넘어갔죠?

그치만 가이드를 읽고 나서 다시 한번 생각해보니 높이는 오토레이아웃을 제대로 잡은게 아니었어요~ 

만약!! 폰트 크기가 커진다면? Label과 TextField 둘 중에 하나만 커지더라도 오토레이아웃이 망가집니다!

 

왼쪽은 오토레이아웃 잘 잡힌 것. 오른쪽은 망가진 것.

차이가 보이시나요?

 

오른쪽은 제대로 오토레이아웃을 잡아 TextField의 폰트 크기가 커져도 Top에서 20만큼 잡아주고 있지만, 오른쪽은 위 저희가 잡았던 방식인데 뷰가 망가지고 있네요...

 

그렇다면 오토레이아웃을 다시 제대로 잡아본다면 부등식을 활용해주셔야 합니다.

NameLabel이나 NameTextField는 Top에서 최소 20만큼은 떨어져있어야하고 둘은 baseline이 같아야 합니다. 둘 중에서 하나의 폰트 크기가 커진다면, 다른 하나의 Top Constraint는 20보다 커져야 합니다. 그 반대의 경우도 마찬가지입니다. 따라서 아래의 제약조건들을 추가해주면 됩니다.

 

여기서 equal에 우선순위를 249로 주는 이유는, 폰트가 커진다면, 20보다 커지기 때문에 부등호가 되기 때문입니다.

 

 

고유 콘텐츠를 포함한 뷰는 이렇듯 Auto Layout을 잡을 때 폰트 크기가 달라질 것도 생각하여 height를 고려해주어야합니다! Auto Layout을 잡아주는 StackView를 활용하면 더 쉽게 잡을 수 있어 가이드에선 StackView를 최대한 활용하라고 나와있네요 ㅎㅎ