涉及知識(shí)點(diǎn)：
CGContextRef??? //? 聯(lián)系圖形上下文，可以說(shuō)是畫(huà)布的存在吧
UIBezierPath???? //? 貝塞爾曲線，畫(huà)啥都可以，沒(méi)有畫(huà)不了的，只有想不到的
CAShapeLayer??? //? 配合貝塞爾曲線使用的shape圖層，貝塞爾的“最佳搭檔”
CAGradientLayer??? //? 漸變圖層
CABasicAnimation? ? // (基礎(chǔ))Core Animation 顯示動(dòng)畫(huà)
最近想弄一下比較實(shí)在的東西，然后有個(gè)朋友跟我說(shuō)：“要不你就弄弄貝塞爾吧”。搞就搞吧，只有貝塞爾的話就有點(diǎn)單調(diào)，干脆就加點(diǎn)其他東西實(shí)現(xiàn)個(gè)簡(jiǎn)單的折線圖吧，所以這個(gè)demo就出來(lái)了，不過(guò)這僅僅是小demo，完整的版本還沒(méi)寫(xiě)好封裝。話不多說(shuō)，整個(gè)demo分四步：第一步，實(shí)現(xiàn)橫、軸坐標(biāo)軸；第二步，虛線與漸變層的實(shí)現(xiàn)；第三步，描點(diǎn)連線。直接上圖貼代碼，簡(jiǎn)單快捷。
第一步? X 、Y軸的實(shí)現(xiàn)
直接上第一張圖
創(chuàng)建一個(gè)類(lèi)，繼承于UIView，在.m文件中的- (void)drawRect:(CGRect)rect 方法中畫(huà)出我們所需要的X軸Y軸坐標(biāo)線。在這個(gè)方法中，我們所實(shí)現(xiàn)的視圖能夠在view上重新描畫(huà)展示。
- (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);
// 結(jié)束繪制
CGContextStrokePath(context);
}
X軸與Y軸的數(shù)據(jù)實(shí)現(xiàn)，在這里分別寫(xiě)了兩個(gè)實(shí)例方法，在initWithFram:初始化方法中調(diào)用
#pragma mark 創(chuàng)建x軸的數(shù)據(jù)
- (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 創(chuàng)建y軸數(shù)據(jù)
- (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];
}
}
第二步? 虛線與漸變圖層背景的設(shè)置
在這里我們需要設(shè)置三個(gè)屬性，分別是：1.漸變的背景視圖（添加到當(dāng)前視圖上）, 2.漸變圖層（作用于背景視圖的layer層），3.顏色數(shù)組（添加漸變圖層的顏色屬性數(shù)值，也就是漸變哪幾種顏色，這里我用了兩種比較低調(diào)灰沉一點(diǎn)的色調(diào)）
有一點(diǎn)要注意的是，我這里畫(huà)的虛線是通過(guò)CAShapeLayer的 lineDashPattern屬性來(lái)設(shè)置的
同樣編寫(xiě)兩個(gè)方法：- (void)drawGradientBackgroundView 設(shè)置漸變層背景? 和 - (void)setDashLine 設(shè)置虛線，并在初始化方法中調(diào)用
- (void)drawGradientBackgroundView {
// 漸變背景視圖（不包含坐標(biāo)軸）
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];
/** 創(chuàng)建并設(shè)置漸變背景圖層 */
//初始化CAGradientlayer對(duì)象，使它的大小為漸變背景視圖的大小
self.gradient_layer = [CAGradientLayer layer];
self.gradient_layer.frame = self.gradient_backgroundView.bounds;
//設(shè)置漸變區(qū)域的起始和終止位置（范圍為0-1），即漸變路徑
self.gradient_layer.startPoint = CGPointMake(0, 0.0);
self.gradient_layer.endPoint = CGPointMake(1.0, 0.0);
//設(shè)置顏色的漸變過(guò)程
// [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對(duì)象添加在我們要設(shè)置背景色的視圖的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軸數(shù)據(jù)label的位置根據(jù)其位置畫(huà)橫虛線
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;
// 設(shè)置線條寬度
dashLayer.lineWidth = 1.0;
//? 設(shè)置虛線? 每間隔十個(gè)畫(huà)一條線，總共十條
dashLayer.lineDashPattern = @[@10, @10];
dashLayer.path = path1.CGPath;
[self.gradient_backgroundView.layer addSublayer:dashLayer];
}
}
第三步? 描點(diǎn)連線
由于是懶得在電腦上安裝GIF的制作應(yīng)用，所以就上不了動(dòng)態(tài)圖了，簡(jiǎn)單貼一張完整圖片就好
- (void)drawLine{
UILabel * label = (UILabel*)[self viewWithTag:1000];//根據(jù)橫坐標(biāo)上面的label 獲取直線關(guān)鍵點(diǎn)的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 )? )];
//創(chuàng)建折現(xiàn)點(diǎn)標(biāo)記
for (NSInteger i = 1; i< 12; i++) {
UILabel * label1 = (UILabel*)[self viewWithTag:1000 + i];
CGFloat? arc = arc4random()%600;? //折線點(diǎn)目前給的是隨機(jī)數(shù)
[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];//直接添加導(dǎo)視圖上
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];
// 設(shè)置動(dòng)畫(huà)代理，動(dòng)畫(huà)結(jié)束時(shí)添加一個(gè)標(biāo)簽，顯示折線終點(diǎn)的信息
pathAnimation.delegate = self;
[self.lineChartLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}
雖然這個(gè)demo做的是不太美觀，不過(guò)整體都拆分開(kāi)了幾個(gè)方法調(diào)用，方便了擴(kuò)展，后續(xù)會(huì)為大家繼續(xù)補(bǔ)充其他功能，還有完整封裝好的代碼。
附上Github的鏈接：
