Creating a circular progress bar around an image in swift

Question

I am trying to create a circular progress bar around an image as shown in the screenshot below. So far I have managed to create a round image with a green border using the code below:

    self.image.layer.cornerRadius = self.image.frame.size.width / 2
    self.image.clipsToBounds = true
    self.image.layer.borderWidth = 6.0
    self.image.layer.borderColor = UIColor.greenColor.CGColor

My question is, how do I create a circular progress bar from the border than I have set? Or do I need to remove this border and take a different approach?

Answer 1

I understood your problem and I suggest you to use some library to create such a loader you can find many of the swift libraries. On of them is FPActivityIndicator , it is the same circular loader which you are searching for, you only have to adjust the radius and position of the loader to move it around the image

if you need further help you can send me message and if it helps please accept the answer. Thanks

Answer 2

I have customized the answer of WDUK in stack overflow post according to your need,

It is something like,

TestView.h

 #import <UIKit/UIKit.h>

 @interface TestView : UIView

 @property (nonatomic) double percent;

 @end

TestView.m

 #import "TestView.h"


@interface TestView () {
CGFloat startAngle;
CGFloat endAngle;
}

@end

@implementation TestView



- (id)initWithFrame:(CGRect)frame
{
   self = [super initWithFrame:frame];
   if (self) {
    // Initialization code
    self.backgroundColor = [UIColor whiteColor];

    // Determine our start and stop angles for the arc (in radians)
    startAngle = M_PI * 1.5;
    endAngle = startAngle + (M_PI * 2);

  }
 return self;
}

- (void)drawRect:(CGRect)rect
{  

 CGFloat constant = rect.size.width/ 5;

UIImage *img = [UIImage imageNamed:@"lion.jpg"]; // lion.jpg is image name
UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(rect.origin.x + constant/2, rect.origin.y + constant/2, rect.size.width-constant, rect.size.height - constant)];
imgView.image = img;
imgView.layer.masksToBounds = YES;
imgView.layer.cornerRadius = imgView.frame.size.width / 2;

UIBezierPath* bezierPath = [UIBezierPath bezierPath];

// Create our arc, with the correct angles
[bezierPath addArcWithCenter:CGPointMake(rect.size.width / 2, rect.size.height / 2)
                      radius:constant*2
                  startAngle:startAngle
                    endAngle:(endAngle - startAngle) * (_percent / 100.0) + startAngle
                   clockwise:YES];

// Set the display for the path, and stroke it
bezierPath.lineWidth = 20;
[[UIColor redColor] setStroke];
[bezierPath stroke];



[self addSubview:imgView];

}

@end

ViewController.m

 #import "ViewController.h"
#import "TestView.h"

@interface ViewController (){
TestView* m_testView;
NSTimer* m_timer;
}

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Init our view

CGRect frame = CGRectMake(50, 50, 200, 200);

m_testView = [[TestView alloc] initWithFrame:frame];
m_testView.percent = 0;
[self.view addSubview:m_testView];
// Do any additional setup after loading the view, typically from a nib.
}

- (void)viewDidAppear:(BOOL)animated
{
// Kick off a timer to count it down
m_timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(increamentSpin) userInfo:nil repeats:YES];
}

- (void)increamentSpin
{
  //  increament our percentage, do so, and redraw the view
 if (m_testView.percent < 100) {
    m_testView.percent = m_testView.percent + 1;
    [m_testView setNeedsDisplay];
}
else {
    [m_timer invalidate];
    m_timer = nil;
  }
}

- (void)didReceiveMemoryWarning {
 [super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
}

@end

If you are decreasing frame size from viewcontroller then you should reduce bezierPath.lineWidth accordingly to show respectively thin progress around imageview.

And this is working perfact, i have tested it!!!