0

I want to do a custom progress view for my iOS app, with 2 dots. Here is my code:

import UIKit

@IBDesignable
class StepProgressView: UIView {

    @IBInspectable var progress: Float = 0

    var progressColor = UIColor.blackColor()
    var bgColor = UIColor.whiteColor()

    override func layoutSubviews() {
        self.backgroundColor = UIColor.clearColor()
    }

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect) {
        // Drawing code
        let height = frame.height-8

        let circle1 = UIView(frame: CGRect(x: frame.width*(1/3), y: 0, width: frame.height, height: frame.height))
        circle1.backgroundColor = bgColor
        circle1.layer.cornerRadius = frame.height/2
        addSubview(circle1)

        let circle2 = UIView(frame: CGRect(x: frame.width*(2/3), y: 0, width: frame.height, height: frame.height))
        circle2.backgroundColor = bgColor
        circle2.layer.cornerRadius = frame.height/2
        addSubview(circle2)

        let bgView = UIView(frame: CGRect(x: height/2, y: 4, width: frame.width-height/2, height: height))
        bgView.backgroundColor = bgColor
        bgView.layer.cornerRadius = height/2
        addSubview(bgView)

        let progressView = UIView(frame: CGRect(x: 0, y: 4, width: frame.width*CGFloat(progress), height: height))
        progressView.backgroundColor = progressColor
        progressView.layer.cornerRadius = height/2
        addSubview(progressView)
    }

}

The result:

Result

However, as you can see, the circles aren't "filled" when the progression pass over one of them, and I don't know how to do that. I could create another view but I don't know how to handle the corner radius.

Can you help me ?

Thanks

Florentin
  • 1,433
  • 2
  • 13
  • 22

0 Answers0