[iOS] 오토레이아웃(AutoLayout) 이란?

이전에는 하나의 사이즈였던 아이폰 기종이 이제는 iPhone4, iPhoneSE, iPhone8, iPhone8 Plus 그리고 iPhoneX등 다양한 사이즈와 화면 비율로 출시 되면서, 사이즈에 구애받지 않고 시각적으로 동일한 화면을 구현해야하는데 이를 위한 가장 편리하고 권장되는 방법이 바로 오토레이아웃입니다.

 

오토레이아웃은 뷰의 제약 사항을 바탕으로 뷰 체계 내의 모든 뷰의 크기와 위치를 동적으로 계산합니다. 오토레이아웃은 애플리케이션을 사용할 때 발생하는 외부 변경과 내부 변경에 동적으로 반응하는 사용자 인터페이스를 가능하게 합니다. 스토리보드를 이용해서 간단하게 사용해보겠습니다.

 

스토리보드의 뷰컨트롤러에서 적당하게 라벨과 버튼을 배치하고 실행을 해보겠습니다. 이 상태에서 시뮬레이터를 가로모드로 변경하면 어떻게 될까요? 배치가 이상하게 되버립니다.

이제 오토레이아웃을 통해 가로모드로 했을때도 정확히 중간으로 배치가 되게 해보겠습니다. 버튼을 클릭하고 오른쪽 하단을 보시면 자그만한 아이콘버튼이 있습니다. 그중 4번째버튼인 Add New Constraints 를 선택합니다.

클릭하면 여러값을 변경 할 수 있는 말풍선이 뜨는데요. 간단하게 상하좌우의 너비값만 변경하고 확인을 눌러보겠습니다.

저값은 위를 150만큼 떨어트리고 왼쪽을 90만큼떨어트리고... 하는 뜻입니다. 적용을하고 버튼을 보면 파란실선이 생기는데 저게 오토레이아웃이 적용된 모습입니다.

라벨도 같은방법으로 만들어주고 실행을해보겠습니다.

가로로 눕혀도 중앙에 배치되는 모습을 볼 수 있습니다.

 

그런데 여기서 버튼의 위치가 마음에 안들어서 값을 변경을 해보면 어떻게 될까요? 상단 너비값을 150에서 100으로 변경해보겠습니다.

실선이 파란색에서 빨간색으로 변했습니다. 이전의 정의했던 값과충돌해서 그런건데요. 이전의 값을 제거해줘야합니다. 왼쪽의 hierarchy의 Constraint 를 보면 top의 값이 중복되어 들어가있는것을 볼수 있습니다. 기존의 150값을 제거해줍니다.

다시 정상적으로 파란색으로 변한 실선을 볼 수 있습니다.

---

참조

• https://www.edwith.org/boostcourse-ios/lecture/16848/