【Swift】UIPageControlをインスタストーリーっぽくしてみる

はじめに

デフォルトのUIPageControlが微妙だったのでインスタストーリーっぽくしてみました

これを

こうする

やりかた

UIPageControlクラスのlayoutSubviews()を以下のようにoverrideする

import UIKit

class CustomUIPageControl: UIPageControl {

    override func layoutSubviews() {
        super.layoutSubviews()
        guard !subviews.isEmpty else { return }

        let numberOfSubview = CGFloat(subviews.count)

        // 横棒同士の空白、横棒の長さ・高さを設定
        let spacing: CGFloat = 3
        let width: CGFloat = (frame.size.width - ((numberOfSubview - 1) * spacing)) / numberOfSubview
        let height = spacing

        var total: CGFloat = 0

        // ドットのビューを横棒に修正
        for view in subviews {
            view.layer.cornerRadius = 1.5
            view.frame = CGRect(x: total, y: frame.size.height / 2 - height / 2, width: width, height: height)
            total += width + spacing
        }
    }
}

おわりに

意外とあっさりできますよね！
今回はドットを横棒にしただけですが、画像を埋め込むなどもっと工夫できそうです！
デフォルトのUIPageControlが微妙だけどライブラリを入れるほどでもないなー、、と思ってる方！よろしければ参考にしてみてくださいm(_ _)m