使用CAGradientLayer实现颜色渐变折线图

CAGradientLayer是CALayer的一个子类，包含在QuartzCore框架中，支持两种或更多颜色平滑渐变，其绘制使用了硬件加速。本章我们介绍下如何使用CAGradientLayer绘制渐变折线图。

属性说明

CAGradientLayer共有5个主要属性：

/* 
CGColorRef对象数组，定义了每个渐变区间的渐变色 
*/
@property(nullable, copy) NSArray *colors;

/* 
NSNumber对象的可选数组定义了[0,1]范围内的每个渐变停止的位置，值必须是单调增加的。
如果给出一个nil数组，则渐变在[0,1]范围内均匀分布。
渲染时，颜色在插值之前映射到输出空间。 默认为nil。
*/
@property(nullable, copy) NSArray *locations;

/*
绘制到图层坐标空间时渐变的起点和终点。
起点对应于第一个梯度停止，终点对应于最后一个梯度停止。
两个点都在单位坐标空间中定义，然后在绘制时将其映射到图层的边界矩形。
边界矩形即[0,0]是左下角图层的一角，[1,1]是右上角。
默认值分别是[.5,0]和[.5,1]。 
*/
@property CGPoint startPoint;
@property CGPoint endPoint;

/*
渐变绘制类型，可设置`axial' (默认值), `radial', and `conic'.
*/
@property(copy) CAGradientLayerType type;

基础渐变

实现颜色渐变非常简单，只需设置colors、startPoint和endPoint属性即可。
startPoint和endPoint决定了渐变的方向，这两个参数是以单位坐标系进行的定义，所以左上角坐标是{0, 0}，右下角坐标是{1, 1}。

下面是实现紫红和淡红对角线渐变代码：

@interface ViewController ()
@property (nonatomic, strong) UIView *gradientContentView;
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@end

@implementation ViewController

- (void)makeConstraints
{
    __weak typeof(self) weakSelf = self;
    _gradientContentView = [[UIView alloc]init];
    [self.view addSubview:_gradientContentView];
    [self.gradientContentView mas_makeConstraints:^(MASConstraintMaker *make) {
        __strong typeof(weakSelf) strongSelf = weakSelf;
        make.centerX.equalTo(strongSelf.view.mas_centerX);
        make.centerY.equalTo(strongSelf.view.mas_centerY);
        make.width.equalTo(@(240));
        make.height.equalTo(@(300));
    }];
}

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    _gradientLayer.frame = self.gradientContentView.bounds;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self makeConstraints];
    
    _gradientLayer = [CAGradientLayer layer];
    // 设置渐变颜色值
    _gradientLayer.colors = @[(__bridge id)[UIColor colorWithHexString:@"#FF4275"].CGColor,
                              (__bridge id)[UIColor colorWithHexString:@"#FDF4FA"].CGColor];
    // 设置开始位置和结束点
    _gradientLayer.startPoint = CGPointMake(0, 0);
    _gradientLayer.endPoint = CGPointMake(1, 1);
    [self.gradientContentView.layer addSublayer:_gradientLayer];
}


@end

效果如图：

均匀渐变

修改渐变位置：

// 设置渐变分割位置
_gradientLayer.locations = @[@0.0, @0.35,@1.0];

效果如图：

非均匀渐变

如果你愿意，colors属性可以包含很多颜色，所以创建一个彩虹一样的多重渐变也是很简单的。默认情况下，这些颜色在空间上均匀地被渲染，但是我们可以用locations属性来调整空间。locations属性是一个浮点数值的数组（以NSNumber包装）。这些浮点数定义了colors属性中每个不同颜色的位置，同样的，也是以单位坐标系进行标定。0.0代表着渐变的开始，1.0代表着结束。
locations数组并不是强制要求的，但是如果你给它赋值了就一定要确保locations的数组大小和colors数组大小一定要相同，否则你将会得到一个空白的渐变。

目标动画效果

熟悉CAGradientLayer的基础用法后，我们结合其他Layer实现下图动画展示的复杂渐变折线：

