본 포스팅은 유데미의 iOS & Swift - The Complete iOS App Development Bootcamp 강의를 참고하여 정리하였습니다.
Size Classes Explained
화면을 가로모드로 할 경우 혹은 장치마다 화면이 잘리는 현상을 볼 수 있다. 이를 해결하기 위해 어떻게 해야할까?
☞ 자동 레이아웃을 사용한다.
Setting Constraints and working with the Safe Area
이미지에 몇 가지 규칙이나 제약 조건을 추가해야한다(Constraints).
LaunchScreen에서는 AppBreweryBackground에 몇 가지 제약 조건을 추가한다.
사방 면에 연결되어있는 빨간 선들을 클릭하고 Add 4 Constraints를 클릭한다.
AppBreweryBackground는 Safe Area trailing 영역과 같아야한다.
=> Safe area는 휴대전화가 가로모드로 전환할 때 일반적으로 포함하는 영역이다.
=> 배경으로 모두 덮는 것을 원하는 경우 trailing에서 Second item을 Superview.Trailing 으로 설정해준다.
가로로 돌리면 아래부분은 모두 꽉 채워진 것을 볼 수 있다.
또한 Safe Area leading에서도 똑같이 적용해주면 결과는 다음과 같다. 
How to use Alignment and Pinning
이번에는 요소들을 어떻게 배치할지 알아본다.
위의 사진처럼 로고의 정렬 옵션을 설정해준다.
그러면 다음과 같이 가로로 돌려도 로고가 보이는 것을 확인할 수 있다.
레이블을 하나 더 추가하여 가운데 정렬을 해준 뒤, 위의 로고에서 30픽셀 정도 떨어지도록 설정하면 다음과 같다.
Working with Containers and Subviews
전 시간에 했던 주사위 앱을 다시 보수하는 내용이다.
앱의 화면을 컨테이너를 통해 3분할 하여 정렬할 수 있도록 한다.
view를 넣어서 요소에 포함될 수 있도록 한다.
원하는 요소를 클릭하고 editor-> Embed in -> View를 선택하면 View 안에 요소가 포함되는 형태로 바뀌게 된다.
혹은 하단에 있는 옵션을 통해서도 가능함
Stack Views
Stack View는 view를 수직으로 쌓는 역할을 한다.
아까 만들어놓은 view들을 한꺼번에 선택한 뒤 stack view로 설정해준다.
그 후, stack view를 사방면이 0인 값으로 constraint해준다. (하단은 view 와 연관되도록 하고 나머지는 모두 safe area와 연결되어야한다.) => 그 후 safe area bottom에서 first item를 SafeArea 설정하고 값을 0으로 하면 safe area의 하단을 기준으로 정렬되는 것을 볼 수 있다.
stack view에서 Distribution을 Fill Equally로 설정하면 가로로 돌려도 세 개의 컨테이너들이 균등하게 나뉘는 것을 볼 수 있다. 주사위를 정렬할 때는 주사위만을 포함하는 stack view를 또 생성해준 뒤, 가운데로 정렬하면 된다.
그 후 모든 view의 background를 default로 해주면 결과는 다음과 같다.
Calculator Challenge solution and Walkthrough
계산기 레이아웃을 만드는 과제이다. 처음부터 다 짜야되는 줄 알고 만들고있었는데 알고보니 틀을 주고 시작하라고 했던 것이다. 지우고 다시 시작하기🤪
1. stack view를 레이블 제외한 모든 행마다 만들어주고 레이블을 포함한 모든 행을 가지고있는 stack view 생성. 2. fill과 space 옵션을 통해서 균일하게 채워질 수 있도록 함. 3. 마지막행은 0이 2배의 면적을 갖고있기 때문에 0을 제외한 요소들을 다시 stack view로 포함시켜서 fill 옵션을 설정하면 된다. 4. 전체 stack view를 constraint한다. 5. 맨 위의 레이블은 view를 하나 만들어서 포함시킨 뒤, constraint를 통해 양 옆의 공간을 만들 도록 한다.
▼ 결과물은 아래와 같다.
안드로이드 개발할 때도 비율 맞춰서 디자인하는게 제일 힘들었는데 이번 챕터는 많이 복습해야할 것같다.
.gif)