お手軽に Instagram風PageControlを実装してみる

作るもの

FlexiblePageControlが便利

今回はshima11さんのFlexiblePageControlを使用して実装していきます

参考: https://github.com/shima11/FlexiblePageControl

Pods

pod "FlexiblePageControl", :git => "https://github.com/shima11/FlexiblePageControl.git"

Storyboard

UIViewから選択
表示させたい位置に配置してください

Code

必要なものをIBOutletで接続

import FlexiblePageControl

class CardCell: UITableViewCell, UIScrollViewDelegate {

@IBOutlet weak var scrollView: UIScrollView!

@IBOutlet weak var flexiblePageControl: FlexiblePageControl!

pageControlの実装は特に難しくありません

        flexiblePageControl.numberOfPages = images.count
        flexiblePageControl.pageIndicatorTintColor = .gray
        flexiblePageControl.currentPageIndicatorTintColor = .blue
        flexiblePageControl.currentPage = 1

ScrollViewのDelegateで更新

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        flexiblePageControl.setProgress(contentOffsetX: scrollView.contentOffset.x, pageWidth: scrollView.bounds.width)
    }

おしまい