[iOS Autolayout] Why stackViews first, constraints later

[iOS Autolayout] Why stackViews first, constraints later

Stack views provide an easy way to leverage the power of Auto Layout without introducing the complexity of constraints.

In general, use stack views to manage as much of your layout as possible. Resort to creating constraints only when you cannot achieve your goals with stack views alone.

The following recipes show how you can use stack views to create layouts of increasing complexity. Stack views are a powerful tool for quickly and easily designing your user interfaces. Their attributes allow a high degree of control over how they lay out their arranged views. You can augment these settings with additional, custom constraints; however, this increases the layout’s complexity.

from apple auto layout guide document

애플의 오토레이아웃 가이드를 보면 스택뷰를 권장하고 constraints를 지양하는 것을 볼 수 있습니다. constraints이 많이지면 우선순위도 따져야 하고 굉장히 복잡해 집니다.

그럼 예를 들어서 스택뷰가 얼마나 constraints를 줄일 수 있는지 보겠습니다. 

위와 같은 레이아웃을 만들 때

only contraints    stackview & constrains

 stacview를 쓰지 않고 constraints만 쓴다면, 아래와 같이 17개의 constraints를 써야 합니다. 

1. First Name Label.Leading = Superview.LeadingMargin

2. Middle Name Label.Leading = Superview.LeadingMargin

3. Last Name Label.Leading = Superview.LeadingMargin

4. First Name Text Field.Leading = First Name Label.Trailing + Standard

5. Middle Name Text Field.Leading = Middle Name Label.Trailing + Standard

6. Last Name Text Field.Leading = Last Name Label.Trailing + Standard

7. First Name Text Field.Trailing = Superview.TrailingMargin

8. Middle Name Text Field.Trailing = Superview.TrailingMargin

9. Last Name Text Field.Trailing = Superview.TrailingMargin

10. First Name Label.Baseline = First Name Text Field.Baseline

11. Middle Name Label.Baseline = Middle Name Text Field.Baseline

12. Last Name Label.Baseline = Last Name Text Field.Baseline

13. First Name Text Field.Width = Middle Name Text Field.Width

14. First Name Text Field.Width = Last Name Text Field.Width

15. First Name Text Field.Top = Top Layout Guide.Bottom + 20.0

16. Middle Name Text Field.Top = First Name Text Field.Bottom + Standard

17. Last Name Text Field.Top = Middle Name Text Field.Bottom + Standard

반면, stackview를 쓰면 

1. SuperView.Trailing Margin = Stack View.Trailing

2. Stack View.Leading = SuperView.LeadingMargin

3. Stack View.top = Top Laout Guide.Bottom + 20

이렇게 stackView 3개와 3개의 constraint만 쓰면 됩니다. constraints의 숫자도 약 6배 정도 차이 나지만 그 뿐만 아니라 관리하기도 편합니다.

예를 들어 label과 textField 사이의 공간을 조정하려면 constraint만 쓴 건 3개의 constraint를 수정해야 하지만 stackview를 쓴 건 stacview에 spacing(CGFloat) 하나만 조절해주면 됩니다.