迅速なiOSでカスタムプログレスバーを作成するには？

Question

％（10％、30％50％...）に基づいて、黒色をUIViewに塗りつぶしたいですか？

これを行う正しい方法は何ですか。

Answer 1

これを実行する方法はいくつかあります。

1. ことのUIViewのサブクラスを作成し、drawRect方法であなたが必要な正確な面積 をペイント。
2. 新しい（画像に白い）UIViewを追加すると、あなたのビュー（黒い画像）が表示されます。それはあなたが探しているのカスタムプログレスバーがある場合

Answer 2

、これを試してください： -

class ViewController: UIViewController { 

@IBOutlet weak var viewProg: UIView! // your parent view, Just a blank view 


let viewCornerRadius : CGFloat = 5 
var borderLayer : CAShapeLayer = CAShapeLayer() 
let progressLayer : CAShapeLayer = CAShapeLayer() 


override func viewDidLoad() { 
    super.viewDidLoad() 

    viewProg.layer.cornerRadius = viewCornerRadius 
    drawProgressLayer() 

} 


func drawProgressLayer(){ 

    let bezierPath = UIBezierPath(roundedRect: viewProg.bounds, cornerRadius: viewCornerRadius) 
    bezierPath.closePath() 
    borderLayer.path = bezierPath.CGPath 
    borderLayer.fillColor = UIColor.blackColor().CGColor 
    borderLayer.strokeEnd = 0 
    viewProg.layer.addSublayer(borderLayer) 


} 

//Make sure the value that you want in the function `rectProgress` that is going to define 
//the width of your progress bar must be in the range of 
// 0 <--> viewProg.bounds.width - 10 , reason why to keep the layer inside the view with some border left spare. 
//if you are receiving your progress values in 0.00 -- 1.00 range , just multiply your progress values to viewProg.bounds.width - 10 and send them as *incremented:* parameter in this func 

func rectProgress(incremented : CGFloat){ 

    print(incremented) 
    if incremented <= viewProg.bounds.width - 10{ 
     progressLayer.removeFromSuperlayer() 
     let bezierPathProg = UIBezierPath(roundedRect: CGRectMake(5, 5, incremented , viewProg.bounds.height - 10) , cornerRadius: viewCornerRadius) 
     bezierPathProg.closePath() 
     progressLayer.path = bezierPathProg.CGPath 
     progressLayer.fillColor = UIColor.whiteColor().CGColor 
     borderLayer.addSublayer(progressLayer) 

    } 

    } 
} 

PS： - あなたはまた、いくつかの特定のポイントで定義されたラインによって達成することができるやろうとしているもの開始点と終了点として、lineWidthをそれに応じて設定し、ストロークエンドをアニメーションしますが、ポイントを見つけることは巨大な痛みです（画面のフレームサイズを把握してからビューに移動する必要があるため...私はあなたが傾けることを言っていない）ので、私はこれを好むだろう