Auto Layout : 개인 프로젝트에 적용해보기

 이번에는 제가 개인적으로 만들었던 프로젝트에 오토레이아웃을 적용시켜보겠습니다.

간단하게 프로젝트를 소개하자면 외국인을 위해 대한민국을 소개하는 앱이며 맛집 소개해주는 기능과 도시별 소개영상, 화씨,섭씨 변환 기능을 갖춘 앱 입니다.

---

먼저 Main.storyboard 입니다.

지금은 어느 제약조건도 추가하지 않은 상태로 있어, 화면을 회전하면 UI가 화면에 맞지 않습니다.

<세로화면>

<가로화면>

---

첫 번째 씬에서 Label을 선택해, 제약조건을 추가 해보겠습니다.

저는 현재 지정한 위치에서 그대로 사용하고 싶어서 제약조건에 입력되어있는 값 그대로 추가하겠습니다.

화면을 돌려 확인해보면, 제약조건이 에러없이 수행되는것을 확인 할 수 있습니다.

다른 UI도 같은 방법으로 제약을 추가해주면 됩니다.

-

해당 씬에 모든 제약을 추가한 결과는 다음과 같습니다.

먼저 스크롤 뷰가 아니라 가로로 화면을 전환했을 때 아래 UI가 짤려 iPhone 11에서 iPad 8세대로 바꾸었습니다.

그리고 비교를 위해 첫 번째 씬에만 제약조건을 추가한 상태입니다.

두 번째 씬과의 차이점이 한 눈에 보이죠? 

 

<세로화면>

&nbsp;

<가로화면>

남은 씬도 동일하게 처리하면 됩니다!

---

테이블 뷰는 별도의 과정없이 가로화면에서도 실행됩니다.