How to draw on two separate layers iOS, coregraphics - ios

Question

I need help with drawing something like this:
I have been told that the gray background bar and the purple bar should be drawn on separate layers. And then the dots there that signifies the chapters of a book (which this slider is about) will be on a layer on top of those two.
I have accomplished the task of creating the gradient on the active bar and drawing it like so:
- (void)drawRect:(CGRect)rect{
self.opaque=NO;
CGRect viewRect = self.bounds;
//NSLog(#"innerRect width is: %f", innerRect.size.width);
CGFloat perPageWidth = viewRect.size.width/[self.model.book.totalPages floatValue];
NSLog(#"perpage width is: %f", perPageWidth);
CGContextRef context = UIGraphicsGetCurrentContext();
UIBezierPath *beizerPathForSegment= [UIBezierPath bezierPath];
NSArray *arrayFromReadingSessionsSet =[self.model.readingSessions allObjects];
NSArray *arrayFromAssesmentSet = [self.model.studentAssessments allObjects];
NSLog(#"array is : %#", self.model.readingSessions);
CGGradientRef gradient = [self gradient];
for (int i=0;i<[arrayFromReadingSessionsSet count]; i++) {
ReadingSession *tempRSObj= [arrayFromReadingSessionsSet objectAtIndex:i];
CGFloat pageDifference = [tempRSObj.endPage floatValue]-[tempRSObj.startPage floatValue];
NSLog(#"startpage is: %#, end page is: %#, total pages are: %#", tempRSObj.startPage, tempRSObj.endPage, self.model.book.totalPages) ;
CGRect ProgressIndicator = CGRectMake(perPageWidth*[tempRSObj.startPage floatValue], viewRect.origin.y, perPageWidth*pageDifference, viewRect.size.height);
[beizerPathForSegment appendPath:[UIBezierPath bezierPathWithRoundedRect:ProgressIndicator cornerRadius:13.0]];
}
[beizerPathForSegment addClip];
CGContextDrawLinearGradient(context, gradient, CGPointMake(CGRectGetMidX([beizerPathForSegment bounds]), CGRectGetMaxY([beizerPathForSegment bounds])),CGPointMake(CGRectGetMidX([beizerPathForSegment bounds]), 0), (CGGradientDrawingOptions)NULL);
}
How do I shift it onto a layer and then create another layer and another layer and then put them over one another?
TIA

Answer 1

I’m guessing the person you spoke with was referring to CALayer. In iOS, every view has a CALayer backing it. Instead of implementing -drawRect: in your view, do this:
link with QuartzCore
#import <QuartzCore/QuartzCore.h> anywhere you want to use this.
Use to your view’s layer property.
Layers behave a lot like views, in that you can have sublayers and superlayers, and layers have properties for things like background color, and they can be animated. A couple of subclasses that will probably be useful for your purposes are CAGradientLayer and CAShapeLayer. For more on how to use layers, refer to the Core Animation Programming Guide.