[Swift] UIStackView 알아보기~!

CHO·2023년 2월 26일

오늘은 UIStackView에 대해 알아볼까 합니다^^,,,

저희 동아리 SOPT에서 진행한 과제를 복습하는 중에 있는데, 이전에는 이걸 하나씩 다 구현했거든요..!
그런데 StackView 를 사용하면 좀 더 깔끔하게 뷰를 짤 수 있다는 이야기를 듣고...! 공부를 진행하게 되었어요

1.StackView 개념?
위의 사진처럼 이미지 간 배치가 일정한 간격으로 나열될 수 있게 하는 방법을 말합니다!
하나하나 뷰를 짰어야 했는데, StackView를 쓰게 된다면

2.StackView 코드 짜는 법!

결론만 말하자면! StackView도 결국 UIView 위에 띄우는 것..! 따라서 뷰에 올릴 label을 생성하고 그걸 간격에 맞춰서 올리는 방식으로 진행된다!

장점 : autolayout의 기능을 활용해 기기의 방향, 화면의 크기 및 사용 가능한 공간의 모든 변경사항을 동적으로 적용할 수 있는 사용자 인터페이스를 만들 수 있다

1) UILabel 만들어라
UILabel 혹은 UIButton 등 필요한 타입의 UI를 생성합니다!

2) UIStackView 만들어라
그리고 StackView를 생성해주면 되는데요~!

여기서 짚고 넘어가야 할 개념이 있습니다!

여러개를 선언해 보았는데요~

axis : 축을 의미합니다! 그래서 어느 축(수직? / 수평?)으로 UILabel을 나열해 줄 것인지 설정해주기
alignment : subView를 정렬하는 방법입니다
-fill : stackview를 최대로 늘려서 가능한 공간을 채우기 위해 사이즈 재조정 함

distribution : subView들의 크기를 어떻게 분배를 할 것인지?
spacing : subView의 간격을 나눠주는 것..!

3) View에 stackView를 추가하고 label을 추가해라

여기서 addArrangedSubview($0) or insertArrangedSubview(_:at:)로 스택뷰에 subView를 추가할 수 있다.

addArrangedSubview($0)
: 배열의 끝에 뷰를 추가하는 메서드! 파라미터로 입력받은 뷰가 이미 스택뷰의 subView가 아닌 경우 스택뷰의 subView로 자동 추가한다. 즉 이미 스택뷰의 subView인 경우 순서를 변경하지 않는다.

insertArrangedSubview(_:at:) 의 경우
: 입력받은 인덱스에 입력받은 뷰를 정렬된 subView들의 배열에 추가한다

매일 개념 익히고 적용합니다