iOSで円形のプログレスバーを作成する

iOS開発者向けの円形のプログレスバーを作成する方法を知ることは非常に重要です。ほとんどすべてのアプリケーションにこれがあります。

これは主に、ダウンロードステータス、読み込みステータス、またはその他の進行状況に関連するものを表示するために使用されます。

サーキュラープログレスバーの作成は、新しいプログラマーにとって非常に面倒になり、操作に苦労する可能性があります。

円形のプログレスバーを作成する方法は複数あります。この投稿では、円形のプログレスバーを作成するための最も簡単で簡単な方法の1つを紹介します。

それでは始めましょう

ステップ1 − Xcode、シングルビューアプリケーションを開き、CircularProgressという名前を付けます。

そのため、パーセンテージを持つ3つのボタンと1つの円形の進行状況ビューを備えたアプリケーションを作成します。ボタンをタップすると、進行状況ビューがパーセンテージに基づいて変化します。

ステップ2 −新しいクラスの作成、ファイル-→新しいファイルの追加-→CocoaTouchクラス-→UIViewクラスのCircularProgressView。

ステップ3 − UIを作成し、UIビューを追加し、下の画像と同じクラスCircularProgressViewを追加し、3つのボタンを追加して、30％、60％、95％という名前を付けます。

ViewController.swiftの3つのボタンすべてに@IBActionを作成し、以下に示すように名前を付けます

@IBAction func btn95(_ sender: Any) {
}
@IBAction func btn30(_ sender: Any) {
}
@IBAction func btn60(_ sender: Any) {
}

ViewController.swiftでUIビューの@IBoutletを作成し、以下の名前を付けます

@IBOutlet weak var circularProgress: CircularProgressView!

ステップ4 − CircularProgressView.swiftで、CAShapeLayer（）タイプの2つのオブジェクト進行レイヤーとトラックレイヤーを作成します。

var progressLyr = CAShapeLayer()
var trackLyr = CAShapeLayer()

ステップ5 以下のようにprogressLyrとtrackLyrを設定するためのsetメソッドを記述しました

var progressClr = UIColor.white {
   didSet {
      progressLyr.strokeColor = progressClr.cgColor
   }
}
var trackClr = UIColor.white {
   didSet {
      trackLyr.strokeColor = trackClr.cgColor
   }
}

ここでは、progressLyrプロパティとtrackLyrプロパティを設定しています。

didSetはプロパティオブザーバーです。プロパティオブザーバーは、プロパティの値の変更を監視して応答します。新しい値がプロパティの現在の値と同じであっても、プロパティの値が設定されるたびにプロパティオブザーバーが呼び出されます

ステップ5 − makeCircularPath関数を追加し、以下のコードを追加します。

func makeCircularPath() {
   self.backgroundColor = UIColor.clear
   self.layer.cornerRadius = self.frame.size.width/2
   let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2, y: frame.size.height/2), radius: (frame.size.width - 1.5)/2, startAngle: CGFloat(-0.5 * .pi), endAngle: CGFloat(1.5 * .pi), clockwise: true)
   trackLyr.path = circlePath.cgPath
   trackLyr.fillColor = UIColor.clear.cgColor
   trackLyr.strokeColor = trackClr.cgColor
   trackLyr.lineWidth = 5.0
   trackLyr.strokeEnd = 1.0
   layer.addSublayer(trackLyr)
   progressLyr.path = circlePath.cgPath
   progressLyr.fillColor = UIColor.clear.cgColor
   progressLyr.strokeColor = progressClr.cgColor
   progressLyr.lineWidth = 10.0
   progressLyr.strokeEnd = 0.0
   layer.addSublayer(progressLyr)
}

この関数では、循環パスを作成し、そのパラメータとその動作を定義しています。

ステップ6 −必要なinit関数を追加します。ストーリーボードからUIを設計する場合は、必須のinitを使用する必要があります。プログラムでUIを設計する場合は、override initを使用します。この場合、requireinitを使用します。

