3

I want circlular border to appear on my profile image. I also want only a certain percentage of the border to be completed based on how much of the profile information is completed.

If username, email, gender, school and address is required, and if the user only provides 3 of the above fields i want the circular border to be 60% completed and likewise.

My code is as follows: However, it only displays a 100% completed circle and i am not able to control what percentage of the circle i am suppose to colour. How can i solve this ? The following image demonstrates what i want to achieve.

Image

enter image description here

Code

self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2;
self.profileImageView.layer.borderColor = [UIColor whiteColor].CGColor;
self.profileImageView.clipsToBounds = YES;
Illep
  • 16,375
  • 46
  • 171
  • 302
  • 1
    I doubt you can do it with layers, however you should look for (CGPath or)UIBezierPath here is something that might get you started http://stackoverflow.com/questions/20035548/drawing-half-circles-with-coregraphics – Coldsteel48 May 10 '15 at 17:33
  • @user3351949 CAShapeLayer is actually a very good fit for this. – David Rönnqvist May 10 '15 at 17:57
  • @David when I said layers I mentioned the layer property of UIView , Sorry for being unclear. – Coldsteel48 May 10 '15 at 18:41

2 Answers2

3

Just if in case you want the answer by means of code, here it is.

UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 400) radius:20.f startAngle:-M_PI_2 endAngle:0 clockwise:NO];

CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
[shapeLayer setStrokeColor:[UIColor blueColor].CGColor];
[shapeLayer setFillColor:[UIColor clearColor].CGColor];
[shapeLayer setLineWidth:5.f];
[shapeLayer setPath:circlePath.CGPath];
[self.view.layer addSublayer:shapeLayer];
Prasad
  • 5,946
  • 3
  • 30
  • 36
2

The reason you're having trouble with this is that cornerRadius is just a lazy way out. You need to look into drawing the arc yourself.

There are various levels of laziness for this too. The easiest way is to draw it in a layer in front of the image. And even then you have choices: you can draw it using Quartz drawing calls, or you can ask a CAShapeLayer to draw it for you. One nice thing about the CAShapeLayer is that you can easily animate the growth of the arc (by changing the strokeEnd).

matt
  • 515,959
  • 87
  • 875
  • 1,141