渐变折线图.gif

如图：Y轴是数值，X轴是日期，每个日期值对应一个小红点记录（红点支持点击），小红点连成折线，折线以下区域根据Y轴值域进行渐变，从透明到淡紫红色，折线图在记录较多时支持左右滑动

准备JSON数据

下面是一组服务器的肤质记录数据，包含测肤时间、照片分数、测试记录id。

{
    avgScore = 83;
    list =     (
                {
            measureTime = "2019-03-25 17:46:46";
            photoScore = 64;
            testHistoryId = 1594780;
        },
                {
            measureTime = "2019-01-25 15:01:13";
            photoScore = 89;
            testHistoryId = 1359786;
        },
                {
            measureTime = "2019-01-24 16:34:30";
            photoScore = 90;
            testHistoryId = 1355844;
        },
                {
            measureTime = "2019-01-02 15:18:56";
            photoScore = 74;
            testHistoryId = 1271310;
        },
                {
            measureTime = "2018-12-29 15:00:02";
            photoScore = 80;
            testHistoryId = 1255037;
        },
                {
            measureTime = "2018-12-28 09:50:38";
            photoScore = 78;
            testHistoryId = 1250126;
        },
                {
            measureTime = "2018-12-27 16:54:13";
            photoScore = 85;
            testHistoryId = 1248122;
        },
                {
            measureTime = "2018-12-26 17:53:59";
            photoScore = 84;
            testHistoryId = 1244881;
        },
                {
            measureTime = "2018-11-07 09:45:26";
            photoScore = 80;
            testHistoryId = 1033831;
        },
                {
            measureTime = "2018-10-30 16:48:12";
            photoScore = 82;
            testHistoryId = 1000827;
        },
                {
            measureTime = "2018-10-29 19:42:25";
            photoScore = 76;
            testHistoryId = 996757;
        },
                {
            measureTime = "2018-08-21 17:49:42";
            photoScore = 88;
            testHistoryId = 690325;
        },
                {
            measureTime = "2018-08-17 14:38:39";
            photoScore = 90;
            testHistoryId = 672420;
        },
                {
            measureTime = "2018-08-16 20:03:22";
            photoScore = 89;
            testHistoryId = 669666;
        },
                {
            measureTime = "2018-08-10 20:47:43";
            photoScore = 90;
            testHistoryId = 642235;
        },
                {
            measureTime = "2018-07-19 17:27:44";
            photoScore = 88;
            testHistoryId = 537337;
        },
                {
            measureTime = "2018-07-18 16:43:24";
            photoScore = 89;
            testHistoryId = 533668;
        },
                {
            measureTime = "2018-07-17 21:03:19";
            photoScore = 92;
            testHistoryId = 530970;
        }
    );
    maxScore = 92;
}

定义数据模型

1、定义数据模型

针对以上JSON数据，定义数据模型MGLDRecordModel如下：

@interface MGLDRecordModel : NSObject
@property (nonatomic, strong) NSString *testHistoryId;
@property (nonatomic, strong) NSNumber *photoScore;
@property (nonatomic, strong) NSString *measureTime;
// 按照图表 `月/日` 进行时间格式化
- (NSString*)formattedTime;
@end

@implementation MGLDRecordModel
- (NSString*)formattedTime
{
    if (self.measureTime) {
        return nil;
    }
    NSDate *date = [NSDate dateWithString:self.measureTime formatString:@"yyyy-MM-dd HH:mm:ss"];
    return [NSString stringWithFormat:@"%@/%@",@(date.month),@(date.day)];
}
@end

2、JSON-Model序列化

提取上述JSON的list数组并进行对象序列化

NSDictionary *jsonObject = [self getResponseJSON];
if (jsonObject && [jsonObject.allKeys containsObject:@"list"]) 
{
    NSArray *list = jsonObject[@"list"];
        
    NSMutableArray *tmpArray = [[NSMutableArray alloc]init];
    for (int index = 0; index < list.count; index++) {
       NSDictionary *param = list[index];
         MGLDRecordModel *aModel = [MGLDRecordModel modelWithJSON:param];
        if (aModel) {
             [tmpArray addObject:aModel];
         }
    }
        // 绘图
}

