[내용정리] Swift - StackView사용법과 속성들 (1/2)

stackView를 사용하면서 view들을 묶어서 일정하게 정렬한다라는 뜻으로 이해하고 사용하였다.

하지만 앱을 개발하다보니 distribution의 속성들에 대해서도 명확히 알고 가야한다는 필요성을 느끼게되어 정리해본다.

 

 

현재 스토리보드없이 CodeBase(Programmatically)방식으로 개발중이셔서
코드로 정리를 진행할 예정이다. 뷰를 짜는 방식만 다를 뿐, 속성등의 사용법은 동일하다.

 

 

우선 stackView란 무엇인가?

화면의 View들을 개발자가 지정한대로 배치하기 위해 사용한다.

stackView의 종류는 크게 두가지가 존재한다.

• Horizontal StackView: View들을 가로로 배치
• Vertical StackView: View들을 세로로 배치

 

 

보통 코드내 stackView를 구성할 때 상단에 stackView을 만들고
그밑으로 해당 스택뷰에 담을 view(subView)들을 정의한다. 
ex) 하단의 이미지 참고

stackView 코드구성

실제 코드로 구현하여 사용한 예제다.

• arrangedSubviews: 하나로 묶고 싶은 View들을 원하는 순으로 배열에 지정
• axis: 가로배치, 새로 배치를 지정
• distribution: 어떤방식으로 뷰들이 분포할지 지정
• spacing: 각 subView들 사이의 여백을 특정값으로 지정
• alignment: stackView의 axis에 수직인 뷰들의 레이아웃을 정하는 Flag

 private var stackView: UIStackView = {
    var stackView = UIStackView(arrangedSubviews: [view_1, view_2, view_3])
    stackView.axis = .horizontal
    stackView.distribution = .fill
    stackView.spacing = 10
    return stackView
  }()
  
  private var view_1: UIView = {
    var view = UIView()
    view.backgroundColor = .yellow
    return view
  }()
  
  private var view_2: UIView = {
    var view = UIView()
    view.backgroundColor = .blue
    return view
  }()
  
  private var view_3: UIView = {
    var view = UIView()
    view.backgroundColor = .black
    return view
  }()

속성을 이해하기전에 알아야할 내용은 대부분의 View들은 컨텐츠 크기(width, height)를 따로 지정해주지 않아도
intrinsicContentSize에 의하여 AutoLayout이 적용된다.

distribution속성중 하나인 Fill Equally만 제외한 나머지 4가지의 설정에서

StackView내의 axis의 사이즈 계산시 각 subView들의 intrinsicContentSize를 이용한다.

 

*intrinsicContentSize: 고유 컨텐츠 사이즈
컨텐츠 크기에 맞는 사이즈를 계산해준다.

 

 

유일하게 Fill Equally만 axis에 따라 stackView를 채우기 위해 내부의 subView들의 사이즈를 동일하게 resizing한다.

또한 StackView는 제일 긴 size를 가진 subView를 기준으로 view들을 맞춰 늘리는 성질을 갖고 있다.

쉽게풀면 Fill Equally만 고유 컨텐츠 사이즈? 나 그딴거몰라 그냥 stackView안에 채우기만 하면돼! subView들 사이즈 내맘대로 할거야!

라고 생각하면 된다.

 

 

 

distribution의 방식은 5가지가 존재한다.
예시 이미지는 axis를 Horizontal로 지정하여 진행하였다.

 

Distribution

1. Fill 
stackView 내에서 가능한 공간을 모두 채우기 위해 view들의 사이즈를 resizing하며,
설정을 따로 해주지 않은 view들은 남은공간을 꽉 채우게 된다.
노랑, 파랑 순으로 뷰에 정상으로 채워지고
블랙은 공간이 부족하여 크기를 감소시켜서 채워지게 된다.
color 이미지 처럼 subView가 stackView보다 커지면 지정해준 compression resistance priority에
따라서 뷰의 크기를 감소시킨다. 숫자가 크면 저항력이 높아지는 것이니 낮은 view가 먼저 압축 된다.

Fill

2. Fill Equally
stackView내에서 axis의 지정에 따라 모든 View들이 같은 크기로 채워진다.
view들의 크기를 줄이거나, 늘이면서라도 3가지의 모든뷰들을
같은 크기로 맞춰서 배치한다.

Fill Equally

3. Fill Proportionally
axis에 따라 해당 공간을 모두 채우기위해 subView들을 resizing한다.
intrinsic content size를 기초로하여 비례적으로 resizing을 하는데
예를 들어 100의 공간이 있으며 subView3개가 각 비율이 1:3:6이면 남은공간을 
10:30:60으 resizing될 것이다.

Fill Proportionally

4. Equal spacing
spacing(view사이의 여백)을 동일하게 맞춰 배치한다.
subView크기를 resizing하면서라도 여백을 동일하게 맞춘다.
이또한 compression resistance priority에 맞춰 순위가 낮은 뷰를 먼저 감소시키며
따로 설정을 하지 않았다면, arrangedSubviews에 index에 늦게 들어온 subView가
우선순위가 낮은것으로 간주된다.

Equal spacing

5. Equal Centering
모든 view를 각 뷰의 center기준으로 균등하게 배치한다.
만약 지정해준 spacing이 존재한다면 해당 값만큼 유지하지만
subView들이 StackView의 범위를 초과한다면
먼저 spacing간격을 좁히고 그래도 초과하게 된다면
compression resistance priority이후 arrangedSubviews index를 고려하여
subView를 감소시킨다.

Equal Centering

현재까지 distribution에 대해서 알아보는 시간을 가졌다.

내용이 길어지는 관계로 alignment에 대해서 2편에서 알아보도록 한다.

https://yoonds-develop.tistory.com/49