需求：之前一個項目中，需要用一個圖表展示折線圖，折線的點可多達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 保持界面流暢的技巧
