【Swift】進行度に応じて色が変わるプログレスバー風ボタンの作り方

この記事は ZOZO Advent Calendar 2023 カレンダー Vol.8の7日目の記事です。

特定の条件を満たすまで、進行度に応じてボタンがプログレスバーっぽく色がついていくUIを作りたかったんですが、CAGradientLayerを使えば簡単にできました。

分割したViewを置いておく方法もあると思いますが、それだとぐーーんっと色がつく動きをしないのでこっちのほうが良いかなと思います。

    // ex) 5個のアイテム選択が必須条件だとしたら
    private var selectionItems: [Int] = []
    private let maxSelectCount = 5
    
    // gradientLayerの初期設定
    private let gradientLayer = CAGradientLayer()
    private let gradientStartPoint = CGPoint(x: 0, y: 0.5)
    private let gradientEndPoint = CGPoint(x: 1, y: 0.5)
    private let gradientColors = [UIColor.systemBlue.cgColor, UIColor.systemBlue.cgColor, UIColor.clear.cgColor, UIColor.clear.cgColor]
    
    private func configureGradientLayer() {
        gradientLayer.startPoint = gradientStartPoint
        gradientLayer.endPoint = gradientEndPoint
        gradientLayer.colors = gradientColors
        progressView.layer.addSublayer(gradientLayer)
        gradientLayer.locations = [0, 0, 0, 0]
    }

    // セルタップ時に実行するメソッド
    private func tappedView() {
        // 配列操作コードなど
	:
        updateGradientLayer()
    }

    private func updateGradientLayer() {
        let progress = CGFloat(selectionItems.count) / CGFloat(maxSelectCount)
        gradientLayer.frame = progressView.bounds

        let progressLocation = NSNumber(floatLiteral: Double(progress))
        gradientLayer.locations = [0, progressLocation, progressLocation, 1]
    }