[Swift] 스크롤이 되는 StackView 만들기

안녕하세요!
가벼운 주제의 글을 쓰는 소라미입니다🥹
오늘은 Swift에서 StackView를 사용할 때 스크롤이 가능하게 하는 방법에 대해 알아볼게요 :)

자, 다음과 같은 스택뷰가 하나 있다구 합시다

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.backgroundColor = .yellow
        
        stackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: view.topAnchor),
            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            stackView.heightAnchor.constraint(equalToConstant: 100)
        ])
    }
}

이 StackView에

11111111
22222222
33333333
44444444
55555555

라는 텍스트를 가진 UILabel 5개를 addArrangedSubview를 통해 넣으면
어떻게 되냐면용

StackView는 기본적으로 스크롤이 되지 않기 때문에,
컨텐츠가 다 표시되지 못하고 짤리게 됩니다ㅠㅁㅠ

따라서 이때 스택뷰를 스크롤 되게 하려면,
ScrollView로 스택뷰를 한번 감싸야하는데요

그 방법을 알아보겠습니다

Scroll되는 StackView 만들기(Vertical)

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.heightAnchor.constraint(equalToConstant: 50)
        ])
    }

StackView를 만들기 전에, 먼저 ScrollView를 만들어주고
기존 StackView의 AutoLayout을 이번엔 ScrollView로 잡아주셔야 합니다!

그리고 다시 StackView를 만드는데,
이번엔 ScrollView로 감싸줘야 하기 때문에 addSubView를 ScrollView에 해줍니다

        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(stackView) ✅

그리고 이제 가장 중요한, StackView의 AutoLayout 설정 인데요

        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.backgroundColor = .yellow
        stackView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(stackView) 
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            stackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor),
            stackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor),
            stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)  🔥
        ])

ScrollView의 내부 사이즈에 맞게 감싸는 것은 당연하지만,
여기서 유의해야 할 것은 StackView의 widthAnchor를 scrollView의 widthAnchor로 맞춰주셔야 합니다!!!
heightAnchor는 맞출 필요 없어요

이렇게 하면

짜잔! 스크롤이 가능한 스택뷰가 됩니다
물론, 스택뷰 크기가 스크롤뷰 크기보다 작을 경우엔 스크롤이 되지 않습니다😇

Scroll되는 StackView 만들기(Horizontal)

horizontal 스택뷰의 경우엔, 설정이 한 가지 달라지는데요

       let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.heightAnchor.constraint(equalToConstant: 50)
        ])
        
        let stackView = UIStackView()
        stackView.axis = .horizontal ✅
        stackView.backgroundColor = .yellow
        stackView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            stackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor),
            stackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor),
            stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            stackView.heightAnchor.constraint(equalTo: scrollView.heightAnchor) 🔥
        ])

아까 Vertical StackView에선
StackView의 widthAnchor를 scrollView의 widthAnchor로 맞춰주셨잖아요?
Horizontal StackView일 경우엔 StackView의 heightAnchor를 scrollView의 heightAnchor 맞춰주셔야 합니다

이렇게 하면,
스크롤이 되는 Horizontal StackView도 완성!!

전체 코드

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.heightAnchor.constraint(equalToConstant: 50)
        ])
        
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.backgroundColor = .yellow
        stackView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            stackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor),
            stackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor),
            stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
        
        
        let lable1 = UILabel()
        lable1.text = "11111111"
        stackView.addArrangedSubview(lable1)
        
        let lable2 = UILabel()
        lable2.text = "22222222"
        stackView.addArrangedSubview(lable2)
        
        let lable3 = UILabel()
        lable3.text = "33333333"
        stackView.addArrangedSubview(lable3)
        
        let lable4 = UILabel()
        lable4.text = "44444444"
        stackView.addArrangedSubview(lable4)
        
        let lable5 = UILabel()
        lable5.text = "55555555"
        stackView.addArrangedSubview(lable5)
    }
}

마무리

뭐 사실 CollectionView 쓰면 되지 않음? 깔깔 할 수 있지만
가끔은 스택뷰가 더 편할 때도 있거덩여
CollectionView는 사이클 관리도 해조야 하구 셀두 만드렁야 하구 쪼매 귀찬ㄴㅎ
다음 포스팅에서는 스크롤이 되는 StackView의 가운데 정렬 하는 방법을 알아보겠읍니다

그럼 굿밤