iOS 에는 다양한 기기들이 존재합니다. iPhone11, 12처럼 notch가 있다거나, iPhone 8 처럼 없는 형식, 그리고 iPad도 존재합니다.
이러한 다양한 기기에 맞춰 따로따로 레이아웃을 설정해주고, 계산하기에는 너무 오랜시간이 걸릴 것 입니다.
그래서!
다양한 기기의 화면에 대응하기 위해 만들어진 Layout 엔진을 AutoLayout이라고 합니다.
AutoLayout을 좀 더 깔끔하게 구현하기 위해 StackView라는 것이 존재합니다. StackView는 아래와 같이 두가지가 존재합니다.
가로로 나란히 놓을 수 있는 Horizontal Stack View, 세로로 나란히 놓을 수 있는 Vertical Stack View가 존재합니다.
위의 그림에는 어떠한 Stack View들이 사용되었을 까요?
확인해 봅시다!
바로 이런식으로 구성이 되어있습니다. 위아래로 나열되어 있는 것은 Vertical StackView이고, 좌우로 나열되어 있는 것은 Horizontal Stack View입니다. 그리고 마지막으로 전체를 감싸주는 Vertical Stack View가 하나 더 존재합니다.
JoonSwift 와 Who Love Swift를 묶은 Vertical Stack View의 옵션을 보면 다음과 같습니다.
내부의 Label들은 Leading으로 정렬해 준 모습이고, 두 Label사이의 간격은 8입니다.
그 아래의 축구공과 태극기의 Horizontal Stack View의 옵션도 살펴보겠습니다.
이번에는 Distribution의 Fill Equally를 사용하고 두 이미지 사이의 공간을 8로 설정해 놓은 모습입니다.
이렇게 보면 보기 편합니다 Distribution의 옵션을 Fill Equally로 두면 두 이미지가 같은 크기로 Horizontal Stack View를 채울 수 있습니다.
다음은 Go To Instagram Go To Github Label을 묶은 Vertical Stack View의 옵션을 보겠습니다.
사진에서도 보이듯 오른쪽으로 정렬되어 있는 모습을 볼 수 있습니다. 그것은 Alignment의 옵션을 Trailing으로 주었기 때문입니다.
그리고 이 모든 Stack View들을 또 하나의 Vertical Stack View로 묶어서
Horizontally in Container와 Vertically in Container를 해 준 모습이 위의 처음 그림과 같은 모습입니다.
마지막으로 배경화면입니다. 저 background 이미지는 Auto Resizing을 활용하여 해 주었습니다.
이렇게 해 주고 나면 다양한 기기에서도 인터페이스를 잘 볼수 있게 만들 수 있습니다!
이렇게 Stack View를 활용하여 간단한 Auto Layout설정을 해보았습니다. Constraints를 활용한 다양한 방법은 다음 포스팅에서 다뤄보도록 하겠습니다.😄
'iOS' 카테고리의 다른 글
| ScrollView AutoLayout(with Code) (0) | 2020.12.22 |
|---|---|
| Unit Test (XCTest) (0) | 2020.12.16 |
| Auto Layout (Constraints) (0) | 2020.12.08 |
| UIGestureRecognizer (Swipe, Pan, ScreenEdgePan, Long Press) (0) | 2020.12.05 |
| UIGestureRecognizer (Tap, Pinch, Rotation) (0) | 2020.12.03 |