Autolayout vs Autoresizing Masks
iOS와 macOS의 사용자 인터페이스 레이아웃은 3가지 방법으로 구성할 수 있습니다.
- Frame-based Layout
- Autoresizing Masks
- Auto Layout
구성 방식의 특징과 사용 방법을 알아보겠습니다.
Frame-based Layout
모든 View는 위치와 크기 정보를 Frame으로 표현합니다.
처음 View의 Frame은 (20, 20, 120, 80), 두 번째 View의 Frame은 (20, 108, 120, 80)입니다.
실제 View의 Frame 값을 출력하면 다음과 같이 알 수 있습니다.
이 값을 프로그래밍 방식으로 한 땀 한 땀 계산하면 Frame-based Layout 방식이 됩니다.
View에 변경 사항이 있으면 영향을 받는 나머지 View에 대해서도 다시 계산해야 하므로 오랜 시간이 걸립니다.
Autoresizing Masks
Super View의 Frame이 변경될 때 View의 Frame이 변경되는 방식을 정의합니다. 사용자가 macOS 앱의 창 크기를 늘린다면, 늘어난 창의 크기에 맞춰 자연스럽게 화면이 배치돼야 합니다. 이럴 때 Autoresizing Masks를 적절히 설정하여 해결할 수 있습니다. 하지만 표시하는 내용이 변경되는 내부 변화에는 대응하지 못합니다.
macOS에 귀여운 스누피 이미지 크기를 자유자재로 변경하는 앱을 만들어 봅시다.
먼저 이미지를 유연하게 변경할 수 있도록 Attributes Inspector > Scaling 값을 Axes Independently로 설정했습니다.
이미지를 클릭하고 Size Inspector를 누르면 Autoresizing을 설정할 수 있습니다.
Autoresizing 박스 안 가로, 세로 선을 클릭하면 콘텐츠 크기가 자동으로 조절됩니다.
왼쪽, 위를 Super View의 Frame에 따라가도록 설정하면 아래와 같이 변경됩니다.
이번엔 이미지를 View에 꽉 차게 지정해 봅니다. 오른쪽, 아래에 대해서도 Autoresizing을 추가하면 깔끔하게 전체 화면으로 표시해 줍니다.
Autolayout
Auto Layout은 View의 크기와 위치, View 사이 간격에 Constraint(제약 조건)을 설정하여 조정하는 방법입니다.
View의 Frame 대신 View 사이의 관계를 정의하여 내부/외부 변화에 대해 모두 대응할 수 있습니다.
Auto Layout을 설정하면 하나의 Storyboard 파일만으로 여러 기종의 화면을 동일하게 표시할 수 있습니다.
이번엔 iOS 앱으로 만들어 봅시다.
UILabel, UIImageView가 순차로 보이므로 Stack View에 넣어 쉽게 관리할 수 있습니다.
항목 전체 클릭 > Embed In > Stack View를 선택하면 Label과 Image는 Stack View 하위에 위치하게 됩니다.
View가 지나치게 커졌지만 개의치 않고 Stack View를 선택하고 Add New Constraints를 클릭합니다.
Leading, Top에 설정할 간격을 설정하고 Add 2 Constraints를 클릭합니다.
그리고 Align에서 Horizontally in Container(좌우를 가운데 고정), Vertically in Container(위아래를 가운데 고정)를 체크합니다.
마지막으로 Stack View의 Spacing을 20으로 설정하면 깔끔하게 화면을 구성합니다.
Constraint를 클릭하면 상세 내용을 볼 수 있습니다.
Stack View의 맨 위가 Safe Area의 맨 위에서 30 만큼 떨어져 있어야 해.
Priority와 Multiplier는 추후 별도로 다루겠습니다.
왼쪽 트리에서 Constraints를 간략하게 볼 수 있습니다. View와 View 사이의 관계를 나타내죠.
아이폰 11에서 아이폰 SE로 변환해도 동일하게 화면을 구성합니다.
