swiftで円形のプログレスバーの作成

円形プログレスバーの作成

少しのコードでつくれる簡単な円形のプログレスバーのサンプルです。

import UIKit

class SamplePieprogViewController: UIViewController {
    
    let mainLayer = CAShapeLayer()
    let progressLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // スライダーの作成
        let progressSlider = UISlider()
        progressSlider.frame = CGRect(x: 20, y: 360, width: UIScreen.main.bounds.size.width-40, height: 10)
        progressSlider.minimumValue = 0.0
        progressSlider.maximumValue = 100.0
        progressSlider.value = 0.0
        // スライダーが変更されたときに呼び出されるメソッドの設定
        progressSlider.addTarget(self, action: #selector(changeProgressSlider), for: UIControl.Event.valueChanged)
        self.view.addSubview(progressSlider)

        // 円形バーのバックビューの作成
        let backView = UIView()
        backView.frame = CGRect(x: UIScreen.main.bounds.size.width/2-100, y: 100, width: 200, height: 200)
        backView.backgroundColor = UIColor.white
        self.view.addSubview(backView)
        
        let backPath = UIBezierPath()
        backPath.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 100, startAngle: 0, endAngle: .pi * 2.0, clockwise: true)
        let backLayer = CAShapeLayer()
        backLayer.path = backPath.cgPath
        backLayer.fillColor = UIColor.clear.cgColor
        backLayer.strokeColor = UIColor(red: 0.90, green: 0.90, blue: 0.90, alpha: 1.0).cgColor
        backLayer.lineWidth = 50.0
        backView.layer.addSublayer(backLayer)
        
        let startPath = UIBezierPath()
        startPath.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 100, startAngle: 0, endAngle: CGFloat(3.6 * progressSlider.value * .pi / 180), clockwise: true)
        mainLayer.path = startPath.cgPath
        mainLayer.fillColor = UIColor.clear.cgColor
        mainLayer.strokeColor = UIColor(red: 1.00, green: 0.22, blue: 0.38, alpha: 1.0).cgColor
        mainLayer.lineWidth = 50.0
        backView.layer.addSublayer(mainLayer)
        
        // backViewを-90度回転する
        let angle:CGFloat = -.pi/2
        backView.transform = CGAffineTransform(rotationAngle: angle)
        
        // UILabelの生成
        progressLabel.frame = CGRect(x: UIScreen.main.bounds.size.width/2-50, y: 185, width: 100, height: 30)
        progressLabel.textColor = UIColor(red: 0.48, green: 0.48, blue: 0.48, alpha: 1.0)
        progressLabel.font = UIFont(name: "HiraKakuProN-W3", size: 24)
        progressLabel.textAlignment = .right
        self.view.addSubview(progressLabel)
        progressLabel.text = String(format: "%.01f", Float(progressSlider.value)) + " %"
    }

    // スライダーが変更されたときに呼ばれる処理
    @objc func changeProgressSlider(_ sender: UISlider) {
        let changePath = UIBezierPath()
        changePath.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 100, startAngle: 0, endAngle: CGFloat(3.6 * sender.value * .pi / 180), clockwise: true)
        mainLayer.path = changePath.cgPath
        progressLabel.text = String(format: "%.01f", Float(sender.value)) + " %"
    }

}

動作環境：Xcode10.1, Swift4.2.1