[iOS] 🍽 UIStackView

 

 

StackView란

 

열 또는 행에 view들의 묶음을 배치할 수 있는 간소화된 인터페이스.

AutoLayout을 이용해 디바이스의 스크린 사이즈나 일어날 어떤 변화에 맞춰서 동적이 ui를 구성할 수 있다. 복잡한 ui를 구성하는 데 있어서 하나하나 AutoLayout 제약 조건을 사용하면 제약 조건이 많아져서 복잡하고 관리하기 어려워진다. 게다가 원하는 대로 ui 구성이 되지 않을 수 있다. StackView를 사용하면 AutoLayout 제약 조건을 많이 설정하지 않아도 쉽게 ui 구성 가능하다.

 

StackView는 arrangeSubviews들의 포지션과 사이즈를 맞추기 위해 AutoLayout을 사용한다.

이를 위해 StackView의 속성들을 세팅해줘야 한다.

 

 

UIStackView의 속성창

 

 

StackView 속성창을 보면

 

• Axis: 스택의 축을 설정한다. → Vertical(수직), Horizontal(수평) 
  
  

 

Axis

 

• Alignment: StackView가 어떤 식으로 하위 뷰들을 정렬할 것인지 설정한다. 
  
  
  1. fill: StackView의 Axis와 수직인 방향으로 가능한 공간을 채우기위해 View들의 사이즈 재조정. Axis가 Horizontal인 경우, 아래위의 공간을 fill 하기 위해 늘리고, Vertical인 경우, 좌우 공간을 fill 하기 위해 늘린다. 
     
     

     

     fill (Horizontal)

     
     
     
  2. leading: Vertical StackView에서 View들의 leading Edge와 StackView의 leading Edge에 맞춰 정렬. 
     
     

     

     leading

     
     
     
     
  3. top: Horizontal StackView에서 View들의 Top Edge와 StackView의 Top Edge에 맞춰 정렬. 
     
     

     

     top

     
     
     
     
  4. firstBaseline: View들의 first baseline에 맞춰 StackView가 View들을 정렬하는 것. 오직 Horizontal StackView 만.
     
     

     

     firstBaseline

     
     
     
     
  5. center: StackView가 축을 따라서 View들의 center를 StackView의 Center에 맞춰 정렬.
     
     

     

     center

     
     
     
     
  6. trailing: Vertical Stack의 Trailing Edge와 뷰들의 Trailing Edge를 맞춰 정렬. Horizontal Stack의 bottom 정렬과 동일
     
     

     

     trailing

     
     
     
     
  7. bottom: Horizontal Stack의 Bottom Edge와 뷰들의 Bottom Edge를 맞춰 정렬. Vertical Stack의 Trailing 정렬과 동일
     
     

     

     bottom

     
     
     
     
  8. lastBaseline: StackView가 View들의 last baseline에 맞춰 View들을 정렬. 오직 Horizontal StackView에서만.
     
     

     

     lastBaseline

  
  
  
• Distribution: Axis를 따라 View들을 어떻게 분배할 것인지에 대한 속성. Axis를 따라 가능한 공간을 모두 채우기 위해 View들의 사이즈 재조정
  
  
  1. fill: view들이 StackView 크기를 초과한다면, 각 뷰의 compression resistance priority에 따라 각 뷰의 크기를 감소시킨다. view들이 StackView 크기에 미달이라면, 각 뷰의 hugging priority에 따라 각 뷰의 크기를 증가시킨다. 
     
     

     

     
     
     
  2. fillEqually: 모두 같은 사이즈로 재조정
     
     

     

     
     
     
  3. fillProportionally: StackView를 채우고, 남은 공간이 생긴다면 intrinstic content size의 비율에 맞게 공간 분배 재조정
     
     

     

     
     
     
     
  4. equalSpacing: StackView 내부의 view들 사이의 공간을 균등하게 배치하는 옵션
     
     

     

     
     
     
     
  5. equalCentering: 각 view의 center-center 간 길이를 동일하게 맞춤
     
• Spacing: StackView 안의 view들의 간격을 조정하는 속성
  
  

 

 

 

 

 

 

💡공부 및 기록용 블로그이므로 오류가 있을 수 있습니다.💡

만약 문제에 오류나 오타가 있다면 댓글로 알려주세요➿
언제나 환영합니다. 감사합니다. 화이팅!