OS/iOS

[iOS] Stack View

Quaker.Lee 2024. 11. 19. 21:13

 

 

 

 

Stack View

스택 뷰란, 뷰들이 스택으로 쌓여있는 형태의 뷰를 말한다.

Vertical(수직), Horizontal(수평) 두가지의 스택 뷰가 있다.

 

 

 

Horizontal Stack View

 

cmd + shift + L을 눌러서 stack을 검색하면 두가지 view가 나온다.

 

 

그리고 놓으면 여타 뷰들 처럼 그냥 흰색의 직사각형이 하나 생긴다.

잘 안보이기 때문에, 배경색을 집어넣고  크기를 바꿔보자.

 

배경색은 오른쪽 인스펙터 영역에서,

 

크기는 Constraints에서 바꿔주도록 하겠다.

 

 

두가지 다 설정을 해주고 나면,

 

 

 

요런식으로 Vertical Stack View가 커졌다!

 

이제 이름처럼 stack을 해보자.

똑같이 cmd + shift + L을 누르고, view 3개를 만들어서 Stack View 밑으로 넣는다.

 

 

 

그리고 알아보기 힘들기 때문에 또 백그라운드에 색을 넣어준다.

 

그리고 이때, 이런식으로 3개의 사이즈가 맞지 않을 것이기 때문에, 

 

 

 

스택 뷰를 선택하고, 아래의 사진처럼 인스펙터 영역에서 Distribution으로 가서 Fill Equally를 선택하면

각 뷰의 사이즈가 동일하게 변경된다.

 

 

 

 

 

그리고 Distribution 아래에 있는 Sapcing에 값을 넣어주면, 뷰 간의 거리를 조절할 수도 있다.

이런식으로. 회색으로 보이는 이유는 맨 처음 Stack View를 만들었을 때, 식별을 위해 배경색을 회색으로 지정했기 때문이다.

 

 

 

 

 

Vertical Stack View

만드는 과정이나 방법은 Horizontal과 모두 같다.

처음부터 Vertical Stack View를 선택하거나, 아니면

 

오른쪽에 있는 인스펙터 영역에서 맨 위에 있는 Horizontal 저 부분을 클릭하고 Vertical로 변경하면 된다.

 

 

그럼 이런식으로 변경된다.