[UIkit] 오토 레이아웃 파헤치기 - 1 ⛏️

스위프트를 공부하면서 시뮬레이터를 iPhone13 pro로 하고 iPhone13 pro기준으로만 UI를 구성했다. 그러다 갑자기 든 생각.. 혹시 iPhone14나 iPhone SE 같은 다른 기종으로 하면 화면이 깨질까? 하고 실행해보니까 아주 가관이었다.

좌 iPhone13 pro, 우 iPhone11

 예전에 웹 개발 공부할 때 화면 크기에 따라 화면을 다르게 출력하는 반응형 웹을 구성했었던 기억이 났다. 당연히 iOS 개발에도 있겠지 하고 찾아보니까 있다!

애플 공식 가이드

주저리주저리 길다. "Auto Layout dynamically calculates the size and position of all the views in your view hierarchy based on constraints placed on those views" 이 부분이 핵심이다. "오토 레이아웃은 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 제약조건에 따라 동적으로 계산합니다." 그니까 쉽게 말하면 자동으로 레이아웃을 그린다라는거잖아? 오케이 그러면 대충 알았으니까 오토 레이아웃은 어떻게 쓰는건지 알아보자

 

Auto Layout

오토레이아웃에서 가장 중요한 건 위치임. 해당하는 뷰가 뷰를 그리려고 하면 어디있는지 알아야한다. 즉, 위치를 알아야 한다는 것인데, 이 위치를 아는 것은 오토레이아웃에서는 앵커라는 친구로 한다고 한다. 위치 다음으로 중요한 건 사이즈인데 사이즈는 뷰 자체에 주거나 스크린 사이즈에 따라 오토레이아웃이 자동으로 계산 한다고 한다. 

 

Constraints (제약조건)

오토레이아웃은 제약조건을 이용해서 뷰의 위치나 크기를 정함. 음.. 내 생각엔 뷰의 크기를 다른 객체를 이용해 "상대적"으로 제약을 주니까 제약조건이 아닐까 싶은데 예를 들어 A,B 객체가 있는데 B라는 객체는 해상도가 바뀌더라도 A의 객체를 기준으로 top, bottom, leading, trailling 모두 30의 margin이 있어야하고 wight과 height은 100이어야 한다. 여기서 제약 조건은 top, bottom, leading, trailling 모두 30의 margin이 있어야하고 wight과 height은 100 이렇게 크기와 위치를 지정하는 친구들을 통칭해서 제약 조건이다? 내 생각은 이렇다. 

 

어떻게 쓰는데?

위의 사진과 같이 원하는 객체를 클릭 후 컨트롤을 누른 상태로 부모 객체한테 끌고가면 오토레이아웃을 설정할 수 있는 창이 뜬다. 

아니면 요렇게 컨스트레인트 창을 켜서 설정할 수도 있다. 본인 편한대로 하자~ 코드로 설정하는 방법도 있지만 그건 나중에 다뤄보겠다.

 

다음에는 직접 막 다뤄보면서 해볼 것이다. 다음에 봅시다 👋