iOS用YYLabel中方法实现异步画图ChartView

2016-06-01 本文已影响1752人尛焱

需求：之前一个项目中，需要用一个图表展示折线图，折线的点可多达100多个，然后加上渐变，并且每个图表是4个数据源，4条折线和渐变用颜色区别，然后每天都有一个图表，用UITableView展示一年的数据，反正意思就是，这样导致了滑动UITableView时页面帧数的降低和卡顿等。
解决方法：因为正好看过YY大神YYLabel可以异步显示，于是直接把YYLabel中异步绘图部分摘了出来，这样自己实现绘图功能就行了。

主要几个方法

一. AsyncLayerGetDispalyQueue

static dispatch_queue_t YChartAsyncLayerGetDispalyQueue() {
#define MAX_QUEUE_COUNT 16
    static int queueCount;
    static dispatch_queue_t queues[MAX_QUEUE_COUNT];
    static int32_t counter = 0;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        queueCount = (int)[NSProcessInfo processInfo].activeProcessorCount;
        queueCount = queueCount < 1 ? 1 : queueCount;
        if ( [[UIDevice currentDevice].systemVersion floatValue] >= 8.0 ) {

            for (NSUInteger i = 0 ; i < queueCount; i++) {
                dispatch_queue_attr_t attr = dispatch_queue_attr_make_with_qos_class(DISPATCH_QUEUE_SERIAL, QOS_CLASS_USER_INITIATED, 0);
                queues[i] = dispatch_queue_create("com.yxw.chart.render", attr);
            }
        }
        else{
            for (NSUInteger i= 0; i < queueCount; i++) {
                queues[i] = dispatch_queue_create("com.yxw.chart.render", DISPATCH_QUEUE_SERIAL);
                dispatch_set_target_queue(queues[i], dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0));
            }
        }
    });
//以上部分都是初始化，只执行一次
//OSAtomicIncrement32：一个自增函数，在库<libkern/OSAtomic.h>中，是线程安全的；
    int32_t cur = OSAtomicIncrement32(&counter);
    if (cur < 0) {
        cur = -cur;
    }
    return queues[cur%queueCount];
}

dispatch_queue_create函数，在iOS8之前，不能在创建时设定优先级，所以用dispatch_set_target_queue设置优先级，
另外，如果两个队列dispatch_set_target_queue到同一个队列，DISPATCH_QUEUE_SERIAL串行、DISPATCH_QUEUE_CONCURRENT并行对两个队列也有作用，可以参考demo中方法testGCDTarget;
iOS 8之后用dispatch_queue_attr_make_with_qos_class直接创建队列并设置优先级等；QOS_CLASS_USER_INITIATED：为iOS8之后的优先级，其它优先级为：

QOS_CLASS_USER_INTERACTIVE： user interactive等级表示任务需要被立即执行以提供好的用户体验。使用它来更新UI，响应事件以及需要低延时的小工作量任务。这个等级的工作总量应该保持较小规模。
QOS_CLASS_USER_INITIATED：user initiated等级表示任务由UI发起并且可以异步执行。它应该用在用户需要即时的结果同时又要求可以继续交互的任务。
QOS_CLASS_UTILITY：utility等级表示需要长时间运行的任务，常常伴随有用户可见的进度指示器。使用它来做计算，I/O，网络，持续的数据填充等任务。这个等级被设计成节能的。
QOS_CLASS_BACKGROUND：background等级表示那些用户不会察觉的任务。使用它来执行预加载，维护或是其它不需用户交互和对时间不敏感的任务。
之前的优先级可参考头文件中定义

#define DISPATCH_QUEUE_PRIORITY_HIGH 2
#define DISPATCH_QUEUE_PRIORITY_DEFAULT 0
#define DISPATCH_QUEUE_PRIORITY_LOW (-2)
#define DISPATCH_QUEUE_PRIORITY_BACKGROUND INT16_MIN

二. setNeedsDisplay
滑动UITableView更新图表数据时，不要直接调用绘图方法，应该调用 setNeedsDisplay，等系统刷新页面时调用display方法再绘制（这里使用的是layer层，UIView在调用setNeedsDisplay后会调用drawRect:方法），以便滑动过快时可以取消不必要的绘制。
取消绘制的判断也是以一个自增量来判断的，在每次调用setNeedsDisplay时自增，绘制时判断自增量不同则取消本次绘制。

+ (Class)layerClass {
    return [YChartAsyncLayer class];
}

每个UIView都有一个CALayer用来显示，重写UIView的这个方法，让UIView使用YChartAsyncLayer来显示

三. 绘制渐变的方法

static void drawLineGradientInContext(CGContextRef context,CGSize size,NSArray *array,double maxValue,CGMutablePathRef path){
    CGFloat xWidth = size.width / (array.count - 1);
    CGPathMoveToPoint(path, NULL,0, size.height - 1);
    for (int i = 0; i < array.count; i++) {
        double value = 0.0;
        if (maxValue != 0) {
            value = [array[i] doubleValue] / maxValue * size.height * 0.9;
        }
        CGPathAddLineToPoint(path, NULL, xWidth * i, size.height - value - 1);
    }
    
    CGPathAddLineToPoint(path, NULL, xWidth * (array.count - 1), size.height - 1);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[3] = {0.0,0.5,1.0};
    NSArray *colors = @[(__bridge id)([UIColor colorWithRed:0xec/255.0 green:1 blue:1 alpha:1].CGColor),(__bridge id)([UIColor colorWithRed:0x80/255.0 green:1 blue:1 alpha:1].CGColor),(__bridge id)([UIColor colorWithRed:0 green:0xae/255.0 blue:0xae/255.0 alpha:1].CGColor)];

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, locations);
    CGRect pathRect = CGPathGetBoundingBox(path);
    CGPoint startPoint = CGPointMake(CGRectGetMidX(pathRect), CGRectGetMinY(pathRect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(pathRect), CGRectGetMaxY(pathRect));
    CGContextSaveGState(context);
    CGContextAddPath(context, path);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, kCGGradientDrawsAfterEndLocation);
    CGContextRestoreGState(context);
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

因为重点是异步调用，所以绘图的代码就不多说了，demo中的绘图也是把4个数据源绘制到一起，没有分颜色。
请在真机上测试，iPhone5C 等差一点的机型上效果明显。
若有错误，欢迎指正！

四. 最后
show me the code

参考链接

YYLabel地址 ibireme/YYText
关于 iOS 保持界面流畅的技巧

iOS用YYLabel中方法实现异步画图ChartView

主要几个方法

参考链接

猜你喜欢

热点阅读