[iOS 오토레이아웃 Views with Intrinsic Content Size] Fixed Height Columns

[iOS 오토레이아웃 Views with Intrinsic Content Size] Fixed Height Columns

이번 예제는 아래 2개 예제를 합친 예제입니다.

Dynamic Height Label and Text Field 

2018/08/01 - [iOS] - [iOS 오토레이아웃 Views with Intrinsic Content Size] Dynamic Height Label and Text Field

Fixed Height Columns

2018/08/01 - [iOS] - [iOS 오토레이아웃 Views with Intrinsic Content Size] Fixed Height Columns

그렇게 어렵지 않습니다만, 추가해야할 제약조건이 많이 늘어나기 때문에 상당히 귀찮습니다. 개념자체는 위 2개 예제랑 같기 때문에 굳이 안 해보셔도 될 것 같습니다. 다만 한가지 해결해야할 사항과 과제가 있습니다.

View and Constraints

1. First Name Label.Top >= Safe area.top + 20.0

2. First Name Label.Top = Safe area.top + 20.0 (Priority 249)

3. First Name Text Field.Top >= Safe area.top + 20.0

4. First Name Text Field.Top = Safe area.top + 20.0 (Priority 249)

5. Middle Name Label.Top >= First Name Label.Bottom + Standard

6. Middle Name Label.Top = First Name Label.Bottom + Standard (Priority 249)

7. Middle Name Text Field.Top >= First Name Text Field.Bottom + Standard

8. Middle Name Text Field.Top = First Name Text Field.Bottom + Standard (Priority 249)

9. Last Name Label.Top >= Middle Name Label.Bottom + Standard

10. Last Name Label.Top = Middle Name Label.Bottom + Standard (Priority 249)

11. Last Name Text Field.Top >= Middle Name Text Field.Bottom + Standard

12. Last Name Text Field.Top = Middle Name Text Field.Bottom + Standard (Priority 249)

요정도가 추가 되면 되겠네요.

Atrributes

Label들은 right 정렬,

Label과 textField의 CHCR은 초기값

* 문서에서는 초기값을 사용하라고 하지만 그렇게 하면 위 gif파일에서 보이는 것처럼 label text font size가 커지면 잘리는 것을 볼 수 있습니다. 이게 위에서 말한 해결해야 할 사항입니다 어떻게 해야할까요? 한 번 해보시기 바랍니다. 혹시나 보신다면 말이죠... 어렵지 않습니다. 

Discussion

이미 앞에서 했던 개념들을 사용하는 거라서 딱히 할 게 없습니다. 다만, 과제가 있네요. 1행에 있는 label과 textfield 2개와 safe area.top 거리가 20으로 고정돼 있습니다. Adaptive Single view(2018/07/27 - [iOS] - [iOS 오토레이아웃 simple constraints] Adaptive single view)에서 한 것 처럼 status bar가 있고 없고에 따라서 자동적으로 변하게 하려면 어떻게 해야할 까요? 

First Name.top >= safe area.top + 20 에서 First Name.top >= superview.top + 20으로

First Name.top = safe area.top + 20@249 에서 First Name.top = superview.top + 20 @249 으로

Frist Name.top = Safe Area.top + 8 @750 추가하면 됩니다.

위에서 해준 것처럼 First name Text Field에도 똑같이 해주면 됩니다.

끝으로 아래 글에서 보여 준 것처럼 stackview를 쓰면 보다 적은 제약조건을 가지고 비슷하게 만들 수 있습니다. 

2018/05/21 - [iOS] - [iOS Autolayout] Why stackViews first, constraints later