required init?(coder aDecoder: NSCoder) {
   super.init(coder: aDecoder)
   makeCircularPath()
}

ステップ7 −進行状況をアニメーション化したいので、新しい関数setProgressWithAnimationを作成し、以下のコードを記述します

func setProgressWithAnimation(duration: TimeInterval, value: Float) {
   let animation = CABasicAnimation(keyPath: "strokeEnd")
   animation.duration = duration
   animation.fromValue = 0
   animation.toValue = value
   animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
   progressLyr.strokeEnd = CGFloat(value)
   progressLyr.add(animation, forKey: "animateprogress")
}

これで完了です。CircularProgressView.swiftの最終的なコードは次のようになります

import UIKit
class CircularProgressView: UIView {
   var progressLyr = CAShapeLayer()
   var trackLyr = CAShapeLayer()
   required init?(coder aDecoder: NSCoder) {
      super.init(coder: aDecoder)
      makeCircularPath()
   }
   var progressClr = UIColor.white {
      didSet {
         progressLyr.strokeColor = progressClr.cgColor
      }
   }
   var trackClr = UIColor.white {
      didSet {
         trackLyr.strokeColor = trackClr.cgColor
      }
   }
   func makeCircularPath() {
      self.backgroundColor = UIColor.clear
      self.layer.cornerRadius = self.frame.size.width/2
      let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2, y: frame.size.height/2), radius: (frame.size.width - 1.5)/2, startAngle: CGFloat(-0.5 * .pi), endAngle: CGFloat(1.5 * .pi), clockwise: true)
      trackLyr.path = circlePath.cgPath
      trackLyr.fillColor = UIColor.clear.cgColor
      trackLyr.strokeColor = trackClr.cgColor
      trackLyr.lineWidth = 5.0
      trackLyr.strokeEnd = 1.0
      layer.addSublayer(trackLyr)
      progressLyr.path = circlePath.cgPath
      progressLyr.fillColor = UIColor.clear.cgColor
      progressLyr.strokeColor = progressClr.cgColor
      progressLyr.lineWidth = 10.0
      progressLyr.strokeEnd = 0.0
      layer.addSublayer(progressLyr)
   }
   func setProgressWithAnimation(duration: TimeInterval, value: Float) {
      let animation = CABasicAnimation(keyPath: "strokeEnd")
      animation.duration = duration
      animation.fromValue = 0
      animation.toValue = value
      animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
      progressLyr.strokeEnd = CGFloat(value)
      progressLyr.add(animation, forKey: "animateprogress")
   }
}

ステップ8 −上記のコードを実行して、すべてが正常に機能することを確認します。UIは次のように表示されますが、ViewController.swiftにコードが追加されていないため、機能しません。

ステップ9 −ViewController.swiftにコードを追加しましょう。

以下の行をviewDidLoad（）に書き込みます。これにより、プログレスバーの色が指定されます

circularProgress.trackClr = UIColor.cyan
circularProgress.progressClr = UIColor.purple

ボタン機能に95％、30％、60％の期間で以下の行を追加します

@IBAction func btn95(_ sender: Any) {
   circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.95)
}
@IBAction func btn30(_ sender: Any) {
   circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.30)
}
@IBAction func btn60(_ sender: Any) {
   circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.60)

}

最後に、ViewController.swiftには以下のコードが含まれている必要があります

import UIKit
class ViewController: UIViewController {
   @IBOutlet weak var circularProgress: CircularProgressView!
   override func viewDidLoad() {
      super.viewDidLoad()
      circularProgress.trackClr = UIColor.cyan
      circularProgress.progressClr = UIColor.purple
   }
   @IBAction func btn95(_ sender: Any) {
      circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.95)
   }
   @IBAction func btn30(_ sender: Any) {
      circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.30)
   }
   @IBAction func btn60(_ sender: Any) {
      circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.60)
   }
}

ボタン関数では、値と期間を指定してsetProgressWithAnimationを呼び出しています。

これで完了です。アプリケーションを実行して、30％、60％、または95％をタップします。ビューがアニメーション化されます。