[IOS] 스토리보드를 이용한 사이즈 클래스(Size Class)

오토레이아웃 포스팅 다음으로 Size Class에 대한 포스팅을 해보려고 한다.

테스트는 이전 오토레이아웃 포스팅에서 사용한 viewController를 기준으로 해보겠다.

Xcode 우측 utility에 file inspector에 Use Auto Layout Use Size Classes가 체크되어 있는지 일단 확인해 보자.

체크가 되어있다면 스토리보드에 들어가서 아래쪽에 아래쪽에 보면wAny hAny라는 항목이 보일것이다.

클릭해보면 일단 Any, Base Valuse For all layouts라는 글자가 보인다.

모든 레이아웃에 대해 동등한 사용을 하겠다는 것이다.

이전 오토레이아웃 포스팅에서는 Base Values로 작업을 했기 때문에 모든 화면에서 동등한 결과를 볼 수 있다.

이것을 화면 사이즈 별로 변경하는것이 가능한데 종류는 다양하다.

종류에 대해 간단히 보도록 하자.

Compact Width, Compact Height : For 3.5 inch, 4-inch and 4.7inch iPhones in landscape

뭐 영어를 잘 모르는 나도 3.5, 4, 4.7인치 아이폰 가로모드에 대한 이야기 같다.

근데 이렇게 작은 사이즈가 있긴 있는건가...사용해 본적이 없다

Compact Height : For all compact height layouts(e.g. iPhones in landscape)

모든 아이폰 가로 사이즈에 대한 이야기 인것 같다.

Regular Width, Compact Height :For 5.5inch iPhones in landscape

5.5인치 아이폰6 plus 가로모드 이야기인듯...

Compact Width : For all compact width layouts(e.g. 3.5inch, 4inch, 4.7inch iPhones in portrait or landscape)

3.5,4,4.7인치 아이폰 세로모드 or 가로모드 라는데... 아무리 봐도 세로모드 아닌가... 일단 그렇답니다.

Any : For all layouts

모든 기본 레이아웃!!!

Regular Width : For all regular width layouts(e.g. iPads in portrait or landscape)

모든 regular width 레이아웃. 아이패드 새로 혹은 가로.

Compact Width, Regular Height : For all iPhones in portrait

모든 아이폰 세로모드의 final value인데 보아하니 아이폰6plus가 아닌가싶다.

Compact Width, Regular Height : For all iPhones in portrait

모든 아이폰 세로모드 레이아웃.

Regular Height : For all regular height layouts(e.g. iPhones in portrait, and iPads in portrait or landscape)

모든 세로 레이아웃. 아이폰은 세로 아이패드는 세로 혹은 가로 

Regular Width, Regular Height : For iPads in portrait or landscape

모든 아이패드 세로 혹은 가로.

사이즈에 대해 간략하게 알아보았다. 이를 이용해 사이즈 별로 오토레이아웃을 걸어놓는게 가능하다.

전 포스팅에서 사용한 viewController로 아이폰과 아이패드에서 가로모드시 레이아웃을 변하게 해보자.

우선 아이폰 가로모드 에서 레이아웃을 변화시켜 보자.

그림과 같이 일단 클릭!

아이폰 가로모드에 대한 레이아웃을 변경 할 것이니 Compact Height를 설정하자.

 그러면 아래 사진과 같이 화면이 아이폰 가로모드처럼 사이즈가 변한다.

자 이제 아래와 같이 레이아웃을 마우스 드레그로 옮긴 후에

오토레이아웃에서 설명한 Resolve Auto Layout Issues 탭에서 All Views in View Controller 탭의 update Constraints를 클릭해보자.

클릭하면 뷰 컨트롤러 안의 모든 뷰에 대해 변경된 Constraints값으로 수정한다.

이제 시뮬레이터를 실행시켜 보자. 세로모드는 뭐 어제와 같이 동일하다.

가로모드로 돌려보자. 우리가 수정한 레이아웃데로 사진 옆으로 이름과 홈페이지 버튼이 옮겨 진 것이 보인다.

뭔가 되기 쉽다...!!!

해본 김에 아이패드쪽도 한번 해보자.

아래와 같이 Regular Width, Regular Height로 설정하자.

화면이 엄청나게 커졌다. 이번엔 아래와같이 레이아웃을 마우스 드레그로 옮겨보자.

아까 한 방식데로 Update Constraints를 클릭한 후 시뮬레이터로 아이패드를 실행해보자.

실행 결과, 우리가 수정한 데로 아이패드 화면에 맞게 나온다.

스토리보드를 이용한 사이즈 클래스에 대하여 기본적인것을 해보았다.

오토레이아웃과 사이즈클래스도 스토리보드에 너무 많은 뷰들이 올라가있으면 이것도 너무 복잡하여

어느정도는 NSLayoutConstraints클래스를 이용하여 코드로도 잡아주어야 하지만

대부분의 뷰에서는 오토레이아웃 사이즈클래스 조합만으로도 충분히 만들어 낼수 있다.