AutoLayout - Storyboard

 

스토리보드를 통해 오토레이아웃 설정

 

• 오토레이아웃(AutoLayout)이란 화면의 위치와 크기를 동적으로 정의하고 관리하는 방식
• 제약조건(Constraints)을 통해 설정하여 뷰 안에서의 관계를 정의할 수 있다.
• 뷰를 관점으로 잡았을 때, 상하좌우가 잡혀있는 것을 생각하며 제약조건을 자유롭게 추가해서 잡을 수 있다.

 

'Command + Shift + L'

 

Label 을 추가

 

화면 오른쪽 하단에 Constraints

 

'Add New Constraints' 에서 제약조건을 추가할 수 있다.

제약조건에서 숫자만큼 띄는 기준은 그 주변에 가까운 객체를 기준으로 하며, 객체가 없을 때는 뷰를 기준으로 한다.

 

 

 

 

따로 객체가 없으니 뷰를 기준으로 최상단에서 60만큼 띄고, 좌우로도 40만큼 띄운다는 제약조건이다.

밑에 Height는 Label 객체 자체의 높이를 설정한다.

여기서 상단과 좌우만 제약조건을 설정한다면 아직 설정이 부족하다는 경고나 에러가 발생할 수 있다.

하단의 제약조건을 설정하거나 높이를 설정하여 고정될 수 있게 해야 한다.

왜냐하면 상단과 좌우만 고정되면 밑으로는 여러가지의 경우가 생길 수 있기 때문이다.

 

 

 

 

오른쪽에서 추가한 제약조건을 추가, 삭제, 변형할 수 있다.

 

 

 

버튼을 추가

 

 

제약조건을 추가할 때 이번에는 위에 Label이 있기때문에 상단의 제약조건에서 60을 띄운다는 조건은 Label을 기준으로 띄우게 된다.

 

 

 

한 칸 옆에 있는 정렬 제약조건을 통해 수직, 수평의 중간 정렬을 할 수 있다.

이렇게 되면 상단으로부터 얼마나 떨어져있고 Height 도 설정되어 있는 상황에서 세로로 정렬을 한다면 제약조건을 완성할 수 있다.