Colin's Blog
[swift] 스택 뷰에서의 스크롤 기능 추가하기

스택 뷰(Stack View)는 iOS 앱 개발에서 자주 사용되는 UI 컨테이너입니다. 스택 뷰는 여러 개의 뷰를 수직 또는 수평으로 정렬하여 편리하게 배치할 수 있는 장점이 있습니다. 하지만 때로는 스택 뷰 안에 들어가는 뷰들의 크기가 스크린 크기를 초과하여 스크롤 기능이 필요한 경우가 있습니다. 이번 블로그 포스트에서는 스택 뷰에서 스크롤 기능을 추가하는 방법에 대해 알아보겠습니다.

스크롤 가능한 스택 뷰 만들기

스크롤 가능한 스택 뷰를 만들기 위해서는 UIScrollView와 스택 뷰를 조합하여 사용해야 합니다. UIScrollView는 컨텐츠가 스크롤되는 뷰입니다. 스택 뷰는 UIScrollView의 컨텐츠로 사용될 것입니다.

먼저, UIScrollView를 생성합니다. 인터페이스 빌더를 사용하는 경우 UIScrollView를 추가하고 Auto Layout을 설정해줍니다. 이후에 스택 뷰를 UIScrollView의 서브뷰로 추가합니다.

let scrollView = UIScrollView()
let stackView = UIStackView()

// 스택 뷰 기본 설정
stackView.axis = .vertical
stackView.spacing = 10

// 스택 뷰에 뷰들을 추가합니다.

scrollView.addSubview(stackView)

// 스택 뷰와 스크롤 뷰를 Auto Layout을 사용하여 제약을 설정합니다.

위 코드에서 스택 뷰에 뷰들을 추가하는 방법은 여러 가지가 있습니다. 초기화된 스택 뷰에 addArrangedSubview(_:) 메소드를 사용하거나, 스택 뷰의 subviews 배열에 직접 뷰를 추가할 수도 있습니다.

스크롤 뷰와 스택 뷰의 Auto Layout을 설정하는 방법은 자주 사용되는 방법입니다. 스크롤 뷰와 스택 뷰 모두 leading, trailing, top, bottom 제약을 설정해야 합니다. 스택 뷰의 width 제약을 스크롤 뷰와 같게 설정하고, height 제약은 contentSize에 따라 동적으로 조정되도록 설정합니다.

// 스크롤 뷰와 스택 뷰의 Auto Layout 제약 설정

NSLayoutConstraint.activate([
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    scrollView.topAnchor.constraint(equalTo: view.topAnchor),
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
    stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
    stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
    stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
    stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
    stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
])

스크롤 가능한 스택 뷰 사용하기

위와 같이 스크롤 가능한 스택 뷰를 만들면, 스택 뷰에 넣을 뷰들의 크기가 스크린 크기를 초과하는 경우에도 스크롤 기능이 작동하게 됩니다. 스크롤 뷰는 자동으로 뷰의 크기에 맞게 스크롤이 가능하도록 조정해줍니다.

스크롤 뷰에 뷰들을 동적으로 추가하거나 삭제할 수 있으며, 스택 뷰를 사용하는 장점인 자동적인 레이아웃 관리도 그대로 사용할 수 있습니다.

결론

스택 뷰에서 스크롤 기능을 추가하는 방법에 대해 알아보았습니다. 스크롤 가능한 스택 뷰를 사용하면 화면 크기에 상관없이 많은 양의 내용을 스크롤할 수 있습니다. 스택 뷰와 스크롤 뷰를 조합하여 화면을 효율적으로 구성할 수 있게 됩니다.

© 2018 Colin. All rights reserved.