标签隐藏在圆圈背景色下

Question

I have just added a background to my circular progress bar, however this background now covers a label that I have in the centre of the circle.

Basically, I have aa background circle, a radius (for displaying the progress) and a label which is right in the centre of the circle. Having now added the circle background means that the label is covered.

Here is my code:

class ProgressCircle: UIView {

override func drawRect(rect: CGRect) {
    var ctx = UIGraphicsGetCurrentContext()

    var innerRadiusRatio: CGFloat = 0.6

    var path: CGMutablePathRef = CGPathCreateMutable()
    var startAngle: CGFloat = CGFloat(-M_PI_2)
    var endAngle: CGFloat = CGFloat(-M_PI_2) + min(1.0, progress) * CGFloat(M_PI * 2)
    var outerRadius: CGFloat = CGRectGetWidth(self.bounds) * 0.5 - 1.0
    var innerRadius: CGFloat = outerRadius * innerRadiusRatio
    var center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect))

    //Code for background circle

    var context: CGContextRef = UIGraphicsGetCurrentContext()
    CGContextSetFillColorWithColor(context, (UIColor.darkGrayColor()).CGColor)
    var rectangle: CGRect = CGRectMake(0, 0, 171, 171)
    CGContextBeginPath(context)
    CGContextAddEllipseInRect(context, rectangle)
    CGContextDrawPath(context, kCGPathFill)

    UIGraphicsEndImageContext()

    //Code for progress radius

    CGPathAddArc(path, nil, center.x, center.y, innerRadius, startAngle, endAngle, false)
    CGPathAddArc(path, nil, center.x, center.y, outerRadius, endAngle, startAngle, true)
    CGPathCloseSubpath(path)
    CGContextAddPath(ctx, path)

    CGContextSaveGState(ctx)
    CGContextClip(ctx)
    CGContextDrawImage(ctx, self.bounds, UIImage(named: "RadialProgressFill").CGImage)
    CGContextRestoreGState(ctx)
}

This is how I add the subview:

    var circleFrame = CGRect(x: 75, y: 249, width: 171, height: 171)
    var circle = ProgressCircle(frame: circleFrame)
    self.budgetDisplayView.addSubview(circle)

    circle.backgroundColor = UIColor.clearColor()

How can I get the label to be displayed on top of the background?

Answer 1

You need to reorder your subviews.

If you added your ProgressCircle view in Interface Builder, then in the Document Outline in Xcode, drag your label view down below your ProgressCircle view. The subviews are added in order, so the later ones are on top.

If you added your ProgressCircle in code, in your ViewController after adding the subView , call sendSubviewToBack to move the ProgressCircle behind its siblings:

self.budgetDisplayView.addSubview(circle)
self.budgetDisplayView.sendSubviewToBack(circle)

Alternatively, if you have an @IBOutlet to your label called myLabel , you can bring it to front:

self.budgetDisplayView.bringSubviewToFront(myLabel)

Finally, make sure your label has a color that will show against the background.