设计图层结构

从目标动画gif图可以看出，折线图的宽度大于可见区域，不能一次性全部显示，X轴的日期跟随折线图移动，Y轴和背景虚实线保持静止，可拆解主要组成元素为以下三部分：

• 底部背景视图（MGLDHistoryGraphView类）

背景图层主要用于显示Y坐标、虚实线，并容纳滚动容器，本例中Y坐标使用UILabel标签布局组成，虚实线采用Draw方法绘制.

• 中间滚动容器（UIScrollView类）

中间滚动容器采用UIScrollView,边界为父容器的Y轴右边、上、下、右边界区域，contentSize与画板size保持一直

• 核心画板（MGLDDrawingBoard类）

画板用于绘制渐变区域、渐变折线，容纳交互按钮、X轴日期标签等，画板的宽度根据记录的数量动态计算

视图类自底而上依次为MGLDHistoryGraphView->UIScrollView->MGLDDrawingBoard

图层结构如下:

图层结构

开始绘图

1、绘制底层背景

按照上述图层设计，我们从下往上先绘制底层的背景如下：

底层坐标轴

如图，最底层视图主要由Y坐标、虚线、实线和白色背景组成，我们依次绘制：

1.1、绘制Y坐标轴

- (void)drawYAxisValuesInRect:(CGRect)rect
{
    CGFloat height = self.bounds.size.height;
    // static CGFloat KTopSpaceValue = 20.0f; static CGFloat KBottomSpaceValue = 34.0f;
    CGFloat drawContainerHeight = height - KTopSpaceValue - KBottomSpaceValue;
    CGFloat dashLinePadding = drawContainerHeight / 5.0;
    
    NSArray *yAxisValue = @[@"100",@"80",@"60",@"40",@"20"];
    NSUInteger count = yAxisValue.count;
    for (int index = 0; index < count; index++)
    {
        CGFloat originY = KTopSpaceValue + index*dashLinePadding - 9;
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, originY, KYAxisLeftSpaceValue-5, 18)];
        label.textAlignment = NSTextAlignmentRight;
        label.backgroundColor = [UIColor clearColor];
        label.font = [UIFont systemFontOfSize:12];
        label.textColor = [UIColor colorWithWhite:0.5  alpha:1.0];
        label.text = yAxisValue[index];
        [self addSubview:label];
    }
}

1.2、绘制辅助虚线

- (void)drawAuxiliaryDashedLineInRect:(CGRect)rect
{
    CGFloat height = self.bounds.size.height;
    CGFloat width = self.bounds.size.width;
    CGFloat drawContainerHeight = height - KTopSpaceValue - KBottomSpaceValue;
    CGFloat dashLinePadding = drawContainerHeight / 5.0;
    
    [[UIColor colorWithHexString:@"#E0E1E7"]setStroke];
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 1.0;
    CGFloat dash[] = {6,5};
    [path setLineDash:dash count:2 phase:0];
    for (int index = 0; index < 5; index ++) {
        [path moveToPoint:CGPointMake(KYAxisLeftSpaceValue, KTopSpaceValue + index*dashLinePadding)];
        [path addLineToPoint:CGPointMake(width, KTopSpaceValue + index*dashLinePadding)];
    }
    [path stroke];
}

1.3、绘制底部实线

- (void)drawBottomLineInRect:(CGRect)rect
{
    CGFloat height = self.bounds.size.height;
    CGFloat width = self.bounds.size.width;
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(KYAxisLeftSpaceValue, height - KBottomSpaceValue)];
    [path addLineToPoint:CGPointMake(width, height - KBottomSpaceValue)];
    
    [[UIColor colorWithHexString:@"#E0E1E7"]setStroke];
    path.lineWidth = 1.0;
    [path stroke];
}

2、添加UIScrollView

