iOS - StackView(기본)

안녕하세요. brody입니다.

 

요즘 계속 이론만 정리해서 이번 포스팅은 실습으로 갈게요!!

 

글을 쓰다가 보니 너무 길어져서 "기본사용법"과 "공식문서 번역 & 샘플 프로젝트 하기"  2개로 나누어 작성할게요!

 

이번 포스팅은 StackView 기본 사용법 입니다.!!

 

이번 포스팅에서는 iOS9에 나온 StackView를 정리해볼게요

 

만약 아래와 같이 SNS로그인이 애플/카카오/구글이 있다고 가정해보죠.

 

그리고 해외에서 앱을 사용하면 카카오 로그인버튼을 빼고 싶다고 가정을 해 볼게요.

그럼 어떻게 해야 할까요?

예전에 저같은 경우는 스토리보드에 모든 뷰를 그리고 상황에 맞게 view를 hidden시키고 view의 height 를 0으로 주는 작업을 했는데요.

비효율적이죠..? 그래서 찾아보니 StackView라는게 있더라구요.

StackView에 subview 들을 넣은 후 hidden처리하면 모든게 오케이! 여서 너무 편했던 기억이 나네요. 

 

아래의 테스트 프로젝트는 아래 깃헙에 올려놨으니 참고하실분은 하세요~

https://github.com/brody424/iOS_StackView_Personal_Test

 

그러면 StackView 시작할게요!

 

---

 

우선 Xcode에 나와있는 StackView의 설명을 볼게요

 

우선 스택뷰의 타입은 2개가 있네요.

그리고 설명을 번역해보자면...

 

UIStackView는 수평(horizontal) 또는 수직(vertical) 뷰의 스택을 만드는데 필요한 제약조건(constraint)를 만들거나 관리합니다.

이것은 동적으로 제약조건이 제거되거나 추가될 때 뷰의 스택에서 제거되거나 추가됩니다.

커스터마이징을 하면 주변의 layout에 반응하고 영향을 줄 수 있습니다.

 

음.. 대충 스택에 동적으로 뷰를 쌓아서 추가하던지 제거할수있다는 뜻인거 같네요.

그리고 뷰를 쌓는 방법이 수평이거나 수직으로 가능하다는거 같아요.

 

그러면 바로 실습을 해보도록 하겠습니다.

 

빈 스토리보드에 스택뷰를 만드니 오른쪽에 평소에 못보던 녀석들이 생겼네요.

 

 

이게 무엇이냐 하면...

 

UIStackView안에 들어가 있는 뷰들을 arrangedSubViews라고 하는데요. 

안에 있는 subView들끼리 규칙을 정해서 StackView에 자동으로 배치가 됩니다.

규칙을 정해주는 옵션들이라고 보면 되겠습니다!

 

간단히 설명하고 하나씩 볼게요

Axis : 수직, 수평을 정하는 옵션

Alignment : StackView안에 view들의 Y축을 정렬하는 옵션

Distribution : StackView안에 view들의 X축을 정렬하는 옵션

Spacing : subview들 간의 간격을 설정하는 옵션

 

Axis

StackView의 수직(vertical)정렬할지 수평(horizontal)정렬할지 정하는 옵션입니다.  

만약 처음에 vertical로 StackView를 만들었다가 추후 horizontal로 교체하고 싶으면 사용하면 좋아요.

 

Alignment

StackView안에 view들의 Y축을 정렬하는 옵션이에요.

옵션으로는 Fill, Leading, Center, Trailing이 있어요. 

 

Fill

채운다느라는 의미로 subView들의 width를 stackView의 width와 맞춘다는 의미에요. 

Fill

 

 

Leading

subView들을 StackView의 왼쪽에 정렬한다는 의미에요.

 

Leading

 

 

Center

subView들을 StackView 중앙에 정렬한다는 의미에요.

Center

 

 

Trailing

subView들을 StackView 오른쪽에 정렬한다는 의미에요.

 

 

 

Distribution

StackView안에 view들의 X축을 정렬하는 옵션이에요.

