iOS) Auto Layout 정복하기 (4/5) - 스택뷰(Stack View)

 

안녕하세요 :) 소들입니다

글을 안 쓴지 이렇게 오래 된 줄도 몰랐다니...!!!!!!

나를 매우 쳐라!!!!!!!!!!!!!!!

 

쨌든 이번 포스팅은 스택뷰에 대한 거예요!

오토레이아웃을 5단계에 걸쳐 쓸라고 나눠놨는데

3단계에서 끝났고....ㅎ

3단계에 감사하단 댓글이 너무 많고...ㅎ

4, 5편도 기대하겠단 댓글도 있고...ㅎ

 

해서 5편까지 일단 끝내보잔 생각으로 스택뷰에 대해 정리해볼까 합니당

스택뷰는 생각보다 화면을 구성할 때 많이 쓰이기도 하고 유용하기도 하니!!

잘 알고 써봅시당 :)

모든 포스팅은 편의 말투로 합니다~!!

 

 

 

 

1. 스택뷰란?

 

여러 개의 뷰를 정렬해서 나타낼 때 능률적인 인터페이스입니다

 

넹..ㅎ 딱딱하넴...ㅎ

여러 개의 뷰를 정렬한다는 게 무슨 말이나면,

 

 

 

 

이렇게 3개의 "뷰(Label)"들을 위처럼 한줄로(vertical) 나란히 정렬하고 싶을 때

마치 바둑판 처럼!!!!

 

자, 근데 우린 스택뷰를 모른다면 어떻게 했겠셈

바로 이전에 공부한 Constraints란 제약조건을 이용해서 Autolayout을 설정했을 거셈

 

 

 

 

이런 식으로!!!! 

 

근데 이렇게 Label 하나하나마다 Constraints를 지정해줄 수 도 있지만,

이렇게 바둑판처럼 열, 또는 행으로 줄줄이 나열하는 뷰들의 경우

앞으로 배울 스택뷰 라는 것을 활용하면 더 간단하게 나타낼 수 있음

 

엥 그럼

스택뷰라는 것을 사용하면 각각 Label의 Constraints를 지정해주지 않아도 되나?

란 생각까지 도달하잖음?? 결론적으론 맞음!!

그럼 어떻게 Constraints를 설정하지 않아도 AutoLayout 설정이 되는건지는 

다음 사용법에 대해 공부하면서 보겠음!!

 

일단 그럼 지금은 스택뷰의 정의에 대해 알아보는 것이니,

스택뷰란 바둑판처럼 행 & 열로 나열되는 뷰들의

 AutoLayout을 설정할 때 간편한 인터페이스구나! 정도로 압시다 :)

 

자 이제 사용법 공부 고고

 

 

 

 

2. 스택뷰를 사용하여 AutoLayout 설정하기

 

먼저, 스택뷰는 총 두 가지가 있는데,

 

 

 

 

뭐 가로, 세로에 따라 어떻게 정렬될지에 따라 다를 거겠잖음?

우리가 만들 모양은 Horizontal Stack View라는 것을 이용해서 나타낼 수 있음!!

 

 

 

2-1. 스택뷰를 생성하자

 

먼저, StackView를 생성하는 방법은 

 

 

 

 

이렇게 Horizontal 스택뷰를 하나 생성하고 

여기에 스택뷰에 들어가길 원하는 뷰를 드래그 해서 넣어줄 수도 있음

 

 

 

 

요렇게!!!  

근데 이렇게 할 수도 있찌만,

스택뷰에 넣고 싶은 뷰들을 모두 클릭한 상태로(Command + 클릭)

 

 

 

 

이렇게 Stack View해서 넣어주면

어쨌거나 다음과 같은 모양이 된다 :)

 

 

 

 

알아서 일렬로 붙어버렸군 낄낄

 

 

 

2-2. 스택뷰의 AutoLayout을 설정해주자

 

열어분 위에서 스택뷰 안의 뷰들의 Constraints을 설정하지 않아도 된다 했다고

Constraints를 아예 설정하지 않으면 앙대연

 

당연하게도 스택뷰의 위치정도는 AutoLayout으로 잡아줘야함

 

 

 

 

이렇게!!!!!!!!  다만!!!

스택뷰는 내부 뷰의 크기에 따라 사이즈(width, height)가 자동으로 정해지기 때문에

Top, Leading(혹은 Trailing)으로 스택뷰의 "위치"만 설정해주어도 AutoLayout 설정이 되는 것!

 

만약, 내가 "춥고" Label의 Height를 Intrinsic Content Size에 따르지 않고

직접 100으로 주면, 

 

 

 

 

스택뷰의 Height는 위처럼 제일 큰 View의 Height인 100으로 맞춰질 것임!!!

오케이!?!?

 

