여러 오브젝트를 사용해서 AutoLayout 적용하기.

여러개 (2개 이상) 의 오브젝트를 통해서 오토레이아웃을 적용해보자. 두개의 오브젝트가 다음과 같이 있을 때, 파란색 뷰에 상하 좌우 20씩의 constraint를 주게되면 파란색 뷰의 Trailing은 노란색 뷰와의 간격이 20이 되고, 노란색 뷰는 자동적으로 파란색 뷰와 Leading constraint가 20이 된다.

constraint를 설정할 때 중요한 것이 크기와 위치가 결정되어야 한다는 점인데, 여기서 두개의 뷰에 constraint를 설정해 주면, 위치는 결정되지만 크기가 결정되지 않기 때문이다. 파란색 뷰나 노란색 뷰 둘 중 하나의 width를 설정해주면 크기또한 결정할수 있게 된다.

 

두개의 뷰의 크기를 같게 하고 싶다면 commad를 사용하거나 드래그를 통해 두가지를 선택한 다음 Equal Widths를 선택해 주면된다. 물론 노란색 뷰도 Top, Bottom, Trailing, Leading의 constraint가 20으로 설정된 상태이다. 아래 사진은 red view를 추가해 적용한 모습이다.

이번엔 수평이 아닌 수직 배열로 만들어 보고, 파란 뷰와 빨간 뷰의 높이만을 설정해보자. 그러면 노란색 뷰의 높이는 설정하지 않아도 xcode에서 추론해 낼 수 있기 때문에 에러가 발생하지 않는다.

노란 뷰와 빨간뷰의 Equal Width를 설정한 모습은 다음과 같다. 아이패드에서도 잘 적용된다.