Auto Layout 1 [Why?]

📍 Auto Layout 이란 ?

제약조건(Constraints)에 따라 모든 뷰의 크기와 위치를 동적으로 지정하는 것

이게 왜 필요한지? 를 이해하기 위해서는 Frame-Base Layout에 대한 사전 지식이 필요하다.

Xcode 상에서 이미지 View의 크기와 위치를 위와 같이 지정하고 Simulator로 실행시켜보자.

(review화면을 iPhone11로 하고, 파란 점선 표시가 뜨는 중간으로 위치를 지정했음)

실행하면 iPhone11은 예쁘게 정중앙에 적당한 크기로 이미지가 배치된다.

하지만 SE같은 경우에는 중앙에 배치 되지 않고 위치가 애매하다.

그러면 이번에는 landscape(가로모드) 로 돌려 보자

❓ 이미지가 실종됐다.

이유는, 처음에 x와 y의 값을 세로모드의 정중앙인 절대값 (57,348)로 입력했기 때문 !

이처럼 Frame-Base는 다양한 환경에서 똑같은 view를 제공하는것이 어렵다.

그래서 존재하는 Auto Layout !

다시 정의하면, 제약조건(Constraints)에 따라 모든 뷰의 크기와 위치를 동적으로 지정하는 것

제약조건은 아래와 같이 view의 위치와 크기를 Safe Area를 이용해 상대적으로 제약을 주는 것이다.

Safe Area를 이용해 ? 그게 뭔데 ❓❓

스티브 잡스의 아이폰 디자인을 떠올려보자. 베젤이 두껍고, 홈버튼이 있는 디자인이다.

이 디자인은 무조건 화면이 직사각형 형태였기 때문에 가로모드에 대해 신경쓰지 않고 구현할 수 있었다.

그래서 이전에는 Layout Guide라는 것을 사용하여 가려지는 view (상태bar) 만 신경쓰면 됐다.

하지만 현재 대부분의 아이폰의 디자인은 이러하다. 노치라고하는 탈모디자인이 생겨난것 !

여기서 고려해야할 점은 landscape이다. view를 세로모드만 고려하여 만들면 가로모드에서 노치 부분에 view가 가려질 수 있기 때문 !

그래서 Safe Area를 두고, 보이지 않을 수 있는 부분까지 영역을 확장하지 않도록 도와준다.