constraint_1

command + shift + L으로 라이브러리를 연 후, view를 선택해 화면에 뷰를 놓을 수 있다. 이 뷰를 가지고 contraint에 대해서 공부해보자.

일단 뷰에 색깔을 넣어 구분해주었다. constraint는 이러한 요소 하나하나의 위, 아래, 왼쪽, 오른쪽 가격이 얼마나 되느냐를 나타내는 것이다. 요소를 선택한 후, 오른쪽 아래의 Add New Contraint버튼을 누르면 constraint를 설정할 수 있다.

간단하게 표시되어 있기 때문에 바로 어디에 대한 간격을 나타내는지를 인지 할 수 있다. contraint to margin은 margin에 대한 개념을 조금 더 공부한 후에 사용하기 위해서 체크하지 않았다.. margin을 체크하면 우리가 생각하는 것과는 다르게 표시될 수 있다.

너비와 높이또한 설정할 수 있다. 설정 후의 모습은 다음과 같다.

constraint의 속성들은 ui상의 constraint를 직접 선택하거나, 요소를 선택한 후, Size Inspector에서 constraint를 수정할 수 있다.

constraint의 요소들을 보면 Top, Bottom은 직관적으로 이해 할 수 있지만 Trailing과 Leading은 처음들어볼 것이다. Trailing은 여기서는 화면의 왼쪽, Leading은 오른쪽으로 나타나기 때문에 단순히 왼쪽, 오른쪽으로 생각할 수도 있지만, 정확한 의미는 Trailing은 글자가 끝나는 곳, Leading은 글자가 시작되는 곳을 의미한다. 그래서 여기서는 Trailing은 왼쪽, Leading이 오른쪽으로 나타나는 것이다. 글을 오른쪽에서 왼쪽으로 쓰는 아랍권 국가에서는 반대이기 때문에 유의해야한다.

위, 아래의 간격이 약간 비어 보이는 것은, 아이폰 상태창으로 사용되거나, 제스처 기능을 사용하기 위해 추가된 Safe Area으로부터의 간격으로 설정되어있기 때문이다. 여기서 아래 bottom의 constraint를 삭제하게 되면 어떻게 될까?

위아래에 빨간 선이 나타나면서 에러가 발생한다. 이것이 가장 중요한 점인데, 오토 레이아웃이 설정되기 위해서는 요소의 좌표와 크기가 반드시 특정되어야 한다는 점이다. xcode에서는 기본적으로 화면의 크기에 대한 정보를 가지고 있고, 아까는 top, bottom에 대한 constraint가 지정되어 있었기 때문에 오토 레이아웃을 통해 요소의 크기와 좌표를 특정할 수 있었다. 하지만 지금은 bottom의 constraint가 사라지면서 요소의 높이를 특정할 수 없게 되었다.

오토 레이아웃은 요소의 크기나 위치를 지정할 수 없으면 에러가 발생한다.

아까와 같이 bottom의 constraint를 추가해주거나, view의 높이를 설정해주면 에러가 사라진다. 다음은 높이를 설정해 준 모습이다.

view의 높이값이 주어지면서, 요소의 좌표(x, y)와 크기(height, width)를 특정할 수 있게 되어 다시 파란선으로 잘 나타난다.

 

alignment constraints를 사용하면, 요소를 수평의 정가운데로 맞추어 주거나, 수직의 정가운데로 맞추어 줄 수 있다.