ios - 创建圆圈并将其用作 "bar graph"

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()

    }

}

谁能帮帮我？

我想要的是类似于下图的东西:

Answer 1

我会寻求简单的解决方案并创建一个带有 UIView 和 UILabel 作为 subview 的 UIView。如果你使用类似的东西:

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

对于每个子层。如果您已将 UIView 的背景层的背景颜色设置为类似红色，并且将上面的 UIView 层设置为具有 alpha 0.5 的白色背景颜色，则您已经实现了此效果。

如果您不知道如何继续使用此技巧，请尝试提供代码示例。

-- 编辑--

这里是代码示例:

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)
    }
}

在 View Controller 中使用:

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)

这会产生这样的结果: