20210603 - StackView

 

 

StackView란, 말 그대로 view 여러 개를 함께 쌓는 것을 말한다.

 

 

 

Top view, Middle view, Bottom view를 커맨드키를 눌러 다중 선택을 하고

상단 메뉴바에서 Editor - Embed in - Stack View를 선택해준다.

 

UI element들을 view에 넣을 때와 마찬가지로,

하단에 있는 Embed In 버튼을 사용해도 좋다.

 

 

 

Stack View 항목이 새로 생기고,

각각의 view들이 embed 된 것을 확인할 수 있다.

 

이 과정을 통해 Xcode에서 3개의 view들이 상대적으로 어떤 위치에 배열되는지 알게 된다.

 

 

---Challenge )

Stack View에 constraint를 부여해서, safe area에 들어가지 않도록 한다.

 

-> Safe Area를 기준으로 constraint를 부여한다.

-----

 

 

Stack View의 attributes inspector에서 

Axis - Vertical,

Distribution - Fill Equally

설정을 해주면 화면을 가로로 바꾸더라도 세 개의 view가 동일한 비율로 화면을 차지한 것을 확인할 수 있다.

 

 

---

 

Roll 버튼에 bottom view를 기준으로 align constraint를 만들어준다.

 

 

--- Challenge )

2개의 주사위를 수평이 되도록 정렬시킨다.

 

-> 두 개의 이미지뷰를 Stackview에 넣고, 간격을 조정 (space)한 다음,

align constraint를 부여한다.

 

 

------

 

 

Roll 버튼의 크기가 상당히 거슬리는데,

글자를 둘러싸는 배경에 조금의 여백을 만들 것이다.

 

 

먼저 Roll 버튼을 선택해서 add new constraint - Width / Height 값을 부여한다.

 

 

위와 같은 경고 메세지가 나타나는데,

 

 

 

노란 삼각형을 눌러서 'Set Constraint to >= Current width'를 선택해준다.

참고로 xcode에서 에러 메시지가 뜰 때 아이콘 안에 동그란 원이 있다면,

xcode에서 생각하는 해결방안들을 보여준다.

 

constraint to >= current width를 선택하여

만약 버튼의 lable이 길어져서 내가 지정한 사이즈(width : 100)를 초과하게 된다면 

버튼의 사이즈가 100으로 고정되어 글자가 잘리는 대신,

모든 글자를 보여줄 수 있을만큼 길어지게 된다.

 

 

inspector 영역에서도 수정할 수 있다.

 

 

 

 

 

마지막으로

Top View, Middle View, Bottom View의 배경색을 투명하게 없애준다.

attributes inspector - Background - Default로 변경하면 된다.

 

 

 

---

 

 

Boss Challenge )

 

Calculator-Layout-iOS13 

skeleton project 받아서, 어플이 가로/세로 모드로 UI가 잘 나오도록 수정할 것

 

 

 

 

 

->

 

Challenge에서 요구하는 조건 Bronze, Silver, Gold 모두 충족