[iOS 오토레이아웃 Views with Intrinsic Content Size] Two Buttons with Equal Spacing

from apple auto layout guide

[iOS 오토레이아웃 Views with Intrinsic Content Size] Two Buttons with Equal Spacing

이 예제는 겉으로보기에는 Two Equal-Width Buttons()와 같다. 하지만 이 예제에서는 두 버튼의 너비는 가장 길이기 큰 text를 기준으로 같아진다. 충분한 공간이 있으면 두 개의 버튼의 너비는 가장큰 text를 담고 있는 버튼의 너비까지 늘어난다. 추가적으로 두 개의 버튼 사이에 있는 여분의 공간은 똑같이 나눠진다.

Two Buttons width Equal Spacing 예제와 Two Equal Width Buttons의 차이

Two Buttons width Equal Spacing

vaView and Constraints 

1. Leading Dummy View.Leading = Superview.LeadingMargin

2. Short Button.Leading = Leading Dummy View.Trailing

3. Center Dummy View.Leading = Short Button.Trailing

4. Long Button.Leading = Center Dummy View.Trailing

5. Trailing Dummy View.Leading = Long Button.Trailing

6. Trailing Dummy View.Trailing = Superview.TrailingMargin

7. Safe Area.bottom = Leading Dummy View.Bottom + 20.0

8. Safe Area.bottom = Short Button.Bottom + 20.0

9. Safe Area.bottom = Center Dummy View.Bottom + 20.0

10. Safe Area.bottom = Long Button.Bottom + 20.0

11. Safe Area.botttom = Trailing Dummy View.Bottom + 20.0

12. Short Button.Leading >= Superview.LeadingMargin

13. Long Button.Leading >= Short Button.Trailing + Standard

14. Superview.TrailingMargin >= Long Button.Trailing

15. Leading Dummy View.Width = Center Dummy View.Width

16. Leading Dummy View.Width = Trailing Dummy View.Width

17. Short Button.Width = Long Button.Width

18. Leading Dummy View.Height = 0.0

19. Center Dummy View.Height = 0.0

20. Trailing Dummy View.Height = 0.0

Atrributes

button의 크기를 보기 쉽게 button의 배경색을 줍니다.

Discussion

 예제가 복잡해 보입니다. 이 예제는 특정 기술을 설명하기 위해 만단 예제입니다.  실제 앱을 만들 때는 stack view를 사용하세요. 제약조건을 주기 위해서 더미 뷰를 만들고 똑같은 여백을 만들기 위해서 equal width를 줍니다. 너비만 필요하기 때문에 height를 0으로 해서 이 뷰가 영향을 미치지 않게 합니다. 

더미뷰는 레아이웃에 상당한 비용을 더합니다. 따라서 현명하게 사용하셔야 합니다. 만약에 뷰가 크다면 메모리도 많이 잡아 먹을 수 있습니다. 별로 중요한 정보도 없는데도 말이죠.

추가적으로 뷰계층에 포함됩니다. ui측면에 개입할 수 있습니다. 클릭에 반응한다던지 따라서 최소한 user interface enabled를 false나 체크를 해야겠네요.

그래서 더미뷰 대신에 UILayoutGuide를 사용할 수 있다고 합니다. 이 가벼운 클래스에 제약조건을 줄 수있습니다. 더미뷰처럼 graphic context도 없고 뷰계층에 포함되지도 않습니다. 이런 점에서 layout guide는 아이템을 그룹한다거나 공백을 만들때 이상적입니다. 

안타깝지만 IB에서는 추가 할 수 없습니다. 그래서 프로그래밍적으로 만들어야하는데 이렇게 되면 stroy board랑 마구 섞여서 복잡해 질수 있습니다. 그래서 더미뷰를 사용했습니다.

*나중에 코드로 만들 때 해봐야겠습니다.

12,13,14 제약조건은 버튼 주변에 최소한의 공간을 만듭니다. 

15,16,17 제약조건에 의해 2개의 버튼과 3개의 더미뷰 width가 같아집니다. 

충분한 공간이 없을 때는 최소 여백을 남겨둔채 더미뷰의 width가 최대로 축소하고 버튼이 남은 공간을 나눠가집니다. 그리고 여분의 공간이 늘어나면 긴 text를 가지고 있는 button의 width가 intrinsic content size를 만족할 때까지 커집니다. 그리고 나머지 영역은 3개 의 더미뷰가 비슷하게 나눠 갖습니다.