Custom circles joined with lines in UIView [closed] - ios

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I need to draw a process indicator (not a progress indicator) with dynamic changing of stroke and fill colors according to constraints. Im finding it really difficult to draw the shape that is required. Any guidance would be great.
How could i draw this? the UI should be similar to progress view but with circles in between lines. Thanks

Answer 1

You should be able to draw this sort of thing using CAShapeLayers and QuartzCore.
Add the CoreGraphics.framework to your library.
At the top of your class
#import <QuartzCore/QuartzCore.h>
Here is an example of something that will look like this 0-0-0 (assuming this is what you are looking for).
// this will be a parent layer container
CALayer *progressIndicator = [[CALayer alloc] init];
// the first bubble
CAShapeLayer *bubble1 = [[CAShapeLayer alloc] init];
bubble1.fillColor = [UIColor lightGrayColor];
bubble1.strokeColor = [UIColor darkGrayColor];
bubble1.strokeWidth = 1;
bubble1.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,50,50)].CGPath;
[progressIndicator addSublayer:bubble1];
// the first connecting line
CAShapeLayer *line1 = [[CAShapeLayer alloc] init];
line1.strokeColor = [UIColor darkGrayColor];
line1.strokeWidth = 2;
UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(50, 25)];
[linePath addLineToPoint:CGPointMake(75, 25)];
line1.path = linePath.CGPath;
[progressIndicator addSublayer:line1];
// ... And so on for the next 2 bubbles and 1 line. ...//
// Add it to your view.
[self.view.layer addSublayer:progressIndicator];
You can animated most properties on these objects as well (like opacity) to give your progress bar the affect of slowly filling over time.