How to custom rectangle progress bar?

Question

I want to custom a rectangle progress bar with UIKIT like attracted image. Is there any source code for that? Cocos2d has the same one with CCProgressTimer but I can't find any UIKIT source code.

Hey Toandk, shouldn't you make this answered? You said it worked; marking it answered will save other people looking at the question and give Dipen the credit he deserves — Gordon Dove, May 13 '13 at 22:44

Dipen Panchasara · Answer 1 · 2013-04-01T10:35:21.953

9

create a ShapedLayer

CAShapeLayer *layer = [CAShapeLayer layer];
[layer setStrokeColor:[UIColor greenColor].CGColor];
[layer setLineWidth:10.0f];

[layer setFillColor:[UIColor clearColor].CGColor];

create a rect with radious where you want to animate

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 300, 200) cornerRadius:10.0f];
layer.path = path.CGPath;

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat:1.0f];

define animation duration

animation.duration = 4.0f;
[layer addAnimation:animation forKey:@"myStroke"];

add animation to layer on which you want to display

[self.view.layer addSublayer:layer];

edited Apr 01 '13 at 10:35

answered Apr 01 '13 at 10:27

Dipen Panchasara

13,480
5
47
57

Thank for your codes. It worked. But how can I set the starting point of path in the top middle? I'm not good with CAAnimation – toandk Apr 01 '13 at 16:12
@SukhmeetHora same here. did you find solution for that ? – Balasubramanian Oct 24 '16 at 12:08
i also need the same and how to change the starting point and the ending point..! – Hari Narayanan Dec 28 '17 at 09:46
It's possible to start at every corner using CATransform3DMakeRotation to rotate the layer. – aKANJ Aug 19 '19 at 18:49

score 1 · Answer 2 · edited Nov 03 '20 at 09:43

SWIFT 5 VERSION

    func animation() {
    CATransaction.begin()
    
    let layer : CAShapeLayer = CAShapeLayer()
    layer.strokeColor = UIColor.white.cgColor
    layer.lineWidth = 3.0
    layer.fillColor = UIColor.clear.cgColor
    
    let path : UIBezierPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 84, height: 30), byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 5.0, height: 0.0))
    layer.path = path.cgPath
    
    let animation : CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0.0
    animation.toValue = 1.0
    
    animation.duration = 4.0
    
    CATransaction.setCompletionBlock{ [weak self] in
        if self!.isAdvClick == false {
            self!.navigationController?.popViewController(animated: false)
        }
    }
    
    layer.add(animation, forKey: "myStroke")
    CATransaction.commit()
    self.btnSkip.layer.addSublayer(layer)
}

Here is a code in swift 2.0 for UIButton Border animation

func animation(){
        CATransaction.begin()
        
        let layer : CAShapeLayer = CAShapeLayer()
        layer.strokeColor = UIColor.whiteColor().CGColor
        layer.lineWidth = 3.0
        layer.fillColor = UIColor.clearColor().CGColor
        
        let path : UIBezierPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 84, height: 30), byRoundingCorners: .AllCorners, cornerRadii: CGSize(width: 5.0, height: 0.0))
        layer.path = path.CGPath
        
        let animation : CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0.0
        animation.toValue = 1.0
        
        animation.duration = 4.0
        
        CATransaction.setCompletionBlock{ [weak self] in
            if self!.isAdvClick == false {
                self!.navController?.popViewControllerAnimated(false)
            }
        }
        
        layer.addAnimation(animation, forKey: "myStroke")
        CATransaction.commit()
        self.btnSkip.layer.addSublayer(layer)
    }

You can check out put on this Link

How to custom rectangle progress bar?

2 Answers2