先看看效果圖
一個(gè)很簡(jiǎn)單的折線圖效果,使用的CAShapeLayer+UIBezierPath
CAShapeLayer和CALayer比較:
- #######drawRect：屬于CoreGraphics框架务傲，占用CPU，性能消耗大
- #######CAShapeLayer：屬于CoreAnimation框架店枣，通過GPU來渲染圖形默赂，節(jié)省性能肴裙。動(dòng)畫渲染直接提交給手機(jī)GPU，不消耗內(nèi)存
實(shí)現(xiàn)思路:
- 橘色空心的圓圈,我用的是view來實(shí)現(xiàn)的
- 灰色的豎線用的是view 然后添加了一個(gè)CAGradientLayer的圖層做到顏色漸變(這個(gè)我會(huì)在下一篇寫使用CAGradientLayer的例子)
- 劃線就是用UIbezierPath
- 使用for循環(huán),計(jì)算好距離,然后微調(diào)一下距離就可以了
代碼部分
-
在這里,我的折線圖是根據(jù)統(tǒng)計(jì) 一周 或者 一月 內(nèi)的駕駛里程和時(shí)間,所以需要提供三組數(shù)據(jù),在這里來一個(gè)周的:
// 測(cè)試數(shù)據(jù) 28 29 30 1 2 3 4 號(hào) @property(nonatomic,strong)NSMutableArray *numbers; //測(cè)試數(shù)據(jù) 里程數(shù)組 @property(nonatomic,strong)NSMutableArray *kmArr; //測(cè)試數(shù)據(jù) 時(shí)間數(shù)組(這個(gè)順序,) @property(nonatomic,strong)NSMutableArray *timeArr; 我用來顯示折線圖的View是foldLineView,所以你在控制器創(chuàng)建一個(gè)foldLineView,然后給他設(shè)定大小,我的Demo給定的大小:
//左右間隔15,然后高度給定
self.foldLineView = [[FoldLineView alloc]initWithFrame:CGRectMake(15, 100, [UIScreen mainScreen].bounds.size.width - 30, 200)];-
接下來就是內(nèi)部實(shí)現(xiàn):
#import "FoldLineView.h"
#import "Masonry.h"@interface FoldLineView () //坐標(biāo)點(diǎn)數(shù)組 @property(nonatomic,strong)NSMutableArray *pointArr; //定時(shí)器 @property(nonatomic,strong)NSTimer *timer; @property(nonatomic,strong)CAShapeLayer *shapeLayer; @end @implementation FoldLineView -(instancetype)initWithFrame:(CGRect)frame{ if (self == [super initWithFrame:frame]) { self.backgroundColor = [UIColor whiteColor]; } return self; } //時(shí)間數(shù)組是最后一個(gè)賦值的,所以等他賦值之后有了數(shù)據(jù)就可以進(jìn)行操作(當(dāng)然,邏輯就是等所有的數(shù)據(jù)到手后開始畫Layer) -(void)setTimeArr:(NSMutableArray *)timeArr{ _timeArr = timeArr; [self setUI]; } -(void)setUI{ //每個(gè)日期之間的間距 -- (我的設(shè)計(jì)中,一個(gè)頁面只能展示7個(gè)數(shù)據(jù),根據(jù)這一點(diǎn),可以計(jì)算出點(diǎn)之間的間距) //這里的60,是指第一個(gè)點(diǎn)和最后一個(gè)點(diǎn),距離view的距離和是60,也就是左右間距30 CGFloat space = (self.bounds.size.width - 60) / (7- 1) ; // NSLog(@"%f",space);
//for循環(huán)添加下面的日期數(shù)字,根據(jù)間距
for (int i = 0; i< self.numbers.count; i++ ) {
UILabel *numberLabel = [[UILabel alloc]initWithFrame:CGRectMake(20 + i * space, 180, 20, 20)];
numberLabel.text = self.numbers[i];
numberLabel.font = [UIFont systemFontOfSize:16];
numberLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:numberLabel];
}
//找最大里程數(shù)
//這個(gè)地方的邏輯是: 找到這組數(shù)據(jù)中的最大值,然后根據(jù)最大值,選擇一個(gè)合適的數(shù)值當(dāng)做最大值,然后根據(jù)數(shù)組里的值等比例安排各個(gè)點(diǎn)的位置
double maxKM = [self.kmArr[0] doubleValue];
for (int i = 0 ; i < self.numbers.count - 1; i++ ) {
if (maxKM < [self.kmArr[i]doubleValue]) {
maxKM = [self.kmArr[i] doubleValue];
}
}
//最大里程設(shè)置為高度90% 求出最大值
maxKM = maxKM / 0.9;
//求出坐標(biāo)點(diǎn)在線上的比例,然后添加到數(shù)組
self.pointArr = [NSMutableArray array];
for (int i = 0; i< self.numbers.count; i++ ) {
[self.pointArr addObject:[NSString stringWithFormat:@"%f",[self.kmArr[i] doubleValue] /maxKM]];
}
//NSLog(@"%@",self.pointArr);
//添加七根線
for (int i = 0; i< self.numbers.count; i++ ) {
UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(20 + i * space + 9, 0, 1, 180)];
[self addSubview:lineView];
//給線添加漸變
CAGradientLayer *lineLayer = [CAGradientLayer layer];
lineLayer.frame = lineView.bounds;
[lineView.layer addSublayer:lineLayer];
//顏色分配
lineLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor colorWithRed:221/255.0 green:223/255.0 blue:225/255.0 alpha:0.6f].CGColor,
(__bridge id)[UIColor clearColor].CGColor,];
lineLayer.locations = @[@(0),@(1)];
// 起始點(diǎn)
lineLayer.startPoint = CGPointMake(0.5, 0);
// 結(jié)束點(diǎn)
lineLayer.endPoint = CGPointMake(0.5,1);
}
//根據(jù)點(diǎn)劃線
UIBezierPath *path = [UIBezierPath bezierPath];
for (int i = 0; i< self.numbers.count; i++ ) {
//判斷,第一個(gè)點(diǎn)的時(shí)候,先添加點(diǎn)
if (i == 0 ) {
//這個(gè)地方加9 是因?yàn)闉榱俗岦c(diǎn)在最中間
[path moveToPoint:CGPointMake(20 + 9, 6 + 170 * (1 - [self.pointArr[0] doubleValue]))];
}else{
[path addLineToPoint:CGPointMake(20 + space * i + 9,6 + 170 * (1 - [self.pointArr[i] doubleValue]))];
}
}
//在這里創(chuàng)建CAShapeLayer
self.shapeLayer = [[CAShapeLayer alloc]init];
//設(shè)置CAShapeLayer的frame
self.shapeLayer.frame = self.bounds;
//設(shè)置填充顏色--因?yàn)槭蔷€,所以不需要.clearColor就行
self.shapeLayer.fillColor = [UIColor clearColor].CGColor;
//設(shè)置線的顏色
self.shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
//設(shè)置線寬
self.shapeLayer.lineWidth = 1.f;
//把UIBezierPath給CAShapeLayer
self.shapeLayer.path = path.CGPath;
//設(shè)置stroke,用來表示展示程度, 數(shù)值在0-1之間,我先全部設(shè)置0,因?yàn)橐砑觿?dòng)畫
self.shapeLayer.strokeStart = 0;
self.shapeLayer.strokeEnd = 0;
[self.layer addSublayer:self.shapeLayer];
//將定時(shí)器 手動(dòng)添加運(yùn)行循環(huán),防止滑動(dòng)時(shí)候動(dòng)畫停止
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1f target:self selector:@selector(add) userInfo:nil repeats:YES];
NSRunLoop *currentRunLoop = [NSRunLoop currentRunLoop];
[currentRunLoop addTimer:self.timer forMode:NSRunLoopCommonModes];
//先畫線,在添加點(diǎn),這樣用點(diǎn)來擋住線頭
//根據(jù)坐標(biāo)繪制點(diǎn)
for (int i = 0; i< self.numbers.count; i++ ) {
CGFloat point = [self.pointArr[i] doubleValue];
// NSLog(@"%f",point);
UIView *pointView = [[UIView alloc]initWithFrame:CGRectMake(20 + i * space + 4, 170 * (1 - point ), 12, 12)];
//設(shè)置成白色,可以擋住線頭
pointView.backgroundColor = [UIColor whiteColor];
pointView.layer.borderWidth = 2;
pointView.layer.borderColor = [UIColor orangeColor].CGColor;
pointView.layer.cornerRadius = 6;
pointView.layer.masksToBounds = YES;
[self addSubview:pointView];
//添加標(biāo)簽
UILabel *textLabel = [[UILabel alloc]init];
textLabel.font = [UIFont systemFontOfSize:10];
textLabel.textColor = [UIColor lightGrayColor];
textLabel.text = [NSString stringWithFormat:@"%@/%@",self.kmArr[i],self.timeArr[i]];
[textLabel sizeToFit];
[self addSubview:textLabel];
//這里我使用了masonry做約束
[textLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.mas_equalTo(pointView.mas_top).offset(- 5);
make.centerX.mas_equalTo(pointView.mas_centerX);
}];
}
}
//做動(dòng)畫
-(void)add{
//一點(diǎn)點(diǎn)的添加strokeEnd,就可以實(shí)現(xiàn)動(dòng)畫效果
if (self.shapeLayer.strokeEnd < 1.0) {
//自己微調(diào)的add數(shù)值,看起來能平緩點(diǎn)的劃線
CGFloat add = 1.0 / (self.numbers.count + 3);
NSLog(@"add-->>%f",add);
self.shapeLayer.strokeEnd += add;
NSLog(@"%f",self.shapeLayer.strokeEnd);
}else{
//取消定時(shí)器
[self.timer invalidate];
self.timer = nil;
}
}
@end
上面的案例我做了一個(gè)view和刻滾動(dòng)的scrollView
老規(guī)矩---gitHub地址:https://github.com/superHS/FoldLineView.git