이런 식으로 스택뷰의 AutoLayout을 맞춰주면,

내부 뷰들은 그에 따라 별도의 Constraints 설정 없이 정렬이 됨 :)

 

 

 

2-3. Spacing

 

근데 내가 원한 모양은 이런 모양이 아닌데!!!!!!!!!!!!!!!!!!!!!!!

Label 간 간격이 있어야 하는데!!!!!!!!!!!!!

 

넹 Spacing을 주시면 됩니다

Spacing은 스택뷰 안의 뷰 간 간격을 설정할 때 사용함

 

 

 

이렇게 20을 설정하면, 

내부 Label들 간의 간격이 20만큼 벌어지게 됨!!

 

 

 

2-4. Alignment

 

그 외에도 서로 다른 크기를 가진 View들을 스택뷰를 이용해 정렬할 때,

 Alignment를 이용해서 좀 더 세부적인 설정이 가능함

이거를 보기 위해 다시 아까처럼 "춥고" Label의 Height를 100으로 맞춰 보겠음

 

 

 

이건 비교하기 쉽게 표로 보여드리겠음!!!

 

 

1️⃣ Horizontal

 

	Fill	Top	Center	Bottom
특징	사이즈 만큼 뷰들이 채워짐	위쪽으로 정렬	가운데 정렬	밑쪽으로 정렬
비교

 

 

2️⃣ Vertical

(Vertical의 경우 "춥고" Label의 width를 100으로 설정해봄)

 

	Fill	Leading	Center	Trailing
특징	사이즈 만큼 뷰들이 채워짐	왼쪽으로 정렬	가운데 정렬	오른쪽으로 정렬
비교

 

 

어렵지 않져 :)

 

 

 

2-5. Distribution

 

스택 뷰 안의 뷰들의 관계를 나타낼 때 사용하는 것이

바로 Distribution임!!!

 

일단 이를 설명하기 위해서 추가로 스택뷰의 trailling을 30으로 주겠음!

(그럼 스택뷰의 top, leading, trailing 조건이 있으니, width가 동적으로 잡히겠잖음!?)

 

 

1️⃣ Fill

 

스택뷰의 trailing을 30으로 주자마자 fill은 에러남 ㅎㅎ

 

 

 

왜냐?

fill은 내가 맞춘 크기에 맞게 뷰들을 채우기 때문임

다만, Priority는 알아서 설정해주어야 함

 

지금같은 경우 스택뷰의 width가 정해져버렸기 때문에,

이때 어떤 Label이 Intrinsic content size를 지키지 못하고 늘어날래??

라는 priority에 대한 설정을 "내가" 직접 해주어야 함

 

 

2️⃣ Fill Equally

 

 

 

 

모든 뷰들의 크기를 "같게" 맞춰줌

다만 이때 spacing을 만약 10으로 준다면 spacing은 다음과 같이 유지됨

 

 

 

 

이렇게!!!

 

 

3️⃣ Equal Spacing

 

이게 좀 어려울 수 있는데,

내부 뷰들의 크기는 본연 크기대로 잡히는데,

이때 이 뷰들 간의 간격을 동일하게 하겠다는 말임

 

 

 

 

이런 식으로!

뷰들 간의 간격(spacing)이 동일함 ㅎㅎ

 

이때 내가 만약 spacing을 20으로 설정했더라도,

이와 상관 없이 뷰들의 spacing이 동일하게 지정됨!

(다만 이때 이 spacing의 최소값이 내가 지정한 20이 되는 것임)

 

 

 

 

이런 식으로 뷰들의 사이즈가 아무리 커져도

최소한의 spacing은 내가 지정한 20을 유지함!!

 

 

4️⃣ Equal Centering

 

컨텐츠들의 가운데를 기준으로 간격이 맞춰진다

 

 

 

 

이런식으로 Label의 Center들을 기준으로

저 양 옆의 보라색 선의 간격이 같아야 함

 

 

 

 

요런 느낌ㅎㅎㅎㅎ

느낌 오셈?ㅎㅎㅎ 오셔야함

 

 

5️⃣ Fill Proportionally

 

비율적인 개념임!!

컨텐츠의 크기가 크면 여백이 커지고

컨텐츠의 크기가 작으면 여백의 작아짐

 

 

 

 

이렇게!! 가장 큰 첫 번째 Label이 여백이 제일 크고

가장 작은 3번째 Label의 여백이 제일 작게 들어감

 

물론 이때 Spacing은 내가 지정한 값(20)으로 잘 들어감 ㅎㅎ

 

 

 

 

 

 

 

 

.

.

.

오늘은 스택뷰에 대해 정리를 해보았읍니다!!!!

틀린 내용이나 이해가 안 가는 설명은 댓글 주시면 수정 하겠습니다 :)

읽어주셔서 감사합니다