FS.O6 FS.O6 - 1 year ago 94
iOS Question

How to color a clock section?

I have a

that looks like this:


I want to colour each "section" of the clock every time the user press on it (I already have the algorithm to detect the touches on the clock, I just need to now how to colour each section) like this (one section is blue):

Coloured clock

Any idea how to do it?

**matthiaswitt's answer`:

Clock answer 1

Answer Source

You can make a custom Subclass of UIView, and than use custom drawing. Overwrite the drawRect: method something like that:

-(void)drawRect:(CGRect)rect {

[super drawRect:rect];

    //define outside of this method
float startingAt=0/12.;
float endingAt=1/12.;

    //because its turned by 90 degrees

    //color of the part
UIColor *bgColor=[UIColor blueColor];

    //center of the view
CGPoint circleCenter=CGPointMake(self.frame.size.width/2, self.frame.size.height/2);

    // Part drawing:outer circle
UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:circleCenter radius:self.frame.size.width/2 startAngle:2*M_PI*startingAt endAngle:2*M_PI*endingAt clockwise:true];
    //line to center
[path addLineToPoint:circleCenter];
    //line back to beginning of the outer circle
[path closePath];

    //fill and draw part with bgColor
[bgColor setFill];
[path fill];


Also look at the documentation for more drawing options: https://developer.apple.com/reference/uikit/uibezierpath