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鏈接在這裏，如果感覺對您有幫助，麻煩給個贊~謝謝