Creating circle and using it as "bar graph"

Question

I want to create a circle with an inner circle that looks like the image below. I'm having trouble with the inner circle and I don't know how to create it so it's easy to adjust percentage (like the image is showing).

So far I have this CircleGraph class which can draw the ouster circle and an inner circle which can only draw 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()

    }

}

Can anyone assist me?

What I want is something simliar to the image below:

Answer 1

I would go for the easy solution and create a UIView with a UIView and UILabel as subviews. If you use something like:

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

for each of the sublayers. If you have set the background colour of the UIView's background layer to something like Red and the UIView layer above to have a whiteish background colour with alpha 0.5 than you already achieve this effect.

If you do not know how to proceed with this tip ill try to provide a code sample.

-- EDIT --

Here is the code sample:

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

To use in a 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)

This will yield something like this: