橙红科技有限公司复制粘贴iOS开发技术分享

tableview性能优化之coreText

2016-10-08  本文已影响530人  南枫小谨

最近在做实时聊天,出现了滚动tableview卡顿问题,经过研究发现是因为图片太多造城的,于是试着用coretext在label的drawrect方法里面绘制果然取得了不错的效果,下面跟大家分享一下。

1.绘制文字   

  我是自定义了一个label,在label里面进行图文混排,要添加coreText.framework库,然后自定义的label中要添加#import<CoreText/CoreText.h>头文件

1)首先在label的drawrect方法里面

CGContextRef context =UIGraphicsGetCurrentContext();//获取绘制上下文

CGContextSetShadowWithColor(context,CGSizeMake(0.3,0.3), 0.3,  [UIColorcolorWithRed:0green:0blue:0alpha:0.6].CGColor);//设置文本阴影

CGContextSetTextMatrix(context,CGAffineTransformIdentity);//翻转当前的坐标系(因为对于底层绘制引擎来说,屏幕左下角为(0,0))

CGAffineTransform flipVertical =CGAffineTransformMake(1,0,0,-1,0,self.bounds.size.height);

CGContextConcatCTM(context, flipVertical);//将当前context的坐标系进行反转

下面创建一个富文本string

NSMutableAttributedString* usernameattribute = [[NSMutableAttributedStringalloc]initWithString:@"coreTextTest"];

2)添加图片占位

如果里面需要添加图片那么先要预留下一个空白位置给图片,最后在统一绘制图片

NSString* imageName =kNew_UserId2_living;//图片名字

CTRunDelegateCallbacks imageCallbacks;//CTRunDelegateCallbacks 来给图片设置一个占位

imageCallbacks.version =kCTRunDelegateVersion1;

imageCallbacks.dealloc =RunDelegateDeallocCallback;

imageCallbacks.getAscent =RunDelegateGetAscentCallback;//获取图片高

imageCallbacks.getDescent =RunDelegateGetDescentCallback;//获取图片离底部距离

imageCallbacks.getWidth =RunDelegateGetWidthCallback;//获取图片宽度

CTRunDelegateRef runDelegate =CTRunDelegateCreate(&imageCallbacks, (__bridgevoid*)imageName);

NSMutableAttributedString *attribute = [[NSMutableAttributedStringalloc] initWithString:@" "];//空格用于给图片留位置

[attribute addAttribute:(NSString *)kCTRunDelegateAttributeNamevalue:(__bridgeid)runDelegate range:NSMakeRange(0,1)];

CFRelease(runDelegate);

[attribute addAttribute:@"imageName"value:imageName range:NSMakeRange(0,1)];

NSMutableAttributedString*  username = [[NSMutableAttributedString alloc]initWithAttributedString:attribute];

[usernameattribute appendAttributedString:username];

[usernameattribute setAttributes:@{(id)kCTFontAttributeName:[UIFontboldSystemFontOfSize:17],(id)kCTForegroundColorAttributeName:_warningColor}range:NSMakeRange(0,usernameattribute.length)];//设置字体大小颜色等

注:(

void RunDelegateDeallocCallback(void* refCon){

}

CGFloat RunDelegateGetAscentCallback(void* refCon){

NSString *imageName = (__bridge NSString*)refCon;

return [UIImage imageNamed:imageName].size.height;

}

CGFloat RunDelegateGetDescentCallback(void *refCon){

return 0;

}

CGFloat RunDelegateGetWidthCallback(void *refCon){

NSString *imageName = (__bridge NSString *)refCon;

return [UIImage imageNamed:imageName].size.width;

}

这四个方法写在drawrect方法外面

设置文本行间距,换行模式,段落间距等

//创建文本,    行间距

CGFloat lineSpace = 0.3;

CTParagraphStyleSetting lineSpaceStyle;

lineSpaceStyle.spec = kCTParagraphStyleSpecifierLineSpacing;

lineSpaceStyle.valueSize = sizeof(lineSpace);

lineSpaceStyle.value=&lineSpace;

//换行模式

CTParagraphStyleSetting lineBreakMode;

CTLineBreakMode lineBreak = kCTLineBreakByCharWrapping;

lineBreakMode.spec = kCTParagraphStyleSpecifierLineBreakMode;

lineBreakMode.value = &lineBreak;

lineBreakMode.valueSize = sizeof(CTLineBreakMode);

//设置  段落间距

CGFloat paragraph = 1.0;

CTParagraphStyleSetting paragraphStyle;

paragraphStyle.spec = kCTParagraphStyleSpecifierParagraphSpacing;

paragraphStyle.valueSize = sizeof(CGFloat);

paragraphStyle.value = ¶graph;

CTParagraphStyleSetting settings[] = {

lineBreakMode,lineSpaceStyle,paragraph

};

CTParagraphStyleRef style = CTParagraphStyleCreate(settings, 3);

NSMutableDictionary *attributes = [NSMutableDictionary dictionaryWithObject:(id)style forKey:(id)kCTParagraphStyleAttributeName ];

// set attributes to attributed string

[usernameattribute addAttributes:attributes range:NSMakeRange(0, [usernameattribute length])];

CFRelease(style);

//创建绘制区域

CGMutablePathRef path = CGPathCreateMutable();

CGRect bounds = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);

