오토 레이아웃: 컨테이너 나누기

세로인걸 가로로 회전시킬 때,

아래의 경우 pinning을 해서 회전하면 아이템들이 영역 밖으로 벗어나게 된다.

 

이럴 때는 세 부분으로 컨테이너를 나누어주어서 

그 컨테이너 안에서의 alignment & pinning을 해주면 된다.

 

Embed in View를 하는 세가지 방법이 있다.

1. 수동으로 컨테이너를 추가하는 방법은 +에서 UIView라고 치면 View 객체가 나오게 된다.

그다음 컨테이너 크기를 화면에 맞게 조절하고, 컨테이너 안에 들어가야 하는 이미지 객체는 drag&drop으로, hierarchical structure으로 넣어준다.

 

포토샵이나 일러랑은 반대로, 우리에게 보이는 눈이 제일 아래쪽에 있다고 보면 된다. 제일 아래에 있는 레이어가 뷰컨트롤러의 제일 top으로 보여진다.

 

 

2. 아래 있는 두 주사위들은 또 다른 방법으로 적용해줄건데, 사실 위에처럼 직접 끌어다 놓는것보다 더 빨리 적용할 수 있다.

Editor > Embed in > View를 눌러준다.

3. 아니면 그냥 아래쪽의 Embed in 실행아이콘에서 바로 해주는 방법도 있다.

 

 

 

이게 끝났다면 가운데 주사위쪽 컨테이너(가운데 컨테이너)를 왼쪽 메뉴에서 선택 후  편의를 위해 Identity inspector > Document > Label 에서 각 view 마다 이름을 설정해준다.

이제 각각의 뷰 안에서 객체를 오토 레이아웃으로 constraints를 설정하면.. 에러가 난다. 이것은 이제 스택 뷰로 해결해야한다.

 

커맨드 키로 모든 뷰를 다 잡고 스택 뷰로 전환.

 

보면 지금 제일 위쪽 탑 뷰는 safe area에 닿아서 스택뷰 전체에 constraints를 주려고 하면 옵션에 안뜰것이다. 스택 뷰 전체를 노치로부터 조금 간격을 띄워서 내려주면 safe area로부터 constraints를 준다는 옵션이 뜨게 된다.

그리고 스택 뷰 선택 후 attributes inspector 에서 distribution: fill equally로 설정

그리고 주사위 객체들도 스택뷰로 잘 해주고, 컨테이너 뷰 백그라운드 컬러를 none으로 해준다.

 

그리고...평화.