본문 바로가기
2022_iOS 앱 개발자 워크숍/2, Auto Layout

Auto Layout : Alignment

by 황민우 2022. 1. 11.

이번에는 뷰의 정렬 제약조건을 주는 방법을 간단한 실습과 함께 알아보겠습니다.


Alignment 실습

 

Main.Storyboard 우측 하단을 보면 5가지의 메뉴들이 있습니다.

그 중 왼쪽에서 두 번째 Alignment 버튼을 통한 제약조건을 알아보겠습니다.

 

먼저 Library에서 Label을 추가하겠습니다.

Label을 선택한 상태로 Alignment 버튼을 클릭하면

Add New Alignment Constraints 라는 화면이 실행되며,

Horizontally(수평)와 Verically(수직)에 대한 2가지 옵션을 설정할 수 있습니다.


원하는 값을 입력하고 선택을 하면 Add 2 Constraints (제약조건 추가)라는 버튼이 활성화됩니다.

이어서, 클릭을 해보면 수직과 수평의 파란선이 라벨의 위치를 잡아줍니다.

수직, 수평의 선을 클릭해보면

Size Inspector를 통해 어떤 라벨, 뷰의 X축 또는 Y축의 중앙이라는 것을 확인 할 수 있고,

값을 제약조건을 변경할 수 있습니다.


제약조건이 지정된 선을 선택한 상태로 Delete 키를 눌러 제약조건을 지울 수 있으며,

화면에서 사라지게 됩니다.

제약조건을 지우고 나면

View Controller Scene에서 빨간색 원이 뜨면서 경고를 줍니다.

만약 실수로 지운것이라면 처음과 동일하게 지워진 부분에 대한 제약조건을 다시 추가해주면 됩니다.


참고자료 : https://www.youtube.com/watch?v=QdYdssBfu1E&list=PLva6rQOdsvQWlAzZJYhx1a0Y5Stu88cZK&index=2

댓글