StackView는 iOS 개발에서 UI 구성을 간편하게 해주는 도구입니다. SnapKit은 Swift 기반의 오픈 소스 라이브러리로, Auto Layout을 쉽게 다룰 수 있게 해줍니다. 이번 포스트에서는 SnapKit의 StackView를 사용하는 방법에 대해 알아보겠습니다.
1. SnapKit 설치하기
먼저, 프로젝트에 SnapKit을 설치해야 합니다. Cocoapods를 사용한다면 Podfile에 다음 내용을 추가합니다.
pod 'SnapKit'
그리고 터미널에서 다음 명령어를 실행하여 SnapKit을 설치합니다.
$ pod install
CocoaPods를 사용하지 않는다면, SnapKit의 GitHub 페이지에서 소스 코드를 다운받아 프로젝트에 직접 추가할 수도 있습니다.
2. StackView 만들기
SnapKit을 이용해 StackView를 만들기 위해 먼저, 필요한 모듈을 임포트합니다.
import SnapKit
그리고 StackView를 생성하고, 필요한 속성을 설정합니다.
let stackView = UIStackView()
stackView.axis = .vertical
stackView.spacing = 10
stackView.alignment = .center
stackView.distribution = .fill
axis는 StackView의 정렬 방향을 나타내며, .vertical은 세로 방향, .horizontal은 가로 방향입니다. spacing은 항목들 사이의 간격을 정의하며, alignment은 항목들을 어떻게 정렬할지, distribution은 어떻게 분배할지 결정합니다.
3. StackView에 view 추가하기
StackView에 추가할 뷰들을 생성한 후, addArrangedSubview() 메서드를 이용해 StackView에 추가합니다.
let view1 = UIView()
let view2 = UIView()
let view3 = UIView()
stackView.addArrangedSubview(view1)
stackView.addArrangedSubview(view2)
stackView.addArrangedSubview(view3)
StackView는 자식 뷰들을 자동으로 정렬하고, 크기를 조절해줍니다. 따라서 설정한 속성에 따라 자동으로 UI를 배치하게 됩니다.
4. StackView의 제약 조건 설정
StackView의 크기와 위치를 설정하기 위해, StackView에 대하여 Auto Layout을 적용해야 합니다. SnapKit의 snp 메서드를 이용하여 제약 조건을 설정할 수 있습니다.
stackView.snp.makeConstraints { make in
make.centerX.centerY.equalToSuperview()
make.width.equalToSuperview().multipliedBy(0.8)
}
위 코드는 StackView를 수평, 수직 중앙에 위치시키고, 부모 뷰의 가로 크기의 80%로 설정하는 예시입니다. 필요에 따라 제약 조건을 변경하여 원하는 대로 UI를 구성할 수 있습니다.
5. 화면에 보이기
마지막으로, StackView를 화면에 추가하기 위해 superview에 추가해줍니다.
view.addSubview(stackView)
stackView.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
addSubview() 메서드를 이용하여 StackView를 superview에 추가하고, makeConstraints() 메서드를 이용하여 StackView의 제약 조건을 설정합니다. 위 예시는 부모 뷰와 StackView의 모든 가로, 세로, 위, 아래 제약 조건을 동일하게 설정하는 예시입니다.
이제 StackView를 화면에 보이도록 설정하였습니다.
마무리
이제 SnapKit을 사용하여 StackView를 생성하고, UI를 배치하는 방법에 대해 알아보았습니다. SnapKit은 Auto Layout을 보다 간편하게 다룰 수 있게 도와주는 유용한 도구입니다. 자세한 사용법은 SnapKit의 공식 문서를 참고하시기 바랍니다.
참고 자료:
- SnapKit GitHub: https://github.com/SnapKit/SnapKit
- SnapKit 공식 문서: http://snapkit.io/docs/