添加UIScrollView,保持top、bottom、right与父视图一致，左边从Y坐标轴右边区域开始，背景透明，为了便于观察，我们添加#FF4275背景色

添加UIScrollView

布局如下：

@weakify(self);
_scrollView = [[UIScrollView alloc]init];
// 设置紫红背景色便于观察
_scrollView.backgroundColor = [UIColor colorWithHexString:@"#FF4275"];
_scrollView.showsVerticalScrollIndicator = NO;
_scrollView.showsHorizontalScrollIndicator = NO;
[self addSubview:_scrollView];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
    @strongify(self);
    make.left.equalTo(self).offset(KYAxisLeftSpaceValue);
    make.right.top.bottom.equalTo(self);
}];

3、添加画板

画板是整个折线图的核心部分，用来绘制渐变色，X轴坐标、折线、交互按钮。

添加MGLDDrawingBoard画板到UIScrollView，设置边缘与UIScrollView保持一直，高度等于UIScrollView高度，宽度根据折线图绘制的宽度计算。

_drawingBoard = [[MGLDDrawingBoard alloc]init];
// 设置橙色背景色便于观察
_drawingBoard.backgroundColor = [UIColor orangeColor];   
[self.scrollView addSubview:_drawingBoard];
[self.drawingBoard mas_makeConstraints:^(MASConstraintMaker *make) {
    @strongify(self);
    make.edges.equalTo(self.scrollView);
    make.height.equalTo(self.scrollView.mas_height);
    // 初始默认宽度，绘制曲线时需要更新
    make.width.equalTo(@(10));
}];

效果如图：

画板布局图

3.1、背景图层接口配置

背景图层接口调用进行绘制更新时，需要根据记录个数调整画板的宽度，记录过少时在画板绘制区间均匀分布，记录过多时固定宽度分布，左右滚动查看

/**
 折线图容器，包含UIScrollView、画板以及其他元素
 */
@interface MGLDHistoryGraphView : UIView
- (void)drawGraphWithValues:(NSArray*)values;
@end

@implementation MGLDHistoryGraphView
- (void)drawGraphWithValues:(NSArray *)values
{
    NSUInteger count = values.count;
    self.itemCount = count;
    [self setNeedsLayout];
    // 绘制渐变折线图
    [self.drawingBoard drawGraphWithValues:values];
}

/*
 折线图在记录过少需要在可见屏幕均匀分布，记录过多左右滚动
 我们需要在此函数调用时刷新画板的边界
*/
- (void)layoutSubviews
{
    [super layoutSubviews];
    CGFloat width = CGRectGetWidth(self.bounds);
    // 如果可绘制的记录总宽度小于当前容器的宽度，则让记录在容器空间均匀分布
    if (self.itemCount*KItemSpaceValue < width)
    {
        [self.drawingBoard mas_updateConstraints:^(MASConstraintMaker *make) {
            make.width.equalTo(@(width));
        }];
    }
    else
    {
        CGFloat drawingBoardWidth = (self.itemCount+2)*KItemSpaceValue;
        [self.drawingBoard mas_updateConstraints:^(MASConstraintMaker *make) {
            make.width.equalTo(@(drawingBoardWidth));
        }];
    }
}
@end

3.2、画板接口配置

在画板页面，我们将交互按钮和X轴坐标分别用UIButton和UILabel进行展示，这里预先缓存控件用于后面的layout刷新。

/**
 画板，用于折线图内容绘制
 */
@interface MGLDDrawingBoard : UIView
- (void)drawGraphWithValues:(NSArray*)values;
@end

