3. Auto Layout - 화면 회전

휙휙 돌아가는 화면의 오토레이아웃을 잡아보자.

 

 

레이블 3개

이미지뷰 1:1, 가로 항상 150 이하 

 

텍스트뷰

 

오토레이아웃 잡기 전에 기준을 정하고 시작하는게 좋음.

애매한 경우 좌측 상단 요소를 기준으로 시작하는 것도 좋음.

그리고 내가 원하는 형태에 가깝게 미리 컴포넌트들을 배치해 두는것이 편함

 

1. 이미지뷰 잡아주기.

- 좌측 상단에 올리기 위해 Top, Leading 제약 주기.

- 너비가 화면(슈퍼뷰)의 30%를 차지하도록 Equal Width 활용 (imageView.Width = 30% X superview.Width) [control키 활용]

- 여전히 세로가 안잡혀 있기 때문에 aspect ratio 활용해서 1:1로 맞춰주기 [control키 활용, option키]

 

2. 레이블 잡아주기

- 맨 위 레이블 부터.. 이미지뷰의 Top과 정렬

- 레이블.leading = 이미지뷰.trailing + 8

- SafeArea.trailing = label.trailing + 20

 

나머지 레이블은 첫번째 레이블의 leading, trailing에 x축을 맞춰주고

2번째 레이블 y축은 이미지뷰의 center vertically

3번째 레이블 y축은 이미지뷰의 bottom에 맞춰준다.

 

 

3. 텍스트뷰 잡아주고 돌려보기

- Top, Leading, Bottom, Trailing각 20씩 텍스트뷰 제약 주고 돌려보면..아래와 같이 처참한 상황이 연출된다.

(이미지뷰의 Width가 슈퍼뷰의 30%라고 설정해둔 제약 때문에 그렇다. 그래서 너비에 대한 제약을 더 추가해 줘야 한다.)

- 이미지뷰 Width 제약 Less Than or Equal로 상수 150, Priority 최우선(1000) 세팅

- 이미지뷰가 슈퍼뷰의 너비의 30%를 차지해야 한다는 제약의 Priority 위 제약보다 낮게 세팅 (750)

그러면 아래와 같이 잘 작동한다.

 

 

 

스택뷰 써야지 라고 생각하고 잡아본 프로토 타입이 왼쪽이고,

스택뷰 없이 각각 잡아준 것이 오른쪽이다.

(제약 설정이 달라서 완전 동일하지는 않지만.. 스택뷰로도 잡아보고 각각 잡아보는 연습을 해보았다.)

너무 사진이 쪼그라들어서 스택뷰의 Distribution - Fill Proportionally로 더 비슷하게 만들어 줘봤다.

 

[학습 소스]

공식문서, 야곰 오토레이아웃 정복하기 강의

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

https://yagom.net/courses/autolayout/