[Swift] UIScrollView 코드로 작성해보기

이번 글에서는 UIScrollView 에 대해 간단히 알아보겠습니다.

단, 코드로만 작성해서 한 번 UIScrollView 를 이해해 보겠습니다. (ㄱ_ㄱ)

---

1. UIScrollView?

스크롤 뷰는 활용도가 높으나 사용에 있어 까다로운 축에 속한다고 생각합니다. (0_0)

스크롤 뷰를 사용에 있어 아래와 같은 조건을 맞추어 주어야 합니다.

1. 스크롤 뷰 내부에 컨텐츠를 담을 컨텐츠 뷰 필요
2. 컨텐츠 뷰의 사이즈를 명확히 지정

https://developer.apple.com/documentation/uikit/uiscrollview

Apple Developer Documentation

2. 사용할 뷰 선언

저는 컨텐츠 뷰를 스택 뷰로 설정하여 간단하게 작성해 보겠습니다.

우선은 각각 사용할 뷰들을 선언해 주었습니다.

    /// 스크롤 뷰
    let scrollView: UIScrollView = {
        let scrollView = UIScrollView()
        return scrollView
    }()
    
    /// 스택 뷰
    let stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.spacing = 20
        return stackView
    }()
    
    /// 뷰1
    let firstView: UIView = {
        let view = UIView()
        view.backgroundColor = .red
        return view
    }()
    
    /// 뷰2
    let secondView: UIView = {
        let view = UIView()
        view.backgroundColor = .yellow
        return view
    }()
    
    /// 뷰3
    let thirdView: UIView = {
        let view = UIView()
        view.backgroundColor = .blue
        return view
    }()

 

3. 레이아웃 설정

이번엔 뷰를 차례로 생성과 동시에 레이아웃을 설정해 주겠습니다.

        self.view.addSubview(self.scrollView)
        
        // 스크롤 뷰 레이아웃 설정
        self.scrollView.translatesAutoresizingMaskIntoConstraints = false
        
        // 고정 크기 주기
        self.scrollView.widthAnchor.constraint(equalToConstant: 300).isActive = true
        self.scrollView.heightAnchor.constraint(equalToConstant: 400).isActive = true
        
        // 센터 설정
        self.scrollView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        self.scrollView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
        
        self.scrollView.addSubview(self.stackView)
        
        // 스택 뷰 레이아웃 설정
        self.stackView.translatesAutoresizingMaskIntoConstraints = false
        
        // 부모 뷰인 스크롤 뷰에 맞추기
        self.stackView.topAnchor.constraint(equalTo: self.scrollView.topAnchor).isActive = true
        self.stackView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor).isActive = true
        self.stackView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor).isActive = true
        self.stackView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor).isActive = true
        
        // 스택 뷰의 높이를 스크롤 뷰에 맞추어 고정 크기 할당
        self.stackView.heightAnchor.constraint(equalTo: self.scrollView.heightAnchor, multiplier: 1.0).isActive = true
        
        /*
         - 각각의 뷰를 스택 뷰에 할당
         - 스택 뷰의 높이를 설정해주었기 때문에 따로 높이 설정 필요X
         */
        
        self.stackView.addArrangedSubview(self.firstView)
        self.firstView.translatesAutoresizingMaskIntoConstraints = false
        self.firstView.widthAnchor.constraint(equalToConstant: 300).isActive = true
        
        self.stackView.addArrangedSubview(self.secondView)
        self.secondView.translatesAutoresizingMaskIntoConstraints = false
        self.secondView.widthAnchor.constraint(equalToConstant: 300).isActive = true
        
        self.stackView.addArrangedSubview(self.thirdView)
        self.thirdView.translatesAutoresizingMaskIntoConstraints = false
        self.thirdView.widthAnchor.constraint(equalToConstant: 300).isActive = true

설정 후 실행하시면 완성! 

 

마무리

이번 글에서는 간단히 UIScrollView 를 코드로 작성하여 만들어 보았습니다.

저 같은 경우는 스크롤 뷰를 사용 중 에러가 발생하면 대부분은 레이아웃의 설정 오류였었습니다. (하하...)

감사합니다(_ _)

---

환경 

Xcode 13.2.1

Swift 5