涉及知識點：
CGContextRef??? //? 聯系圖形上下文，可以說是畫布的存在吧
UIBezierPath???? //? 貝塞爾曲線，畫啥都可以，沒有畫不了的，只有想不到的
CAShapeLayer??? //? 配合貝塞爾曲線使用的shape圖層，貝塞爾的“最佳搭檔”
CAGradientLayer??? //? 漸變圖層
CABasicAnimation? ? // (基礎)Core Animation 顯示動畫
最近想弄一下比較實在的東西，然后有個朋友跟我說：“要不你就弄弄貝塞爾吧”。搞就搞吧，只有貝塞爾的話就有點單調，干脆就加點其他東西實現個簡單的折線圖吧，所以這個demo就出來了，不過這僅僅是小demo，完整的版本還沒寫好封裝。話不多說，整個demo分四步：第一步，實現橫、軸坐標軸；第二步，虛線與漸變層的實現；第三步，描點連線。直接上圖貼代碼，簡單快捷。
第一步? X 、Y軸的實現
直接上第一張圖
創建一個類，繼承于UIView，在.m文件中的- (void)drawRect:(CGRect)rect 方法中畫出我們所需要的X軸Y軸坐標線。在這個方法中，我們所實現的視圖能夠在view上重新描畫展示。
- (void)drawRect:(CGRect)rect {
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetRGBStrokeColor(context, 97/255.0, 150/255.0, 198/255.0, 1);
CGContextMoveToPoint(context, boundX, boundY);
// Y 軸
CGContextAddLineToPoint(context, boundX, rect.size.height - boundY);
// X 軸
CGContextAddLineToPoint(context, rect.size.width -? boundX, rect.size.height - boundY);
// X軸 箭頭
CGContextMoveToPoint(context, rect.size.width -? boundX - 5, rect.size.height - boundY -5);
CGContextAddLineToPoint(context, rect.size.width -? boundX, rect.size.height - boundY);
CGContextAddLineToPoint(context, rect.size.width -? boundX - 5, rect.size.height - boundY + 5);
// Y軸 箭頭
CGContextMoveToPoint(context, boundX - 5, boundY + 5);
CGContextAddLineToPoint(context, boundX, boundY);
CGContextAddLineToPoint(context, boundX + 5, boundY + 5);
// 結束繪制
CGContextStrokePath(context);
}
X軸與Y軸的數據實現，在這里分別寫了兩個實例方法，在initWithFram:初始化方法中調用
#pragma mark 創建x軸的數據
- (void)createXLine{
CGFloat? month = 12;
for (NSInteger i = 0; i < month; i++) {
UILabel * x_label = [[UILabel alloc]initWithFrame:CGRectMake((self.frame.size.width - 2 * boundX)/month * i + boundX, self.frame.size.height - boundY + boundY*0.2, (self.frame.size.width - 2 * boundX)/month- 5, boundY/2)];
//? ? ? LabelMonth.backgroundColor = [UIColor greenColor];
x_label.tag = 1000 + i;
x_label.text = [NSString stringWithFormat:@"%ld月",i+1];
x_label.font = [UIFont systemFontOfSize:8];
x_label.transform = CGAffineTransformMakeRotation(M_PI * 0.3);
x_label.textColor = [UIColor whiteColor];
[self addSubview:x_label];
}
}
#pragma mark 創建y軸數據
- (void)createYLine{
CGFloat Y_Value = 6;
for (NSInteger i = 0; i < Y_Value; i++) {
UILabel * y_label = [[UILabel alloc]initWithFrame:CGRectMake(0, (self.frame.size.height - 2 * boundY)/Y_Value * i + boundX, boundY, boundY/2.0)];
//? labelYdivision.backgroundColor = [UIColor greenColor];
y_label.tag = 2000 + i;
y_label.text = [NSString stringWithFormat:@"%.0f",(Y_Value - i)*100];
y_label.font = [UIFont systemFontOfSize:10];
y_label.textColor = [UIColor whiteColor];
y_label.textAlignment = NSTextAlignmentCenter;
[self addSubview:y_label];
}
}
第二步? 虛線與漸變圖層背景的設置
在這里我們需要設置三個屬性，分別是：1.漸變的背景視圖（添加到當前視圖上）, 2.漸變圖層（作用于背景視圖的layer層），3.顏色數組（添加漸變圖層的顏色屬性數值，也就是漸變哪幾種顏色，這里我用了兩種比較低調灰沉一點的色調）
有一點要注意的是，我這里畫的虛線是通過CAShapeLayer的 lineDashPattern屬性來設置的
同樣編寫兩個方法：- (void)drawGradientBackgroundView 設置漸變層背景? 和 - (void)setDashLine 設置虛線，并在初始化方法中調用
- (void)drawGradientBackgroundView {
// 漸變背景視圖（不包含坐標軸）
self.gradient_backgroundView = [[UIView alloc] initWithFrame:CGRectMake(boundX, boundY, self.bounds.size.width - boundX*2, self.bounds.size.height - 2*boundY)];
[self addSubview:self.gradient_backgroundView];
/** 創建并設置漸變背景圖層 */
//初始化CAGradientlayer對象，使它的大小為漸變背景視圖的大小
self.gradient_layer = [CAGradientLayer layer];
self.gradient_layer.frame = self.gradient_backgroundView.bounds;
//設置漸變區域的起始和終止位置（范圍為0-1），即漸變路徑
self.gradient_layer.startPoint = CGPointMake(0, 0.0);
self.gradient_layer.endPoint = CGPointMake(1.0, 0.0);
//設置顏色的漸變過程
// [UIColor colorWithRed:67 / 255.0 green:106 / 255.0 blue:140 / 255.0 alpha:1.0]
// [UIColor colorWithRed:59 / 255.0 green:92 / 255.0 blue:120 / 255.0 alpha:1.0]
self.colors_arr = [NSMutableArray arrayWithArray:@[(__bridge id)[UIColor colorWithRed:95 / 255.0 green:148 / 255.0 blue:195 / 255.0 alpha:0.4].CGColor, (__bridge id)[UIColor colorWithRed:59 / 255.0 green:92 / 255.0 blue:120 / 255.0 alpha:0.4].CGColor]];
self.gradient_layer.colors = self.colors_arr;
//將CAGradientlayer對象添加在我們要設置背景色的視圖的layer層
[self.gradient_backgroundView.layer addSublayer:self.gradient_layer];
}
- (void)setDashLine{
for (NSInteger i = 1;i < 6; i++ ) {
UILabel * label1 = (UILabel*)[self viewWithTag:2000 + i];//獲取Y軸數據label的位置根據其位置畫橫虛線
UIBezierPath * path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake( 0, label1.frame.origin.y - boundY)];
[path1 addLineToPoint:CGPointMake(self.frame.size.width - 2 * boundX,label1.frame.origin.y - boundY)];
CAShapeLayer *dashLayer = [CAShapeLayer layer];
dashLayer.strokeColor = [UIColor whiteColor].CGColor;
dashLayer.fillColor = [UIColor clearColor].CGColor;
// 設置線條寬度
dashLayer.lineWidth = 1.0;
//? 設置虛線? 每間隔十個畫一條線，總共十條
dashLayer.lineDashPattern = @[@10, @10];
dashLayer.path = path1.CGPath;
[self.gradient_backgroundView.layer addSublayer:dashLayer];
}
}
第三步? 描點連線
由于是懶得在電腦上安裝GIF的制作應用，所以就上不了動態圖了，簡單貼一張完整圖片就好
- (void)drawLine{
UILabel * label = (UILabel*)[self viewWithTag:1000];//根據橫坐標上面的label 獲取直線關鍵點的x 值
UIBezierPath * path = [[UIBezierPath alloc]init];
self.path1 = path;
[path moveToPoint:CGPointMake( label.frame.origin.x - boundX + 7, (600 -arc4random()%600) /600.0 * (self.frame.size.height - boundY*2 )? )];
//創建折現點標記
for (NSInteger i = 1; i< 12; i++) {
UILabel * label1 = (UILabel*)[self viewWithTag:1000 + i];
CGFloat? arc = arc4random()%600;? //折線點目前給的是隨機數
[path addLineToPoint:CGPointMake(label1.frame.origin.x - boundX,? (600 -arc) /600.0 * (self.frame.size.height - boundY*2 ) )];
UILabel * falglabel = [[UILabel alloc]initWithFrame:CGRectMake(label1.frame.origin.x , (600 -arc) /600.0 * (self.frame.size.height - boundY*2 )+ boundY? , 30, 15)];
//? falglabel.backgroundColor = [UIColor blueColor];
falglabel.tag = 3000+ i;
falglabel.text = [NSString stringWithFormat:@"%.1f",arc];
falglabel.font = [UIFont systemFontOfSize:8.0];
[self addSubview:falglabel];
}
[path stroke];
self.lineChartLayer = [CAShapeLayer layer];
self.lineChartLayer.path = path.CGPath;
self.lineChartLayer.strokeColor = [UIColor whiteColor].CGColor;
self.lineChartLayer.fillColor = [[UIColor clearColor] CGColor];
self.lineChartLayer.lineWidth = 2;
self.lineChartLayer.lineCap = kCALineCapRound;
self.lineChartLayer.lineJoin = kCALineJoinRound;
[self.gradient_backgroundView.layer addSublayer:self.lineChartLayer];//直接添加導視圖上
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 3;
pathAnimation.repeatCount = 1;
pathAnimation.removedOnCompletion = YES;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
// 設置動畫代理，動畫結束時添加一個標簽，顯示折線終點的信息
pathAnimation.delegate = self;
[self.lineChartLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}
雖然這個demo做的是不太美觀，不過整體都拆分開了幾個方法調用，方便了擴展，后續會為大家繼續補充其他功能，還有完整封裝好的代碼。
附上Github的鏈接：
