7. Size Class

이번에는 핸드폰 화면 방향이 세로모드와 가로모드가 되었을 때의 오토레이아웃에 대해서 배워보자

1. 우선 위에는 버튼이 있고 아래에는 textView가 있는 화면을 구성해보자.

 

2. Constraints를 top 30 leading 30 trailing 30 bottom 30으로 잡아보자.

버튼이 잘 안보이기 때문에 색상을 넣어주자.

HIG - Adaptivity and Layout - Size Class를 보면

[세로모드]

• width: Compact (작음)
• height: Regular (보통)

[가로모드]

• width: Compact or Regular (Any)
• height: Compact (작음)

즉, 세로모드일 떄는 height: Regular 가로모드일 때는 height: Compact 라는 것을 기억하자.

 

3. 이제 세로모드일 때의 오토레이아웃을 지정해보자.

a. 모든 Constraints를 선택해준다.

 

b. 사이즈 인스펙터로가서 installed 왼쪽의 플러스 버튼을 누른다.

(참고: 기존의 체크된 installed은 가로모드, 세로모드 관계없이 해당 오토레이아웃을 사용한다는 뜻이다.)

c. 우리는 현재 세로모드의 오토레이아웃을 잡고 이것을 시스템에 알려주고 싶기 때문에 기존의 installed를 해제하고 새로운 installed를 만들어준다.

 

위에서 세로모드일 떄는 height: Regular라고 했기 때문에 width: any, height: Regular로 설정해준다.

그리고 새로운 installed을 체크해준다.

이렇게 하고 가로모드로 바꾸면 기존 Constraints가 비활성화 되는 것을 알 수 있다.

[세로모드 - 활성화]

[가로모드 - 비활성화]

 

4. 이제 가로모드일 때의 오토레이아웃을 잡아보자.

a. 버튼과 TextView의 위치를 다시 잡아준다.

 

 

b. Constraints를 top 30 leading 30 trailing 30 bottom 30으로 잡아보자.

 

 

c. 이제 활성화된 Constraints만 모두 선택해준다.

 

 

d. 기존 installed를 해제하고 새로운 installed을 만들어준다.

가로모드일 때 height: Compact이기 때문에
width: any, height: Compact로 설정하고 installed를 만들어준다.

 

5. 이렇게 가로모드, 세로모드 오토레이아웃을 따로 잡게 되면 아래와 같이 다르게 적용되는 것을 알 수 있다.