【Swift】ScrollViewで何ページ目か(現在地)を確認

こんにちは、@nekokichi1_yos2です。

 

 

(ページングの実装)

nekokichi2yos2.hatenablog.com

 

 ScrollViewで今現在、何ページ目かを知りたい時、contentOffset、を使えばわかります。

 

 contentOffsetとは、初期位置(0,0)からどれだけ移動したかを示すもの。

(ScrollViewで言うと、(0,0)からどれだけスクロールしたかを示す)

 

x,y座標のそれぞれを取得するなら、contentOffset.x、contentOffset.y、と指定するだけです。

 

例えば、iPhone 8の幅の分だけスクロールした場合、contentOffset.xの値はiPhone 8の幅の値となります。

 

画面サイズを1ページとすると、仮にScrollViewで実装するUIViewの幅がiPhone 8の幅ならば、

  • contentOffset.x / iPhone 8 の幅 = 初期ページから何ページ目にスクロールしたか

がわかります。

 

iPhone8の幅が375.0で、750.0(2画面の幅)だけ移動したなら、

  • 750.0 / 375.0 = 2.0(ページ目)

 に移動したことになります

 

とりあえず、

  • contentOffsetは(0,0)からの移動量 
  • contentOffset / 画面サイズ = ○ページ目(いくつ画面サイズを移動したか)

と覚えておきましょう。

 

import UIKit

class ViewController2: UIViewController,UIScrollViewDelegate {
    
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var label: UILabel!
    
    //ScrollView用のUIView
    let vc = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        scrollView.delegate = self
        
        label.text = "\(Int(self.scrollView.contentOffset.x / self.scrollView.frame.size.width))ページ"
        
        //ScrollViewの上にView - labelを設置する
        createScrollView()
    }
    
    func createScrollView()  {
        //scrollViewの幅と高さ
        let width = Int(self.scrollView.frame.size.width)
        let height = Int(self.scrollView.frame.size.height)
        //origin.x,origin.y:UI部品のx,y座標
        //今回は4ページなので、scrollView.frame.size.width * 4
        vc.frame = CGRect(x: scrollView.frame.origin.x, y: scrollView.frame.origin.x, width: CGFloat(width) * 4, height: CGFloat(height))
        //Viewの上にlabelを設置していく
        for i in 0...3 {
            let label = UILabel()
            //UI部品のx,y座標は左上の角なので、それぞれの幅と高さの半分を引く
            //移動したページの分だけ座標も加算されるので、(width * i)
            label.frame = CGRect(x: (width / 2) - 75 + (width * i), y: height / 2 - 25, width: 150, height: 50)
            label.textColor = .black
            label.textAlignment = .center
            label.backgroundColor = .cyan
            vc.addSubview(label)
        }
        //scrollViewの上にViewを設置
        scrollView.addSubview(vc)
        scrollView.contentSize = vc.bounds.size
    }
    
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        //ページの移動後、現在のページ番号をlabelに表示
        label.text = "\(Int(self.scrollView.contentOffset.x / self.scrollView.frame.size.width))ページ"
    }

}