【Swift】ScrollViewでページングを実装

こんにちは、@nekokichi1_yos2です。

ScrollViewでページ送りのアニメーションを実装する場合、下記のコードを打つか、

scrollView.isPagingEnabled = true

インスペクタの"Paging Enabled"にチェックを入れます。

初期設定のScrollView

↓ 

PagingEnabledが可能になったScrollView

↓

ただ、ページングを実装する際に注意点があります。

”1度のページングでScrollViewの大きさだけ移動させる”なら、ScrollViewで実装するUIViewの幅（もしくは高さ）は

• ScrollView.frame.size.width(もしくはheight) x ○（数字）

にする必要があります。

もしScrollViewのサイズで割り切れないサイズを設定すれば、下記のように中途半端な幅が余ってしまいます。

（iPhone8のシミュレータ（幅375）で実装。UIViewの幅を1200に設定）

↓

仮に各ページ（ページング後のScrollView）の中央にUI部品を設置する際、ScrolViewのサイズに合わせた方が、

• ScrollViewの幅 / 2 - (UI部品の幅 / 2)
• ScrollViewの高さ / 2- (UI部品の高さ / 2)

のように調整しやすくなります。

なので、1度のスワイプでScrollViewをページングするなら、UIViewをScrollView x 数字のサイズにした方がいいでしょう。 

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var scrollView1: UIScrollView!
    
    var vc1 = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //ScrollView上に要素を配置
        horizontalScroll()
        //ScrollViewのページングを可に
        scrollView1.isPagingEnabled = true
    }
    
    //横スクロール
    func horizontalScroll() {
        vc1.frame = CGRect(x: 0, y: 0, width: scrollView1.frame.size.width * 6, height: scrollView1.frame.size.height)
        for i in 0...6 {
            let button = UIButton()
            button.frame = CGRect(x: (i*200), y: 30, width: 80, height: 55)
            button.setTitle("\(i)", for: .normal)
            button.setTitleColor(.white, for: .normal)
            button.layer.borderWidth = 1
            vc1.addSubview(button)
        }
        scrollView1.addSubview(vc1)
        scrollView1.contentSize = vc1.bounds.size
    }