옵션으로는 Fill, Fill Equally, Fill Proportionally, Equal Spacing, Equal Centering이 있어요. 

위의 예제로는 X축을 정렬할 수 없어서 새로운 예제를 준비했어요.

아래의 이미지와 같이 해시태그 3개가 있다고 가정해볼게요..

Distribution 옵션은 헷갈리니 꼭 직접 테스트 해보세요.. 저도 확신이 없네요 하하..

아래의 내용은 애플 공식문서 번역한 것입니다~

Fill

Stack View가 arranged views 의 크기를 조정하여 Stack View axis 를 따라 사용 가능한 공간을 채우는 레이아웃입니다.

arrranged views 가 Stack View에 맞지 않으면 압축 저항(compression resistance priority) 우선순위에 따라 보기를 축소합니다.

arranged views가 Stack View를 채우지 않는 경우, 고정 우선순위(hugging priority)에 따라 뷰를 확장합니다.

만약 모호할 경우 Stack View는 arranged viewsarrangedSubviews array의 index를 기준으로 arranged views의 크기를 조정합니다.

아래의 이미지는 각 Label의 크기로 채워진 상태로 보이네요.

 

 

 

Fill Equally

Stack View가  arranged views 의 크기를 조정하여 Stack View axis 를 따라 사용 가능한 공간을 채우는 레이아웃입니다.

View의 크기가 Stack View axis 옵션에 따라 모두 동일한 크기로 조정됩니다.

아래의 이미지는 가장 긴 #치킨먹고시푸앙~~ 의 길이로 통일되었는데 디바이스의 크기때문에 짤린 모습이네요.

 

 

Fill Proportionally

Stack View가  arranged views 의 크기를 조정하여 Stack View axis 를 따라 사용 가능한 공간을 채우는 레이아웃입니다.

View는 Stack View의 Axis 옵션을 따라 고유한 콘텐츠 크기에 따라 비례하여 크기가 조정됩니다.

아래의 이미지는 Fill과 다른점이 없어보이지만 subView에 width값에 따라 가는 옵션인거 같네요.

 

Equal Spacing

Stack View가 axis옵션을 따라 사용 가능한 공간을 채울 수 있도록 arranged views를 배치하는 레이아웃 입니다.

arranged views가 Stack View를 채우지 못하면 View 사이의 간격을 균등하게 Padding  합니다.

arranged views가 Stack View에 맞지 않으면 압축 저항 우선 순위(compression resistance priority) 에 따라 View를 축소합니다.

만약 모호할 경우 Stack View 는 arrangedSubViews array의 index  기준으로 보기를 축소합니다.

아래의 이미지는 Stack View를 채우지 못하여 간격이 균등해진 이미지입니다.

 

Equal Centering

View 간 간격 특성의 거리를 유지하면서 Stack View axis 옵셜을 따라 center-to-center로 같은 각을 갖도록 arranged views의 위치를 지정하려고 시도하는 레이아웃 입니다.

arranged views가 Stack View에 맞지 않으면 간격 속성에 의해 정의된 최소 간격에 도달할 때까지 간격을 축소합니다.

그래도 View가 맞지 않으면 Stack View는 압축 저장 우선 순위(compression resistance priority)에 따라 arranged view를 축소합니다.

만약 모호할 경우 Stack View 는 arrangedSubViews array의 index  기준으로 보기를 축소합니다.

 

Spacing

Stack View내의 view간의 거리 옵션입니다.

아래의 이미지는 Spacing을 20준 SNS 로그인 화면이에요.

Spacing

 

 

---

후... 이번 포스팅에서는 기본적인 내용을 알아봤는데 

Distribution이 아직도 헷갈리네요.

조금더 테스트하고, 다음 Stack View 공식문서를 본 후 다시 한번 테스트 해봐야 겠네요.

 

그럼 ㅅㄱㄹ!

 

 

 

 

출처

https://rhammer.tistory.com/210

https://hcn1519.github.io/articles/2017-05/stackView

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