📃UIscroollViewの使用

n/a.ターゲット

ビューコントローラにスクロールビューが作成されます.次の画面を実現します.

1.スクロールビューと黒の長方形を作成する

スクロールビューと2つの黒いビュー(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.スクロールビューの追加

ビューにスクロールビューを追加します.次に、スナップショットを使用して自動レイアウトを設定します.スナップショットパッケージは、MaskIntoConstraaints=falseを自動的に翻訳して自動調整するので、追加する必要はありません.スクロールビューの上下はビューと同じで、左右に間隔があります.

import SnapKit

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

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

3.スクロールビューに黒い長方形を配置する

長方形をスクロールビューに配置します.長方形の上部と左側を捉え、幅と高さの値を指定します.最後の長方形に下の値を指定してこそ、スクロールが機能することに注意してください...!

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)
        }
    }
}