Swift - StackView
안녕하세요 오늘은 StackView에 대해서 간단히 알아보려합니다!
스택뷰(StackView)는 뷰(View)들을 일정한 간격으로 배치를 하기 위해서 사용합니다.
또한 동적으로 내부 크기나 위치를 조절할 수 있도록 해주는 UIView입니다!
스택뷰(StackView)를 넣은 후 내부에 뷰(View)들을 추가하여 사용하면 됩니다.
물론, View 사이의 관계는 Constraint(제약) 설계도 가능하지만, Stack View를 이용하면 좀 더 쉽게 사용이 가능합니다.
먼저 사용된 것을 보여드리면
정말 많이 보신 형태라고 생각합니다.
말 그대로 스택!
겹겹이 쌓아서 올린다고 생각하면 편리한 것 같아요.
StackView의 속성들 입니다.
Axis -> Horizontal / Vertical
수직이냐 수평이냐!
즉 레이아웃의 방향을 결정합니다.
Spacing 은 스택 뷰 내부 요소들의 사이 간격을 설정합니다.
간격은 설정한 axis에 따라 상하 or 좌우에 적용됩니다.
Alignment 속성
스택 뷰의 axis의 수직 방향을 기준으로 요소들을 어떻게 정렬할지 결정하는 속성입니다. 스택뷰를 처음 생성했을 때는 기본값으로 Fill이 설정되어 있고, alignment 로 설정 할 수 있는 속성들은 다음과 같습니다.
Horizontal 일때:
Fill: 스택 뷰의 높이만큼 내부 요소들의 높이를 결정해 스택뷰의 높이만큼 채웁니다.
Top: 스택 뷰의 내부 요소들의 높이를 유지하면서 스택 뷰 상단에 붙여줍니다.
Center: 스택 뷰의 내부 요소들의 높이를 유지하면서 스택 뷰 중앙에 정렬합니다.
Botton: 스택 뷰의 내부 요소들의 높이를 유지하면서 스택 뷰 하단에 정렬합니다.
Vertical 일 때:
Fill: 스택 뷰의 가로 길이만큼 내부 요소들의 너비를 결정해 스택 뷰의 가로만큼 채웁니다.
Leading: 스택 뷰의 내부 요소들의 너비를 유지하고 기준 지역에 따라 글자가 시작하는 방향으로 당겨서 채웁니다.
영어는 문장을 왼쪽에서 오른쪽 방향으로 읽기 때문에 왼쪽으로 당겨서 정렬됩니다.
Center: 스택 뷰의 내부 요소들의 너비를 유지하고 중앙에 정렬합니다.
trailing: 스택 뷰의 내부 요소들의 너비를 유지하고 기준 지역에 따라 글자가 끝나는 방향으로 당겨서 채웁니다.
영어는 문장을 왼쪽에서 오른쪽 방향으로 읽기 때문에 오른쪽으로 당겨서 정렬됩니다.
Fill 속성
현재 기준 방향으로 요소들을 채우기 위한 속성입니다.
만약 내부 요소들의 너비의 합이 스택 뷰의 너비보다 크다면 compression resistance priority 에 따라 서브 뷰들의 크기를 줄이고, 내부 요소들의 너비의 합이 스택 뷰의 너비보다 작으면 hugging priority에 따라 뷰들의 너비를 확장시킵니다.
compression resistance priority: 최소 크기에 대한 제한 우선순위
hugging prioity: 최대 크기에 대한 제한 우선순위
Alignment, Fill 관련 내용은
위의 링크에서 참고하였음을 밝힙니다!!
Distribution은 스택뷰의 axis의 수평방향을 기준으로 내부 요소들을 어떻게 배치할지 결정하는 속성입니다.
위와 같이 5개로 나눠집니다.
내부 요소들이 어떻게 채워지느냐라고 생각하면 될 것 같아요!
TIP!! (지극히 개인적인)
Add Editor on Right을 누르면 화면이 나뉘면서 Main과 ViewController 등 코드를 같이 볼 수 있습니다!
위와 같이요 !
그리고 만약 버튼에 함수(@IBOutlet / @IBAction 등)를 넣고 싶을 때 굳이 작성하지 않아도 드래그 앤 드랍으로 가능하면
참 편하겠다는 생각을 했는데
방법이 있었습니다!
원하는 버튼과 그에 따른 컨트롤러를 열고 원하는 위치에 control키와 함께 드래그 하면 되었습니다!
드래그를 하게 되면 어떻게 만들 것인지 창이 간략하게 나오고 연결이 되게 됩니다!
위와 같은 방식으로 IBAction으로 함수를 생성이 되었습니다! 참 편리하네요