UIStackView

 

StackView는 기기의 방향, 화면의 크기, 사용 가능한 공간의 변경에 동적으로 적응할 수 있는 인터페이스를 생성합니다.

스택뷰의 축(axis), 분배(distribution), 정렬(alignment), 간격(spacing) 및 기타 속성에 따라 다양합니다.

스택뷰의 Layout은 무조건 지정해주어야 하며, 그 내부의 콘텐츠들의 사이즈까지 조정하려면 사이즈도 지정해주어야 합니다.

 

 

 

Axis(축)

완: Vertical StackView 오: Horizontal 스택뷰

 

axis = .Horizontal(가로방향)인 가로축 스택뷰인 경우

• 첫 번째 뷰의 왼쪽 Edge == StackView의 왼쪽 Edge
• 마지막 뷰의 오른쪽 Edge == StackView의 오른쪽 Edge

axis = .Vertical(세로방향)인 세로축 스택뷰인 경우

• 첫 번째 뷰의 Top Edge == StackView의 Top Edge
• 마지막 뷰의 bottom Edge == StackView의 Bottom Edge

 

Distribution(분배)

• fillEqually 이외의 모든 분배(distribution)에 대해서는 스택뷰가 스택의 축을 따라 크기를 계산할 때 각 배열된 뷰의 intrincisContentSize속성을 사용합니다
• IntrincisContentSize = "고유한 콘텐츠 사이즈"
• 대부분의 View들은 Content크기에 맞게 따로 width, height을 지정하지 않아도 자동으로 autoLayout이 적용된다. 이유는 intrincisContentSize가 콘텐츠 크기에 맞게 사이즈를 계산해 주기 때문입니다.
• 따라서 StackView에서도 fillEqually를 제외하고는 ArrangeView들의 intrincisContentSize를 이용해 Axis에 따른 StackView의 사이즈를 계산해 줍니다.

1. fill

• StackView의 Axis(축)을 따라 가능한 공간을 모두 채우기 위해 Arrange view들의 사이즈를 재조정합니다.
• 내부 뷰들이 stackView의 크기를 초과한다면 각 뷰의 compression resistance priority에 따라 각 뷰의 크기를 감소시킵니다.
• 내부 뷰들이 stackView의 크기를 미달한다면 각 뷰의 hugging priority에 따라 각 뷰의 크기를 재조정합니다.

fill

 

2. fillEqullay

• 뷰들은 StackView의 축을 따라 모두 같은 사이즈를 갖기 위해 재조정됩니다.

fillEqullay

 

3. fillProportionally

• 스택뷰를 채우고 남은 공간이 생긴다면 intrinsic content size의 비율에 맞게 공간을 분배하여 resize 됩니다.
• 남은 공간이 100이고, view 4개의 intrinsic content size의 비율이 2:3:3:2라면 20:30:30:20으로 분배되어 resize 됩니다.

fillProportionally

 

4. equalSpacing

• StackView 내부의 Views들 사이의 공간을 균등하게 배치합니다.
• 뷰들이 스택뷰를 채우기에 부족하다면 스택뷰는 뷰들 사이의 공간을 균일하도록 재배치합니다.
• 뷰들이 스택뷰를 초과한다면 뷰들의 compression resistance priority에 따라 뷰의 사이즈를 감소시킵니다.

equalSpacing

5. equalCentering

• 뷰들의 Center to Center의 거리를 동일하게 유지합니다.
• 유지하는 간에 최소한 스페이싱 프로퍼티의 값만큼의 거리는 유지됩니다.

equalCentering

 

Alignment(정렬)

 

1. fill

• 스택뷰의 축에 따라 가능한 스택뷰의 공간을 채우기 위해 뷰들의 사이즈를 재조정합니다.
• 수직인 경우 아래위 공간을 fill 하기 위해 늘립니다.
• 수평인 경우 좌우 공간을 fill 하기 위해 늘립니다.

fill

2. center

• 스택뷰가 축을 따라 View들의 센터를 스택뷰의 센터에 맞춰 정렬합니다.

center

3. leading

• 수직인 경우 뷰들의 탑을 스택뷰에 탑에 맞추어 정렬합니다.
• 수평인 경우 스택뷰에서 뷰들의 leading Edges는 StackView의 leading에 맞춰 정렬됩니다.

leading

 

4. traling

• 수직인 경우 뷰들의 바텀을 스택뷰의 바텀에 맞추어 정렬합니다.
• 수평인 경우 스택뷰에서 뷰들의 trailing Edges는 StackView의  traling에 맞춰 정렬됩니다.

traling

5. top

• 수직인 경우 뷰들의 탑이, stackView의 탑에 맞추어 정렬됩니다.
• 수평인 경우 leading과 동일합니다.

top

 

6. bottom

• 수직인 경우 뷰들의 바텀이, stackView의 바텀에 맞추어 정렬됩니다.
• 수평인 경우 trailing과 동일합니다.

bottom

7. firstBaseLine

• firstBaseLine을 기준으로 뷰를 정렬합니다.
• 수직을 위한 레이아웃입니다.

firstBaseLine

8. lastBaseLine

• LastBaseLine을 기준으로 뷰를 정렬합니다.
• 수직을 위한 레이아웃입니다.

lastBaseLine

 

https://developer.apple.com/documentation/uikit/uistackview