要画出上图这样的一个三彩圆弧，首先创建一个 UIView，重写drawRect方法：

-(void) drawRect: (CGRect) rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
 
    // 画渐变背景色圆形
    // 裁掉中间圆
    // 截取弧线
 
    CGColorSpaceRelease(colorSpace);
}

第一步我们要画一个正方形的带渐变背景色的方块，代码如下：

UIColor *baseColor = [UIColor colorWithRed:246.0/255.0 green:71.0/255.0 blue:71.0/255.0 alpha:1.0];
UIColor *middleColor = [UIColor colorWithRed:253.0/255.0 green:188.0/255.0 blue:51.0/255.0 alpha:1.0];
UIColor *endColor = [UIColor colorWithRed:32.0/255.0 green:197.0/255.0 blue:102.0/255.0 alpha:1.0];
    
CGContextSaveGState(context);
NSArray * gradientColors = @[(__bridge id)baseColor.CGColor, (__bridge id)middleColor.CGColor, (__bridge id)endColor.CGColor];
CGFloat locations[] = { 0.0, 0.4, 0.8 };
    
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) gradientColors, locations);
    
CGPoint startPoint = CGPointMake(0, rect.size.height/2);
CGPoint endPoint = CGPointMake(rect.size.width, rect.size.height/2);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

再在这个方块的基础上截取一个圆形，在上面的代码之上添加以下代码：

CGContextAddEllipseInRect(context, rect);
CGContextClip(context);

在这个圆形中间上画一个较小的圆形，填充色和背景色一致，半径等于大圆半径减圆弧半径，如下：

CGRect innerCircleRect = CGRectMake(arcBorderWidth, arcBorderWidth, width-arcBorderWidth*2, width-arcBorderWidth*2);
CGContextAddEllipseInRect(context, innerCircleRect);
CGContextSetFillColorWithColor(context, fillColor.CGColor);
CGContextFillPath(context);

最后，按角度截取需要的圆弧

CGFloat startAngle = 0.9*M_PI;
CGFloat endAngle = 0.1*M_PI;
CGMutablePathRef arcPath = CGPathCreateMutable();
CGPathAddArc(arcPath, NULL, center.x, center.y, width/2-1, startAngle, endAngle, YES);
CGContextSetLineWidth(context, arcBorderWidth*2);
CGContextAddPath(context, arcPath);
CGContextSetStrokeColorWithColor(context, fillColor.CGColor);
CGContextStrokePath(context);

最终效果图

源码点这里下载
参考学习：Core Graphics Tutorial: Curves and Layers