UIStackView

UIStackView

- 복잡한 제약조건 없이 UI구성 가능

​

예시)

카카오톡의 대화창 TableView의 Cell 중 한 부분입니다.

그냥 View들을 배치할 수도 있지만, 만약 StackView를 사용한다면,

StackView 안에 가로축으로  [ (이미지 View), (발신자 + 톡 내용 첫번째 줄로 구성된 View), (시간, 안읽은 메세지 수로 구성된 View) ] 를 배치할 수 있겠네요.

 

그냥 뷰를 배치하는 것과 스택뷰에 넣어서 배치하는 것을 구분짓는 기준은

스택뷰에 들어가는 뷰가 런타임 도중 동적으로 제거되거나 추가될 때 기존 뷰들의 레이아웃이 바뀌냐 안바뀌냐에 따라 나눌 수 있습니다.

예를 들어

"위 카톡 대화창에서 이미지뷰가 사라질 때 나머지 뷰들이 이미지뷰가 사라진 만큼 왼쪽으로 땡겨져야 한다!"

라는 기획안이 나온다면 이미지뷰의 유무에 따라 오토레이아웃이 적용되어야 하므로 스택뷰에 넣어야겠죠.

 

만약 이런 변화 없이 그냥 이미지뷰만 띠용 하고 날아가게 해주세요. 라고한다면 오토 레이아웃을 적용시킬 필요가 없으니

굳이 스택뷰를 쓰지 않아도 되겠죠. 오히려 개발 복잡도만 증가시킬 수도 있겠네요.

 

---

스택뷰는 arrangeSubviews들의 포지션과 사이즈를 맞추기 위해 오토 레이아웃을 사용합니다.

오토 레이아웃을 적용해주기 위해 StackView의 속성들을 세팅해주어야 하는데요.

속성들에는 1. Axis 2. Distribution 3. Alignment 4. Spacing 이 있습니다.

 

 

UIStackView attribute

 

1) Axis

 

 

 

 

 

 

 

 

 

 

 

 

이와 관련된 프로퍼티가 하나 있는데요.

isLayoutMarginsRelativeArrangement

플래그를 True로 설정할 시, StackView는 Content의 Edge 기준이 아닌 스택뷰 - 컨텐츠 사이의 Layout에 마진 값을 두어 ArrangeViews들을 배치할 수 있습니다.

        let stvPractice = UIStackView()
        stvPractice.then {
            $0.isLayoutMarginsRelativeArrangement = true
            $0.axis = .horizontal
            $0.layoutMargins.left = 15.0
            $0.layoutMargins.right = 15.0
        }

이런식으로 설정한다면,

첫번째 뷰와 스택뷰의 leading Edge가 15.0, 마지막 뷰와 스택뷰의 Trailing Edge가 15.0만큼의 마진값을 두고 배치될 것 입니다.

 

---

 

 

2) Distribution

StackView 안에 들어가는 뷰들의 사이즈를 어떻게 어떻게 분배할지 설정하는 속성

 

UIStackView.Distribution.fillEqually 플래그만 제외하고 모든 Distribution 설정에서,

StackView는 Axis(축)의 사이즈를 계산할 때 각 arrangedSubview들의 intrinsicContentSize프로퍼티를 이용한다.
UIStackView.Distribution.fillEqually 플래그는 StackView의 Axis(축)에 따라 StackView를 채우기 위해 모든 Arrange Views들의 사이즈를 동일하게 재조정 한다.  가능하다면, StackView는 모든 Arrange View들을 가장 긴 Size를 가진 View에 맞춰 늘리기를 시도한다.

 

2.1 ) Fill:
arrange views들이 StackView의 크기를 초과한다면, 각 뷰의 compression resistance priority에 따라 각 뷰의 크기를 감소
arrange views들이 StackView의 크기에 미달이라면, 각 뷰의 hugging priority에 따라 각 뷰를 증가
만약 뭔가 모호한 점(ambiguity)가 생긴다면, StackView는 arrangedSubviews 배열의 인덱스에 기초하여 각 뷰들의 크기를 재조정

• compression resistance priority
  • 최소 크기에 대한 저항
  • compression(짜부) 에 대한 resistance(저항)
  • 숫자가 클수록 안작아질거야! 가 강해짐
• hugging priority
  • 최대 크기에 대한 저항
  • 숫자가 클수록 안늘어날꺼야! 가 강해짐

따라서 shrink 해야할 때는 각 view들의 compression resistance priority를 비교해 제일 낮은 뷰 부터 크기를 감소

stretch 해야할 때는 각 view들의 hugging priority를 비교해 제일 낮은 뷰 부터 크기를 증가

 

2.2) Fill Equally

축을 따라 모두 같은 사이즈를 갖기위해 재조정

 

2.3) Fill Proportionally

일단 StackView를 채우고, 남은 공간이 생긴다면 intrinsic content size 의 비율에 맞게 공간을 분배하여 resize

남은 공간이 100이고, view 3개의 intrinsic content size의 비율이 1:4:5라면, 남은 공간도 10:40:50 대로 분배되어 재조정

 

2.4) Equal Spacing

subview들 사이 공간을 균등하게 배분

 

2.5) Equal Centering

subView들의 center - center간 거리를 동일하게 View의 위치를 재조정한다

 

---

 

3) Alignment

stackview의 subview들을 어떻게 정렬할지 설정하는 속성

 

3.1) Fill

Axis가 Horizontal인 경우, 아래 위의 공간을 fill 하기 위해 늘리고,

Axis가 Vertical인 경우, 좌우 공간을 fill 하기 위해 늘리는 플래그

3.4) First Baseline

View들의 first baseline에 맞춰 StackView가 View들을 정렬.  오직 가로 축 (Horizontal) StackView에서만 유효

3.5) Center

View들의 center를 StackView의 Center에 맞춰 정렬

 

---

 

4) Spacing