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链接在这里，如果感觉对您有帮助，麻烦给个赞~谢谢