소개

잘 알고 있는 Auto Layout iOS 반응형 디자인을 마스터 을 참고로 AutoLayout에서 배운 것을 기사로 해 가고 싶습니다. 이번에는 케이스에서 Autolayout을 배우고 싶습니다.

케이스 1 동일 폭의 오브젝트를 늘어놓는 케이스

다음과 같이 Button을 3개 균일하게 정렬

거친 절차

1. ContainerView 배치
2. Button 를 3개 배치
3. 제약 추가
Button 를 그룹화하기 위해서 부모가 되는 ContainerView ( UIView )를 작성해, 중첩한다.

제약에 대해

수평 방향
ContainerView
1. ContainerView.leading = leading2. trailing = ContainerView.trailingButton
3. Button1.leading = leading + 54. Button2.leading = Button1.trailing + 55. trailing = Button3.trailing + 56. Button3.leading = Button2.trailing + 57. Button2.width = Button1.width8. Button3.width = Button1.widthContainerView 는 화면 폭에 고정되어 있어(1, 2) 폭은 결정하고 있으므로 3개의 버튼의 폭을 동일하게 해(7, 8), 수평 방향의 제약을 붙이는 것으로(3~6) , Button의 너비가 결정됩니다.

수직 방향
ContainerView
1. ContainerView.centerY = centerYButton
2. Button1.top = top3. bottom = Button1.bottom4. Button2.centerY = centerY5. Button3.centerY = centerY
수직 방향의 제약은 이것만으로 좋다. 왜냐하면 Button 의 높이(폭)는 텍스트와 Font에 의해 결정되기 때문이다. 따라서 2, 3의 제약에 의해 자연과 부모의 ContainerView의 높이도 결정한다. 1. 에 의해 수직 방향의 제약이 화면의 중앙에 설정되어 있으므로 여기서 수직 방향의 제약이 결정된다. ContainerView 의 높이가 결정되어 있으므로 (4, 5) 에 의해 Button2 , Button3 의 높이도 결정한다.
이것이 간과하기 쉽고 높이 제약을 여분으로 추가하는 경우가 많다. 여분의 제약은 버그의 온상이 된다. 의도적으로 Button 의 높이를 결정하고 싶은 경우는 ContainerView 의 높이를 결정하면 변경할 수 있다.

제약의 전체 이미지

사례 2 등 간격으로 배열되는 객체

다음과 같이 Button을 3개 균일하게 나란히 하고 등간격으로 배치한다.

거친 절차

1. ContainerView 배치
2. Button 를 3개 배치
3. 간격을 위해 사용 View 배치
4. 제약 추가

첫 번째와 절차는 대략 동일하지만 이번에는 등 간격으로 배치하기 위한 View를 준비한다. ( Space1 , Space2 )

제약에 대해

수평 방향
ContainerView
1. ContainerView.leading = leading2. trailing = ContainerView.trailingButton
3. Button1.leading = leading + 54. Space1.leading = Button1.trailing5. Button2.leading = Space1.trailing6. Space2.leading = Button2.trailing7. Button3.leading = Space2.trailing8. trailing = Button3.trailing + 59. Space2.width = Space1.width10. Button2.width = Button1.width11. Button3.width = Button1.width
케이스 1과 거의 같지만 이번에는 4~7의 제약에 의해 Button 사이의 폭은 Space1와 Space2의 폭으로 하고 있다. 이 외에도 9의 제약 조건에서 Space1와 Space2를 같은 너비로 설정하여 가로 방향의 너비를 결정하는 등 간격 폭을 계산합니다.

수직 방향
ContainerView
1. ContainerView.centerY = centerYButton
2. Button1.top = top3. bottom = Button1.bottom4. Button2.centerY = centerY5. Button3.centerY = centerY6. Space1.centerY = Button1.centerY7. Space2.centerY = Button1.centerY8. Space1.height = 19. Space2.height = 1
수직 방향 제약은 케이스 1과 거의 동일하다. 다른 부분은 7~9에 의해 Space의 수직 방향의 제약을 결정하고 있는 곳이다.Space1 와 Space2 는 간격을 결정하기 위한 보기이므로 색은 투명색을 설정한다. 그러나, 투명색을 설정하는 경우에는, 투과 처리가 들어가 묘화 퍼포먼스가 떨어지므로, 배경색이 정해져 있는 경우는 배경색을 설정하는 편이 좋다.

제약의 전체 이미지