[iOS] 여러개의 View를 한 번에 정렬하기, UIStackView

여러개의 View를 한 번에 정렬하기,UIStackView

 

이 글은 UIStackView의 용도와 간단한 사용법에 대해서 설명합니다.

 

서비스를 만들다보면 여러 개의 구성요소를 한 가지 규칙으로 일괄적으로 변경하면(정렬하면) 편한 상황이 있습니다. 예를 들어 아래와 같은 모습처럼 요소들을 관리하고 싶은 경우가 있죠.

 

출처:https://stackoverflow.com/questions/35432204/uistackview-distribute-views-evenly-from-the-centre

 

 

현재 개발 중인 서비스의 요금 내역(경유지 요금, 통행료, 기타 등)을 나열하는 기능이 필요했고, UIStackView를 사용하여 문제를 해결했습니다. 지금 부터는 UIStackView의 사용법을 알아보겠습니다.

 

Xcode의 스토리보드에서 UIStackView를 검색하고, Scene에 추가합니다. 여기서 Horizontal Stack View는 여러 개의 View를 가로 방향으로 관리합니다. 반대로 Vertical Stack View는 세로 방향으로 View들을 관리합니다.

 

(안드로이드 개발을 하시는 분들은 UIStackView가 LinearLayout과 비슷한 개념이라고 생각해시면 됩니다!)

 

Scene에 추가된 Stack View에 관리하고 싶은 View들을 모두 집어 넣습니다.

 

그리고 Xcode 우측의 Inspectors에서 Stack View 내부에 View 들에 대한 속성을 조절할 수 있습니다. 

 

Axis: UIStackView의 방향을 결정(가로 또는 세로)

Aligmnet: UIStackView 내부 View들의 Y축 정렬을 관리 

Distribution: UIStackView 내부 View들의 X축 정렬을 관리 

Spacing: 정렬된 View 들의 간격을 수치로 입력

 

 

이러한 설정의 예시로 Axis를 Horizontal, Alignment를 Fill, Distribution을 Fill Equally, Spacing을 10으로 설정하여 다음과 같은 화면을 구성할 수 있습니다.

 

 

 

출처

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