- (void)drawGraphWithValues:(NSArray *)values
{
// 加锁，防止重新绘制和layout布局同时调用造成资源访问冲突
    [_lock lock];
    self.drawValues = values;
    if (values.count > 0) {
         // 默认选中最后一个
        MGLDRecordModel *aModel = [values lastObject];
        self.selectedRecordId = aModel.testHistoryId;
    }
    // 移除按钮和标签
    [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    
    // 缓存画板上的按钮和标签
    NSMutableArray *buttonsArray = [NSMutableArray array];
    NSMutableArray *labelsArray = [NSMutableArray array];
    for (int index = 0; index < values.count; index++) {
        MGLDRecordModel *aModel = [values objectAtIndex:index];
        UIButton *button = [self buttonWithRecordId:aModel.testHistoryId tag:index];
        [self addSubview:button];
        [buttonsArray addObject:button];
        
        UILabel *label = [self labelWithText:[aModel formattedTime]];
        [self addSubview:label];
        [labelsArray addObject:label];
    }
    self.buttons = buttonsArray;
    self.labels = labelsArray;
    [_lock unlock];
    // 触发layout布局
    [self setNeedsLayout];
}

3.3、设置画板渐变和折线图层

@interface MGLDDrawingBoard ()
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@property (nonatomic, strong) CAShapeLayer *lineLayer;
@property (nonatomic, strong) NSArray *drawValues;
@property (nonatomic, strong) NSArray *buttons;
@property (nonatomic, strong) NSArray *labels;
@property (nonatomic, strong) NSLock *lock;
@property (nonatomic, strong) NSNumber *selectedRecordId;
@end

@implementation MGLDDrawingBoard
- (void)setUp
{
    self.backgroundColor = [UIColor clearColor];
    _lock = [[NSLock alloc]init];
    // 渐变图层
    _gradientLayer = [CAGradientLayer layer];
    NSArray *colors = @[(__bridge id)[UIColor colorWithHexString:@"#FF4275"].CGColor,
                        (__bridge id)[UIColor colorWithHexString:@"#FFC7D6"].CGColor,
                        (__bridge id)[UIColor colorWithHexString:@"#FFE4EC"].CGColor,
                        (__bridge id)[UIColor colorWithHexString:@"#FFF5F7"].CGColor,
                        (__bridge id)[UIColor whiteColor].CGColor];
    _gradientLayer.colors = colors;
    _gradientLayer.locations = @[@0.0,@0.4,@0.6,@0.8,@1.0];
    _gradientLayer.startPoint = CGPointMake(0.5,0.0);
    _gradientLayer.endPoint = CGPointMake(0.5,1.0);
    _gradientLayer.opacity = 0.5;
    [self.layer addSublayer:_gradientLayer];
    
    // 折线图层
    _lineLayer = [CAShapeLayer layer];
    _lineLayer.allowsEdgeAntialiasing = YES;
    _lineLayer.strokeColor = [UIColor colorWithHexString:@"#FF4275"].CGColor;
    _lineLayer.fillColor = [UIColor clearColor].CGColor;
    _lineLayer.lineWidth = 2.0;
    _lineLayer.lineJoin = kCALineJoinRound;
    _lineLayer.lineCap = kCALineCapRound;
    [self.layer addSublayer:_lineLayer];
}
@end

3.4、图层绘制和按钮标签布局

这里将layer路径设置和按钮、标签坐标更新放到一起计算

- (void)layoutSubviews
{
    [super layoutSubviews];
    // 调整layer的框架
    _lineLayer.frame = self.bounds;
    _gradientLayer.frame = self.bounds;
    
    [_lock lock];
    if (self.drawValues.count <= 0) {
        [_lock unlock];
        return;
    }
    
    CGFloat width = CGRectGetWidth(self.bounds);
    CGFloat height = CGRectGetHeight(self.bounds);
    CGFloat drawSpaceHeight = height - KTopSpaceValue - KBottomSpaceValue;
    
    
    MGLDRecordModel *firstModel = [self.drawValues firstObject];
    MGLDRecordModel *lastModel = [self.drawValues lastObject];
    
    CGFloat firstPointY = [self getOriginY:firstModel.photoScore.floatValue spaceHeight:drawSpaceHeight];
    CGFloat lastPointY = [self getOriginY:lastModel.photoScore.floatValue spaceHeight:drawSpaceHeight];
    
    UIBezierPath *gradientPath = [UIBezierPath bezierPath];
    UIBezierPath *linePath = [UIBezierPath bezierPath];
    [gradientPath moveToPoint:CGPointMake(-1, firstPointY)];
    [linePath moveToPoint:CGPointMake(0, firstPointY)];
    
    NSUInteger count = self.drawValues.count;
    CGFloat superWidth =  CGRectGetWidth(self.superview.frame);
    if (count*KItemSpaceValue < superWidth)
    {
        CGFloat padding = width/(count + 1);
        CGFloat originX = (width - MAX(0, count-1)*padding)/2;
        for (int index = 0; index < count; index++)
        {
            MGLDRecordModel *aModel = [self.drawValues objectAtIndex:index];
            CGFloat pointY = [self getOriginY:aModel.photoScore.floatValue spaceHeight:drawSpaceHeight];
            // 添加路径
            CGPoint pathPoint = CGPointMake(index*padding + originX, pointY);
            [gradientPath addLineToPoint:pathPoint];
            [linePath addLineToPoint:pathPoint];
            
            // 更新按钮和标签的center
            if (index < self.buttons.count) {
                UIButton *button = [self.buttons objectAtIndex:index];
                button.center = pathPoint;
            }
            CGPoint labelPoint = CGPointMake(index * padding + originX, height - KBottomSpaceValue*0.5);
            if (index < self.labels.count) {
                UILabel *label = [self.labels objectAtIndex:index];
                label.center = labelPoint;
            }
        }
    }
    else
    {
        for (int index = 0; index < count; index++)
        {
            MGLDRecordModel *aModel = [self.drawValues objectAtIndex:index];
            CGFloat pointY = [self getOriginY:aModel.photoScore.floatValue spaceHeight:drawSpaceHeight];
            CGPoint pathPoint = CGPointMake((index + 1)*KItemSpaceValue, pointY);
            [gradientPath addLineToPoint:pathPoint];
            [linePath addLineToPoint:pathPoint];
            if (index < self.buttons.count) {
                UIButton *button = [self.buttons objectAtIndex:index];
                button.center = pathPoint;
            }
            CGPoint labelPoint = CGPointMake((index + 1)*KItemSpaceValue, height - KBottomSpaceValue*0.5);
            if (index < self.labels.count) {
                UILabel *label = [self.labels objectAtIndex:index];
                [label sizeToFit];
                label.center = labelPoint;
            }
        }
    }
    
    [gradientPath addLineToPoint:CGPointMake(width+1, lastPointY)];
    [linePath addLineToPoint:CGPointMake(width, lastPointY)];
    
    // 构造渐变layer闭环
    [gradientPath addLineToPoint:CGPointMake(width+1, height - KBottomSpaceValue)];
    [gradientPath addLineToPoint:CGPointMake(-1, height - KBottomSpaceValue)];
    [gradientPath addLineToPoint:CGPointMake(-1, firstPointY)];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = gradientPath.CGPath;
    _gradientLayer.mask = shapeLayer;
    _lineLayer.path = linePath.CGPath;
    
    // 设置选中状态，第一次排版时刷新布局并滚动到对应位置
    for (UIButton *button in self.buttons) {
        if (self.selectedRecordId && [button.recordId isEqualToNumber:self.selectedRecordId]) {
            button.selected = YES;
            CGFloat originX = button.frame.origin.x;
            UIScrollView *scrollView = (UIScrollView*)self.superview;
            if (scrollView.frame.size.width < scrollView.contentSize.width) {
                CGFloat width = scrollView.frame.size.width;
                CGFloat offsetX = MAX(0, originX + KItemSpaceValue-width);
                [(UIScrollView*)self.superview setContentOffset:CGPointMake(offsetX, 0) animated:YES];
            }
        }
        else
        {
            button.selected = NO;
        }
    }
    
    [_lock unlock];
}

最终完成效果同上：

渐变折线图.gif

注：实际上画板上的渐变、折线、按钮和标签都是相互独立的部分，经过组合得到图示效果。

源代码

附上Demo源代码