iOS

[iOS] Alignment Constraints - Swift

Auto Layout and Responsive UIs

Posted by dongjune on December 6, 2020

지난 포스팅에서 Pinning Constraints에 대해 알아봤습니다.
하지만 Auto Layout을 위해서는 Pinning Constraint 만으로는 충분하지 않습니다.

Pinning Constraint의 문제점

버튼을 화면 중앙에 위치시키는 것을 생각해봅시다.만약 Pinning으로 이것을 설정한다면 어떻게 될까요?
다음과 같이 세로뷰에서는 잘 작동하지만 align-1 가로 뷰에서는 다음과 같이 중앙에 위치되지 못하는 것을 볼 수 있습니다.
그 이유는 Pinning 은 거리를 통해 constraint를 설정하기 때문입니다.
따라서 가로로 화면을 돌리게 되면 버튼이 이처럼 벗어나게 됩니다. align-2

Alignment Constraint

위의 문제점은 Alignment를 사용해서 해결할 수 있습니다. align-3 지난 포스팅에서 만든 앱에 간단한 label을 추가하고 이를 항상 중앙에 위치하도록 만들어 보겠습니다.

1. label 추가

align-4

2. 아래의 Align 버튼 클릭

align-5

3. 수평, 수직 정렬 클릭 후 Add 버튼 클릭

align-6

4. Align 완료

align-7