iOS使用CG绘制相应形状的view

前言

最近，新项目中，有些相应的需求，要在特殊形状的view中展示数据，然后里边还有些直线，虚线的结合，考虑到使用图片的话不是很好适配，因此这里研究总结了下，使用代码自己来实现相应的需求。

开始

• 先来看下实现的效果图
  

• 然后，我们来开始实现它！
  首先要了解： drawRect:方法的调用时机：
  它是在init和viewDidLoad方法执行之后，才开始调用的，因此，我们可以在init方法中设置相应的参数：

@implementation EnsurePaybackFrontView{    //虚线距view顶部的距离    CGFloat _frontHeight;    //中间两个小半圆的半径    CGFloat _radii;    //顶部view的圆角半径    CGFloat _topRadius;}- (instancetype)initWithFrame:(CGRect)frame {    if (self == [super initWithFrame:frame]) {        _frontHeight = 64.f;        _radii = 8.f;        _topRadius = 4.f;        self.backgroundColor = [UIColor whiteColor];    }    return self;}//然后，在drawRect方法中 开始绘制图形- (void)drawRect:(CGRect)rect {    // Drawing code    CGFloat viewWidth = rect.size.width;    CGFloat viewHieght = rect.size.height;    //获取绘图上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    //绘制整体背景    CGContextMoveToPoint(ctx, _topRadius, 0);    CGContextAddLineToPoint(ctx, viewWidth - _topRadius, 0);    CGContextAddArc(ctx, viewWidth - _topRadius, _topRadius, _topRadius, 3/2*M_PI, 0, 0);    CGContextAddLineToPoint(ctx, viewWidth, _frontHeight - _radii);    CGContextAddArc(ctx, viewWidth, _frontHeight, _radii, 1.5 * M_PI, -M_PI_2, 1);    CGContextAddLineToPoint(ctx, viewWidth, viewHieght);    CGContextAddLineToPoint(ctx, 0, viewHieght);    CGContextAddLineToPoint(ctx, 0, _frontHeight + _radii);    CGContextAddArc(ctx, 0, _frontHeight, _radii, -M_PI_2, 3 * M_PI_2, 1);    CGContextAddLineToPoint(ctx, 0, _topRadius);    CGContextAddArc(ctx, _topRadius, _topRadius, _topRadius, M_PI, M_PI * 1.5, 0);    CGContextSetFillColorWithColor(ctx, [UIColor yellowColor].CGColor);    CGContextFillPath(ctx);    //绘制左边半圆    CGContextMoveToPoint(ctx, 0, _frontHeight - _radii);    CGContextAddArc(ctx, 0, _frontHeight, _radii, 3 * M_PI_2, - M_PI_2, 0);//    CGContextAddLineToPoint(ctx, 0, _frontHeight - _radii);    CGContextClosePath(ctx);    CGContextSetFillColorWithColor(ctx, [UIColor colorWithRed:32/255.0 green:170/255.0 blue:251/255.0 alpha:1.0].CGColor);//    CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);    CGContextFillPath(ctx);}

在效果图中可以看到，我这里只实现了左边一个半圆的绘制，右边的没有实现，不过实现起来也是同样的道理，这里不再过多赘述。
当然，如果整个图形外围形状是那种很规则的，也可以通过直接设置整个view的背景色来实现。
不过由于这里上部分存在圆弧部分，所以如果设置背景色，那么弧形外的部分也是需要，重新绘制的，相比下，绘制半圆还是简单一点的，所以，仁者见仁智者见智吧。

• 外部调用

    EnsurePaybackFrontView *test = [[EnsurePaybackFrontView alloc]initWithFrame:CGRectMake(15, 168, 290, 400)];    test.backgroundColor = [UIColor clearColor];    UIView *dottedLine = [[UIView alloc]initWithFrame:CGRectMake(8, 64, 290 - 16, 1)];    //绘制虚线    [self drawDashLine:dottedLine lineLength:8 lineSpacing:4 lineColor:[UIColor blackColor]];    [test addSubview:dottedLine];    [self.view addSubview:test];

• 绘制虚线，由于考虑到后期可能会在view上按需求添加额外的多条，所以没有写在内部drawRect中，而是写在了外部方便调用

/** * @param   lineView    需要绘制成虚线的view * @param   lineLength  虚线的宽度 * @param   lineSpacing  虚线的间距 * @param   lineColor   虚线的颜色 */- (void)drawDashLine:(UIView *)lineView lineLength:(int)lineLength lineSpacing:(int)lineSpacing lineColor:(UIColor *)lineColor{    CAShapeLayer *shapeLayer = [CAShapeLayer layer];    [shapeLayer setBounds:lineView.bounds];    [shapeLayer setPosition:CGPointMake(CGRectGetWidth(lineView.frame) / 2, CGRectGetHeight(lineView.frame))];    [shapeLayer setFillColor:[UIColor clearColor].CGColor];    //  设置虚线颜色为blackColor    [shapeLayer setStrokeColor:lineColor.CGColor];    //  设置虚线宽度    [shapeLayer setLineWidth:CGRectGetHeight(lineView.frame)];    [shapeLayer setLineJoin:kCALineJoinRound];    //  设置线宽，线间距    [shapeLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:lineLength], [NSNumber numberWithInt:lineSpacing], nil]];    //  设置路径    CGMutablePathRef path = CGPathCreateMutable();    CGPathMoveToPoint(path, NULL, 0, 0);    CGPathAddLineToPoint(path, NULL,CGRectGetWidth(lineView.frame), 0);    [shapeLayer setPath:path];    CGPathRelease(path);    //  把绘制好的虚线添加上来    [lineView.layer addSublayer:shapeLayer];}

如果需要查看demo，Github链接在这里，如果感觉对您有帮助，麻烦给个赞~谢谢