[iOS_Swift] 스택뷰(StackView)의 모든 것_ 6

안녕하세요~ 개발하는 윤기사입니다!

 

주말에는 나머지 공부좀 하고, 월요일 기념으로 스택뷰에 관한 내용을 가지고 돌아왔습니다!

 

갑자기 스택뷰를...?

 

왜냐하면 최근에 알게 된 내용이라, 가장 따끈따끈할 때 설명해드리면 좋을것 같아서 가져왔습니다!

 

스택뷰(StackView)는 뷰들을 일정한 간격으로 배치하기 위해 사용됩니다!

 

StackView를 배치한 후 그 내부에 View들을 추가하여 사용하셔도 되고, View들을 묶어서 StackView로도 만들 수 있습니다!

 

Stack View를 이용하면 보다 편하게 배치할 수 있고, 제약 조건을 걸기도 훨씬 수월해 집니다.

 

바로 시작해 보겠습니다!

 

- Stack View -

 

1. 프로젝트 생성 후 Cmd + Shift + L 누르시고 uiview를 3개 가져오겠습니다.

 

 

2. 적당한 크기로 만들어주시고, 구분이 잘 가도록 색상도 지정해줍니다.

 

3개의 uiView 생성

 

3. Cmd 버튼을 누른 상태로 View를 선택해서 3개의 뷰를 한 번에 선택합니다.

오른쪽 밑에 Embed in View 버튼을 눌러주면 Stack View를 찾으실 수 있습니다! 바로 눌러주세요.

그럼 3개의 뷰가 하나의 스택뷰로 묶인 것을 확인할 수 있습니다.

 

스택뷰 확인!

 

4. 스택뷰의 제약 조건을 걸어주겠습니다. Horizontally, Vertically Container 값을 0으로 설정해줍니다.

 

디바이스 정중앙에 위치시키기!

 

5. 위치만 잡아주었으니, 스택뷰의 크기도 정해주어야 합니다. 이번에는 Width, Height의 고정값을 주도록 하겠습니다.

 

너비와 높이 고정 값 입력

 

👋 완성한 것처럼 보이지만!? 맨 밑에 초록색 뷰의 이미지가 제일 큽니다...?? 크기가 다르네요.

 

크기가 다른데...?

 

6. 스택뷰를 클릭하셔서 Inspector영역으로 옵니다.  Distribution의 박스를 누르시면 아래와 같이 확인할 수 있습니다! 

 

• 1) Fill : 현재 기준 방향으로 채우는 속성입니다.
• 2) Fill Equally : 스택뷰 너비에 맞게 채워주는 방법, 그리하여 각 뷰의 너비를 동일하게 맞춰줍니다.
• 3) Fill Proportionally : 컨텐츠 사이즈를 기준으로 내부 뷰들의 너비를 변경해줍니다. (Label, ImageView 등에 따라 다름)
• 4) Equal Spacing : 내부 뷰들의 간격들만 조정합니다. 내부 뷰들의 크기나 너비는 변경되지 않습니다.
• 5) Equal Centering : 스택뷰 내부 뷰들의 너비 중간지점을 구해 각 뷰들의 중간 지점 사이의 거리를 동일하게 맞춰줍니다.

 

분배 옵션

 

혹은 Spacing을 이용해 각 뷰의 간격을 조절할 수도 있습니다. 값이 크면 더 넓게, 값이 작으면 더 좁아집니다.

 

Spacing 조절방법

 

👋 스택뷰의 내부 뷰들의 정렬 방식은 Horizontal(수평), Vertical(수직) 방법이 가능합니다. 

 

수평 정렬도 가능하다!!

 

 

이상 스택뷰에 관한 포스팅을 마치겠습니다~~

 

다음 포스팅에서는 더 알찬 내용을 가지고 돌아오겠습니다! 

 

개발하는 윤기사는 앞으로도 빡코딩하겠습니다😎😎