📃UIScrollView 사용하기

목표

뷰컨트롤러에 스크롤뷰를 생성해볼 예정이다. 아래의 화면을 구현해보자.

1. 스크롤뷰와 검정 사각형들 만들기

스크롤뷰와 두개의 검정색 뷰(firstView, secondView)를 생성한다.

import UIKit

class ViewController: UIViewController {
    let scrollView: UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.backgroundColor = .systemGray
        return scrollView
    }()
    let firstView: UIView = {
        let view = UIView()
        view.backgroundColor = .black
        return view
    }()
    let secondView: UIView = {
        let view = UIView()
        view.backgroundColor = .black
        return view
    }()
    let thirdView: UIView = {
        let view = UIView()
        view.backgroundColor = .black
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .yellow
    }
}

2. 스크롤뷰 추가하기

뷰에 스크롤뷰를 추가한다. 그리고 스냅킷을 사용하여 오토레이아웃을 설정한다. 스냅킷은 translatesAutoresizingMaskIntoConstraints = false를 자동으로 해주기 때문에 추가하지 않아도 된다. 스크롤뷰의 위아래는 뷰와 같게 하고, 좌우는 약간의 간격을 두었다.

import SnapKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        ...
        view.addSubview(scrollView)

        scrollView.snp.makeConstraints {
            $0.top.bottom.left.right.equalToSuperview().inset(16)
        }
    }
}

3. 스크롤뷰에 검정 사각형들 넣기

사각형들을 스크롤뷰에 넣는다. 사각형들의 top과 left을 잡고 너비와 높이값을 주었다. 주의할 점은, 마지막 사각형에서 bottom값을 명시해야 스크롤이 작동한다는 것이다...!

class ViewController: UIViewController {
    override func viewDidLoad() {
        ...
        scrollView.addSubview(firstView)
        scrollView.addSubview(secondView)
        
        firstView.snp.makeConstraints {
            $0.top.left.equalToSuperview()
            $0.width.height.equalTo(100)
        }
        secondView.snp.makeConstraints {
            $0.top.equalToSuperview().inset(1000)
            $0.left.equalToSuperview()
            $0.width.height.equalTo(100)
        }
        thirdView.snp.makeConstraints {
            $0.top.equalToSuperview().inset(1000)
            $0.left.equalToSuperview()
            $0.bottom.equalToSuperview()
            $0.width.height.equalTo(100)
        }
    }
}

전체 코드

import SnapKit
import UIKit

class ViewController: UIViewController {
    let scrollView: UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.backgroundColor = .systemGray
        return scrollView
    }()
    let firstView: UIView = {
        let view = UIView()
        view.backgroundColor = .black
        return view
    }()
    let secondView: UIView = {
        let view = UIView()
        view.backgroundColor = .black
        return view
    }()
    let thirdView: UIView = {
        let view = UIView()
        view.backgroundColor = .black
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .yellow

        view.addSubview(scrollView)
        scrollView.addSubview(firstView)
        scrollView.addSubview(secondView)
        scrollView.addSubview(thirdView)
        
        scrollView.snp.makeConstraints {
            $0.top.bottom.equalToSuperview()
            $0.left.right.equalToSuperview().inset(16)
        }
        firstView.snp.makeConstraints {
            $0.top.left.equalToSuperview()
            $0.width.height.equalTo(100)
        }
        secondView.snp.makeConstraints {
            $0.top.equalToSuperview().inset(1000)
            $0.left.equalToSuperview()
            $0.width.height.equalTo(100)
        }
        thirdView.snp.makeConstraints {
            $0.top.equalToSuperview().inset(2000)
            $0.left.equalToSuperview()
            $0.bottom.equalToSuperview()
            $0.width.height.equalTo(100)
        }
    }
}