채팅앱을 만들면서 채팅 UI를 어떻게 그려야할지에 대한 트러블 슈팅
프로필 영역과 닉네임은 고정으로 값이 있는 영역이고 채팅은 케이스가 세개임
1. 텍스트만 있는 경우
2. 이미지만 있는 경우
3. 텍스트 + 이미지가 함께 있는 경우
텍스트 영역 & 하단 이미지 영역을 하나의 스택뷰로 감쌈
스택뷰를 사용한 이유
처음에는 스택뷰를 사용하지 않고 UI를 작성하였는데
텍스트만 있는 경우나 이미지만 있는 경우에 제약조건을 재설정해주어야 하는 번거로움이 있었음
그에 따라서 시간을 나타내는 Label에 대한 제약조건도 변경되어야 하기 때문에 상당히 번거롭게 느껴짐
스택뷰를 사용하면 텍스트 or 이미지가 없는 경우 그냥 Hidden만 시키면 됨
또 스택뷰의 Bottom과 시간 Label의 bottom을 맞춰놓으면 스택뷰의 크기에 맞게 설정됨
이미지 영역을 하나의 스택뷰를 두고 수평방향 스택뷰 두개를 사용하게 된 이유
1. 이미지가 여러장일 경우 Width를 각각 잡아줘야 하는 번거로움이 있었음
수평방향 스택뷰 + Fill Equally를 적용하면 동일 크기로 이미지를 설정할 수 있음
2. 사진 개수에 대해 유연하게 대응할 수 있음
스택뷰 두개 형태일 경우 첫번째 스택뷰에만 서브뷰를 넣고, 두번째 스택뷰를 사용하지 않더라도
height가 컨텐츠 사이즈에 맞게 조절됨
왼쪽 상태에서 아래 두개의 이미지를 삭제하면 2개 이미지일 때 높이를 대응할 수 있었음
Label과 이미지는 크기가 다를 수도 있음
이미지는 고정된 크기를 갖는 반면 Label은 컨텐츠에 따라 다른 너비를 갖게 됨
그렇기 때문에 최상단 StackView의 alignment는 leading으로 지정함
(Fill으로 설정되어있다면 Label의 너비가 스택뷰의 크기에 맞게 늘어날 수 있음)
StackView의 Distribution과 Alignment는 아래 글 참고
'iOS > 쫌쫌따리 트러블슈팅' 카테고리의 다른 글
| [Swift] class와 struct의 didSet 차이점 (0) | 2024.06.09 |
|---|