[iOS 오토레이아웃 Views with Intrinsic Content Size] Two Buttons with Size Class-Based Layouts

from apple auto layout guide

[iOS 오토레이아웃 Views with Intrinsic Content Size] Two Buttons with Size Class-Based Layouts

이번에는 size class를 이용한 예제입니다. size class는 iPhone과 iPad에 가로와 세로를 규격화한 것입니다. Compact,Regular 그리고 2개를 다 포함하는 Any까지 3가지 입니다. 가로 3가지 세로가지 하면 9가지가 됩니다. 그리고 제약조건의 size class는 기본적으로 AnyAny입니다.

보다 자세항 사항은 아래 링크에서 확인하세요~

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

이 레이아웃은 Any-Any layout 일 때는 [Two Equal-Width Buttons]와 같이 되고 Compact-Regular layout일 때는 버튼이 위아래로 쌓이는 UI입니다. (Compact-Regular 는 width가 Compact이고 height가 Regular라는 뜻입니다)

Any-Any

제약조건이 installed 변수를 이용해서 size class 이용하고 있습니다.

첫 번째 제약조건 예를 들면, Any-Any일 때는 해제 됐다가 wC-hR에서는 설치된 걸 알 수있습니다.

wChR

View and Constraints 

처음에 그냥 iPhone8을 하면 wC-hR입니다. 그리고 제약조건을 추가합니다. 2 번과 5번을 Any-Any일 때 만 installed하게 해주시고 wChR일 때는 installed해제하고, 3,8,9는 반대로 합니다.

1. Short Button.Leading = Superview.LeadingMargin

2. Long Button.Leading = Short Button.Trailing + Standard

3. Long Button.Trailing = Superview.TrailingMargin

4. Safe Area.Bottom = Short Button.Bottom + 20.0

5. Safe Area.Bottom = Long Button.Botton + 20.0

6. Short Button.Width = Long Button.Width

7. Long Button.Leading = Superview.LeadingMargin

8. Short Button.Trailing = Superview.TrailingMargin

9. Long Button.Top = Short Button.Bottom + Standard

Atrributes

button의 크기를 보기 쉽게 button의 배경색을 주고 text 길이가 버튼 너비에 영향이 안 미치는 것을 보기 위해서 2개 의 버튼에 길이가 다른 text를 입력하세요

Discussion

IB에서 하는 방법은 제약조건의 installed를 이용하는 방법도 있고 ''Vary for Traits"버튼을 이용하는 방법도 있습니다. installed는 width-height을 다 줘야하지만 "Vary for Traits"는 width-height 하나씩 만 줄 수 있습니다.