創建圓形並將其用作「條形圖」

Question

我想創建一個圓形，內部圓圈看起來像下面的圖像。我對內圈有問題，我不知道如何創建它，因此很容易調整百分比（如圖片所示）。

到目前爲止，我已經有了這個CircleGraph類，它可以繪製掉下的圓和只能繪製50％的內圓。

import Foundation 
import UIKit 

class CircleGraph: UIView 
{ 

    // Only override drawRect: if you perform custom drawing. 
    // An empty implementation adversely affects performance during animation. 
    override func drawRect(rect: CGRect) 
    { 
     super.drawRect(rect) 

     // Outer circle 
     Colors().getMainColor().setFill() 
     let outerPath = UIBezierPath(ovalInRect: rect) 
     outerPath.fill() 

     // inner circle so far 
     let percentage = 0.5 
     UIColor.whiteColor().setFill() 
     let circlePath = UIBezierPath(arcCenter: CGPoint(x: rect.height/2,y: rect.height/2), radius: CGFloat(rect.height/2), startAngle: CGFloat(-M_PI_2), endAngle:CGFloat(M_PI * 2 * percentage - M_PI_2), clockwise: true) 
     circlePath.fill() 

    } 

} 

任何人都可以幫助我嗎？

我想要的是什麼simliar下面的圖片：

Answer 1

我會去的簡單的解決方案，並創建一個UIView和作爲的UILabel子視圖一個UIView。如果你使用類似的東西：

// To make it round 
let width = self.frame.width 
self.view.layer.cornerRadius = width * 0.5 
self.view.layer.masksToBounds = true 

爲每個子層。如果您已將UIView背景圖層的背景顏色設置爲像Red和上面的UIView圖層那樣具有alpha 0.5的白色背景色，則您已經達到此效果。

如果您不知道如何繼續使用此技巧，請嘗試提供代碼示例。

- 編輯 -

下面是代碼示例：

let redColor = UIColor.redColor() 
let blueColor = UIColor.blueColor() 
let frame = CGRectMake(50, 50, 100, 100) 

// 50% Example 
let circleView = CircleView(frame: frame, percentage: 50, transparency: 0.5, bottomLayerColor: redColor, middleLayerColor: blueColor) 
self.view.addSubview(circleView) 

// 33% Example 
let newFrame = CGRectMake(50, 150, 120, 120) 
let newCircleView = CircleView(frame: newFrame, percentage: 33, transparency: 0.7, bottomLayerColor: UIColor.redColor(), middleLayerColor: UIColor.whiteColor()) 
self.view.addSubview(newCircleView) 

這會產生這樣的事情：

import UIKit 

class CircleView: UIView { 

    var percentage : Int? 

    var transparency : CGFloat? 

    var bottomLayerColor : UIColor? 
    var middleLayerColor : UIColor? 


    init(frame : CGRect, percentage : Int, transparency : CGFloat, bottomLayerColor : UIColor, middleLayerColor : UIColor) { 
     super.init(frame : frame) 
     self.percentage = percentage 
     self.transparency = transparency 
     self.bottomLayerColor = bottomLayerColor 
     self.middleLayerColor = middleLayerColor 

     viewDidLoad() 
    } 

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

    func viewDidLoad() { 

     let width = self.frame.width 
     let height = self.frame.height 
     let textFrame = CGRectMake(0, 0, width, height) 
     guard let percentage = self.percentage 
      else { 
       print("Error") 
       return 
     } 

     let newHeight = (CGFloat(percentage)/100.0)*height 
     let middleFrame = CGRectMake(0,height - newHeight, width, newHeight) 


     // Set Background Color 
     if let bottomLayerColor = self.bottomLayerColor { 
      self.backgroundColor = bottomLayerColor 
     } 
     // Make Bottom Layer Round 
     self.layer.cornerRadius = width * 0.5 
     self.layer.masksToBounds = true 

     // Create Middle Layer 
     let middleLayer = UIView(frame: middleFrame) 

     if let middleLayerColor = self.middleLayerColor { 
      middleLayer.backgroundColor = middleLayerColor 
     } 

     if let transparency = self.transparency { 
      middleLayer.alpha = transparency 
     } 


     // The Label 
     let percentageLayer = UILabel(frame: textFrame) 
     percentageLayer.textAlignment = NSTextAlignment.Center 
     percentageLayer.textColor = UIColor.whiteColor() 
     if let percentage = self.percentage { 
      percentageLayer.text = "\(percentage)%" 
     } 

     // Add Subviews 
     self.addSubview(middleLayer) 
     self.addSubview(percentageLayer) 
    } 
} 

要在視圖控制器使用