SwiftのCoreGraphicsを使用して静的な非アニメーション進行状況バーを表示する方法は？

Question

私はアニメーションのない静的なプログレスバーを作りたいです。オレンジ色の部分がのように塗りつぶされ、この画像が（1/3）の進捗状況を示しています。このビューを（2/3）達成する方法を知りたいと思います。 ）。

ご協力いただきありがとうございます。ここで

Answer 1

あなたはあなたがしなければならないのは、ストーリーボードからのUIViewを取ると、カスタムクラスStaticLoadを作るあるワーキン、設計可能なクラス

import Foundation 
import UIKit 

@IBDesignable 
class StaticLoad: UIView { 

    enum Progress { 
     case Empty 
     case Filled(num: Int) 
     case Full 
    } 

    @IBInspectable public var progressColor: UIColor? { 
     didSet { 
      updateColor(progressColor: progressColor ?? tintColor, nonProgressColor: nonProgressColor) 
     } 
    } 

    @IBInspectable public var nonProgressColor: UIColor = .gray { 
     didSet { 
      updateColor(progressColor: progressColor ?? tintColor, nonProgressColor: nonProgressColor) 
     } 
    } 

    @IBInspectable public var numberOfSteps: Int = 3 { 
     didSet { 
      redrawSteps(step: numberOfSteps) 
      updateColor(progressColor: progressColor ?? self.tintColor, nonProgressColor: nonProgressColor) 
     } 
    } 

    @IBInspectable public var filledProgess: Int = 1 { 
     didSet { 
      if filledProgess >= numberOfSteps { 
       filledProgess = numberOfSteps 
       progress = .Full 
      } 
      if filledProgess <= 0 { 
       filledProgess = 0 
       progress = .Empty 
      } else { 
       progress = .Filled(num: filledProgess) 
      } 
      updateColor(progressColor: progressColor ?? tintColor, nonProgressColor: nonProgressColor) 
     } 
    } 

    private var tip: CGFloat = 5 
    private var progress: Progress = .Empty 
    private var progressLayers: [CAShapeLayer] = [] 

    private func updateColor(progressColor: UIColor, nonProgressColor: UIColor) { 
     switch progress { 
     case .Empty: 
      progressLayers.forEach { $0.fillColor = nonProgressColor.cgColor } 
     case let .Filled(num): 
      progressLayers.dropFirst(num).forEach { $0.fillColor = nonProgressColor.cgColor } 
      progressLayers.dropLast(progressLayers.count - num).forEach { $0.fillColor = progressColor.cgColor } 
     case .Full : 
      progressLayers.forEach { $0.fillColor = progressColor.cgColor } 
     } 
    } 

    private func redrawSteps(step: Int) { 
     progressLayers.forEach { $0.removeFromSuperlayer() } 
     progressLayers.removeAll() 
     if step == 0 { 
      let layer = CAShapeLayer() 
      layer.frame = self.bounds 
      progressLayers.append(layer) 
     } else { 
      var topLeft = CGPoint(x: 0, y: 0) 
      let cgStep = CGFloat(step) 
      let avaibleWidth = self.bounds.width - (2 * (cgStep - 1)) 
      let spacePerStep = avaibleWidth/cgStep 
      let height = bounds.height 
      let halfHeight = height/2 
      for i in 0..<step { 

       let layer = CAShapeLayer() 
       let bezier = UIBezierPath() 
       bezier.move(to: topLeft) 
       bezier.addLine(to: CGPoint(x: topLeft.x + spacePerStep, y: topLeft.y)) 
       if i + 1 != step { 
        bezier.addLine(to: CGPoint(x: topLeft.x + spacePerStep + tip, y: topLeft.y + halfHeight)) 
       } 
       bezier.addLine(to: CGPoint(x: topLeft.x + spacePerStep, y: topLeft.y + height)) 
       bezier.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y + height)) 
       if i != 0 { 
        bezier.addLine(to: CGPoint(x: topLeft.x + tip, y: topLeft.y + halfHeight)) 
       } 
       bezier.close() 
       layer.path = bezier.cgPath 
       progressLayers.append(layer) 
       self.layer.addSublayer(layer) 

       topLeft.x = topLeft.x + spacePerStep + 2 
      } 
     } 
    } 

    override func layoutSubviews() { 
     redrawSteps(step: numberOfSteps) 
     updateColor(progressColor: progressColor ?? tintColor, nonProgressColor: nonProgressColor) 
    } 

} 

を持っています。あなたは大きな矢印をしたい場合は、filledProgress

によってコードによって、またはストーリーボードのいずれかによってnumberOfStepsプロパティを変更することにより、プログレスバーのバーの数、およびバーの塗りつぶしを指定するだけでtipプロパティを変更、またはすることができますbezierPathの別のパスを指定します。

わからない場合は、@IBDesignable（クラスが設計可能な場合は、連続した編集のために同じプロジェクトではなく別のフレームワークに配置することをおすすめします）は、ストーリーボードでビューと@IBInspectableは、変数をストーリーボードで設定できるようにします。

これは最適化されていない例です。