CGPathAddRect(path, NULL, bounds);

//根据AttributedString生成CTFramesetterRef

CTFramesetterRef frameSetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)usernameattribute);

CTFrameRef frame = CTFramesetterCreateFrame(frameSetter, CFRangeMake(0, [usernameattribute length]), path, NULL);

//进行绘制

CTFrameDraw(frame, context);

//绘制图片

CFArrayRef lines = CTFrameGetLines(frame);

CGPoint lineOrigins[CFArrayGetCount(lines)];

CTFrameGetLineOrigins(frame, CFRangeMake(0, 0), lineOrigins);

for (CFIndex i = 0; i < CFArrayGetCount(lines); i++) {

      CTLineRef line = (CTLineRef)CFArrayGetValueAtIndex(lines, i);

      CGFloat lineAscent;

      CGFloat lineDescent;

      CGFloat lineLeading;

      CTLineGetTypographicBounds(line, &lineAscent, &lineDescent, &lineLeading);

       CFArrayRef runs = CTLineGetGlyphRuns(line);

       for (CFIndex j = 0; j < CFArrayGetCount(runs); j++) {

              CGFloat runAscent;

             CGFloat runDescent;

             CGPoint lineOrigin = lineOrigins[i];

              CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runs, j);

              NSDictionary* attributes = (NSDictionary*)CTRunGetAttributes(run);

             CGRect runRect;

             runRect.size.width = CTRunGetTypographicBounds(run, CFRangeMake(0,0), &runAscent, &runDescent, NULL);

             runRect=CGRectMake(lineOrigin.x + CTLineGetOffsetForStringIndex(line,     CTRunGetStringRange(run).location, NULL), lineOrigin.y - runDescent, runRect.size.width, runAscent + runDescent);

            NSString *imageName = [attributes objectForKey:@"imageName"];

            //图片渲染逻辑

           UIImage *image = [UIImage imageNamed:imageName];

           if (image) {

              CGRect imageDrawRect;

              imageDrawRect.size = image.size;

              imageDrawRect.origin.x = runRect.origin.x + lineOrigin.x;

              imageDrawRect.origin.y = lineOrigin.y-2;

             CGContextDrawImage(context, imageDrawRect, image.CGImage);

        }

    }

}

CFRelease(frame);

CFRelease(path);

CFRelease(frameSetter);

这样定制出来的cell即使有图片滑动也非常顺滑

下面就是计算cell的这一行的高度了

计算富文本高度用一下方法

- (int)getAttributedStringHeightWithString:(NSAttributedString *)  string  WidthValue:(int) width

{

int total_height = 0;

CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)string);    //string 为要计算高度的NSAttributedString

CGRect drawingRect = CGRectMake(0, 0, width, 1000);  //这里的高要设置足够大

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddRect(path, NULL, drawingRect);

CTFrameRef textFrame = CTFramesetterCreateFrame(framesetter,CFRangeMake(0,0), path, NULL);

CGPathRelease(path);

CFRelease(framesetter);

NSArray *linesArray = (NSArray *) CTFrameGetLines(textFrame);

CGPoint origins[[linesArray count]];

CTFrameGetLineOrigins(textFrame, CFRangeMake(0, 0), origins);

int line_y = (int) origins[[linesArray count] -1].y;  //最后一行line的原点y坐标

CGFloat ascent;

CGFloat descent;

CGFloat leading;

CTLineRef line = (__bridge CTLineRef) [linesArray objectAtIndex:[linesArray count]-1];

CTLineGetTypographicBounds(line, &ascent, &descent, &leading);

total_height = 1000 - line_y + (int) descent +1;    //+1为了纠正descent转换成int小数点后舍去的值

CFRelease(textFrame);

return total_height;

}

计算出来的高度通过label的方法反给tableview的高度计算代理方法就可以了

上一篇下一篇

猜你喜欢

热点阅读