原文链接:http://www.jianshu.com/p/78027a3a2c41
最近在看一些 iOS 性能优化的文章,我找到了 VVeboTableView 这个框架。严格来说这个不属于框架,而是作者用自己的方式优化 UITableView 的一个实践。 VVeboTableView 展示了各种类型的 cell(转发贴,原贴,有图,无图)。虽然样式比较复杂,但是滑动起来性能却很好:我在我的 iphone 4s 上进行了 Core Animation 测试,在滑动的时候帧率没有低于 56,而且也没有觉得有半点卡顿,那么他是怎么做到的呢? —— 由 宇朋Look 分享

这次分享一个关于性能优化的源码。

我们知道UITabelView在iOS开发中扮演者举足轻重的角色,因为它是iOS开发中使用频率非常高的控件之一:几乎每个app都离不开它,因此,UITabelView的性能将直接影响这个app的性能。

如果UITabelView里的cell设计的比较简单,那么即使不做相应的优化,对性能的影响也不会很大。

但是,当cell里面涉及到图文混排,cell高度不都相等的设计时,如果不进行一些操作的话,会影响性能,甚至会出现卡顿,造成非常不好的用户体验。

最近在看一些iOS性能优化的文章,我找到了VVeboTableView这个框架。严格来说这个不属于框架,而是作者用自己的方式优化UITableView的一个实践。

VVeboTableView展示了各种类型的cell(转发贴,原贴,有图,无图)。虽然样式比较复杂,但是滑动起来性能却很好:我在我的iphone 4s上进行了Core Animation测试,在滑动的时候帧率没有低于56,而且也没有觉得有半点卡顿,那么他是怎么做到的呢?

看了源码之后,我把作者的思路整理了出来:

优化思路图

从图中我们可以看出,作者从减少CPU/GPU计算量,按需加载cell,异步处理cell三大块来实现对UITableView的优化。下面我就从左到右,从上到下,结合代码来展示一下作者是如何实现每一点的。

1. 减少CPU/GPU计算量

1.1 cell的重用机制

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{//cell重用VVeboTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];if (cell==nil) {cell = [[VVeboTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];}//绘制[self drawCell:cell withIndexPath:indexPath];return cell;
}

这部分就不赘述了,相信大家都已经掌握。

1.2 将cell高度和 cell里的控件的frame缓存在model里

这一步我们需要在字典转模型里统一计算(不需要看代码细节,只需要知道这里在模型里保存了需要保存的控件的frame和整个cell的高度即可):

- (void)loadData{...for (NSDictionary *dict in temp) {NSDictionary *user = dict[@"user"];...NSDictionary *retweet = [dict valueForKey:@"retweeted_status"];if (retweet) {NSMutableDictionary *subData = [NSMutableDictionary dictionary];...{float width = [UIScreen screenWidth]-SIZE_GAP_LEFT*2;CGSize size = [subData[@"text"] sizeWithConstrainedToWidth:width fromFont:FontWithSize(SIZE_FONT_SUBCONTENT) lineSpace:5];NSInteger sizeHeight = (size.height+.5);subData[@"textRect"] = [NSValue valueWithCGRect:CGRectMake(SIZE_GAP_LEFT, SIZE_GAP_BIG, width, sizeHeight)];sizeHeight += SIZE_GAP_BIG;if (subData[@"pic_urls"] && [subData[@"pic_urls"] count]>0) {sizeHeight += (SIZE_GAP_IMG+SIZE_IMAGE+SIZE_GAP_IMG);}sizeHeight += SIZE_GAP_BIG;subData[@"frame"] = [NSValue valueWithCGRect:CGRectMake(0, 0, [UIScreen screenWidth], sizeHeight)];}data[@"subData"] = subData;float width = [UIScreen screenWidth]-SIZE_GAP_LEFT*2;CGSize size = [data[@"text"] sizeWithConstrainedToWidth:width fromFont:FontWithSize(SIZE_FONT_CONTENT) lineSpace:5];NSInteger sizeHeight = (size.height+.5);...sizeHeight += SIZE_GAP_TOP+SIZE_AVATAR+SIZE_GAP_BIG;if (data[@"pic_urls"] && [data[@"pic_urls"] count]>0) {sizeHeight += (SIZE_GAP_IMG+SIZE_IMAGE+SIZE_GAP_IMG);NSMutableDictionary *subData = [data valueForKey:@"subData"];if (subData) {sizeHeight += SIZE_GAP_BIG;CGRect frame = [subData[@"frame"] CGRectValue];...sizeHeight += frame.size.height;data[@"subData"] = subData;}sizeHeight += 30;data[@"frame"] = [NSValue valueWithCGRect:CGRectMake(0, 0, [UIScreen screenWidth], sizeHeight)];}[datas addObject:data];}
}//获取高度缓存
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{NSDictionary *dict = datas[indexPath.row];float height = [dict[@"frame"] CGRectValue].size.height;return height;
}

这里我们可以看到,作者根据帖子类型的不同:原贴(subData)的存在与否),来逐渐叠加cell的高度。

缓存的高度在heightForRowAtIndexPath:方法里使用。而缓存的控件的frame的使用,我们在下面讲解绘制cell的代码里详细介绍。

1.3 减少cell内部控件的层级

我们先来看一下一个带有原贴的转发贴的布局:

布局

可能有小伙伴会将上中下这三个部分各自封装成一个view,再通过每个view来管理各自的子view。但是这个框架的作者却将它们都排列到一层上。

减少了子view的层级,有助于减少cpu对各种约束的计算。这在子view的数量,层级都很多的情况下对cpu的压力会减轻很多。

1.4 通过覆盖圆角图片来实现头像的圆角效果

    //头像,frame固定avatarView = [UIButton buttonWithType:UIButtonTypeCustom];//[[VVeboAvatarView alloc] initWithFrame:avatarRect];avatarView.frame = CGRectMake(SIZE_GAP_LEFT, SIZE_GAP_TOP, SIZE_AVATAR, SIZE_AVATAR);avatarView.backgroundColor = [UIColor colorWithRed:250/255.0 green:250/255.0 blue:250/255.0 alpha:1];avatarView.hidden = NO;avatarView.tag = NSIntegerMax;avatarView.clipsToBounds = YES;[self.contentView addSubview:avatarView];//覆盖在头像上面的图片,制造圆角效果:framecornerImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, SIZE_AVATAR+5, SIZE_AVATAR+5)];cornerImage.center = avatarView.center;cornerImage.image = [UIImage imageNamed:@"corner_circle@2x.png"];cornerImage.tag = NSIntegerMax;[self.contentView addSubview:cornerImage];

在这里,作者没有使用任何复杂的技术来实现图片的圆角(使用layer或者裁剪图片),只是将一张圆角颜色和cell背景色一致的图片覆盖在了原来的头像上,实现了圆角的效果(但是这个方法不太适用于有多个配色方案的app)。

2. 按需加载cell

上文提到过,UITableView持有一个needLoadArr数组,它保存着需要刷新的cell的NSIndexPath

我们先来看一下needLoadArr是如何使用的:

2.1 在cellForRow:方法里只加载可见cell

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{...[self drawCell:cell withIndexPath:indexPath];...
}- (void)drawCell:(VVeboTableViewCell *)cell withIndexPath:(NSIndexPath *)indexPath{NSDictionary *data = [datas objectAtIndex:indexPath.row];...cell.data = data;//当前的cell的indexPath不在needLoadArr里面,不用绘制if (needLoadArr.count>0&&[needLoadArr indexOfObject:indexPath]==NSNotFound) {[cell clear];return;}//将要滚动到顶部,不绘制if (scrollToToping) {return;}//真正绘制cell的代码[cell draw];
}

2.2 监听tableview的快速滚动,保存目标滚动范围的前后三行的索引

知道了如何使用needLoadArr,我们看一下needLoadArr里面的元素是如何被添加和删除的。

添加元素NSIndexPath

//按需加载 - 如果目标行与当前行相差超过指定行数,只在目标滚动范围的前后指定3行加载。
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{//targetContentOffset : 停止后的contentOffsetNSIndexPath *ip = [self indexPathForRowAtPoint:CGPointMake(0, targetContentOffset->y)];//当前可见第一行row的indexNSIndexPath *cip = [[self indexPathsForVisibleRows] firstObject];//设置最小跨度,当滑动的速度很快,超过这个跨度时候执行按需加载NSInteger skipCount = 8;//快速滑动(跨度超过了8个cell)if (labs(cip.row-ip.row)>skipCount) {//某个区域里的单元格的indexPathNSArray *temp = [self indexPathsForRowsInRect:CGRectMake(0, targetContentOffset->y, self.width, self.height)];NSMutableArray *arr = [NSMutableArray arrayWithArray:temp];if (velocity.y<0) {//向上滚动NSIndexPath *indexPath = [temp lastObject];//超过倒数第3个if (indexPath.row+3<datas.count) {[arr addObject:[NSIndexPath indexPathForRow:indexPath.row+1 inSection:0]];[arr addObject:[NSIndexPath indexPathForRow:indexPath.row+2 inSection:0]];[arr addObject:[NSIndexPath indexPathForRow:indexPath.row+3 inSection:0]];}} else {//向下滚动NSIndexPath *indexPath = [temp firstObject];//超过正数第3个if (indexPath.row>3) {[arr addObject:[NSIndexPath indexPathForRow:indexPath.row-3 inSection:0]];[arr addObject:[NSIndexPath indexPathForRow:indexPath.row-2 inSection:0]];[arr addObject:[NSIndexPath indexPathForRow:indexPath.row-1 inSection:0]];}}//添加arr里的内容到needLoadArr的末尾[needLoadArr addObjectsFromArray:arr];}
}

知道了如何向needLoadArr里添加元素,现在看一下何时(重置)清理这个array:

移除元素NSIndexPath

//用户触摸时第一时间加载内容
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{if (!scrollToToping) {[needLoadArr removeAllObjects];[self loadContent];}return [super hitTest:point withEvent:event];
}- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{[needLoadArr removeAllObjects];
}//将要滚动到顶部
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView{scrollToToping = YES;return YES;
}//停止滚动
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{scrollToToping = NO;[self loadContent];
}//滚动到了顶部
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView{scrollToToping = NO;[self loadContent];
}

我们可以看到,当手指触碰到tableview时 和 开始拖动tableview的时候就要清理这个数组。

而且在手指触碰到tableview时和 tableview停止滚动后就会执行loadContent方法,用来加载可见区域的cell。

loadContent方法的具体实现:

- (void)loadContent{//正在滚动到顶部if (scrollToToping) {return;}//可见cell数if (self.indexPathsForVisibleRows.count<=0) {return;}//触摸的时候刷新可见cellif (self.visibleCells&&self.visibleCells.count>0) {for (id temp in [self.visibleCells copy]) {VVeboTableViewCell *cell = (VVeboTableViewCell *)temp;[cell draw];}}
}

在这里注意一下,tableview的visibleCells属性是可见的cell的数组。

3. 异步处理cell

在讲解如何异步处理cell之前,我们大致看一下这个cell都有哪些控件:

控件名称

了解到控件的名称,位置之后,我们看一下作者是如何布局这些控件的:

控件布局

在上面可以大致看出来,除了需要异步网络加载的头像(avatarView)和帖子图片(multiPhotoScrollView),作者都将这些控件画在了一张图上面(postBgView)。

而且我们可以看到,在postBgView上面需要异步显示的内容分为四种:

  1. UIImageView:本地图片(comments, more,reposts)。
  2. UIView:背景,分割线(topLine)。
  3. NSString:name,from字符串。
  4. Label:原贴的detailLabel 和 当前贴的 label。

下面结合代码来讲解这四种绘制:

首先看一下cell内部的核心绘制方法:

现在我们来看一下cell绘制的核心方法,draw方法:

//将cell的主要内容绘制到图片上
- (void)draw{//drawed = YES说明正在绘制,则立即返回。因为绘制是异步的,所以在开始绘制之后需要立即设为yes,防止重复绘制if (drawed) {return;}//标记当前的绘制NSInteger flag = drawColorFlag;drawed = YES;dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{//获取整个cell的frame,已经换存在模型里了CGRect rect = [_data[@"frame"] CGRectValue];//开启图形上下文UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0);//获取图形上下文CGContextRef context = UIGraphicsGetCurrentContext();//背景颜色[[UIColor colorWithRed:250/255.0 green:250/255.0 blue:250/255.0 alpha:1] set];//通过rect填充背景颜色CGContextFillRect(context, rect);//如果有原帖(说明当前贴是转发贴)if ([_data valueForKey:@"subData"]) {[[UIColor colorWithRed:243/255.0 green:243/255.0 blue:243/255.0 alpha:1] set];CGRect subFrame = [_data[@"subData"][@"frame"] CGRectValue];CGContextFillRect(context, subFrame);//原帖上面的分割线[[UIColor colorWithRed:200/255.0 green:200/255.0 blue:200/255.0 alpha:1] set];CGContextFillRect(context, CGRectMake(0, subFrame.origin.y, rect.size.width, .5));}{float leftX = SIZE_GAP_LEFT+SIZE_AVATAR+SIZE_GAP_BIG;float x = leftX;float y = (SIZE_AVATAR-(SIZE_FONT_NAME+SIZE_FONT_SUBTITLE+6))/2-2+SIZE_GAP_TOP+SIZE_GAP_SMALL-5;//绘制名字[_data[@"name"] drawInContext:context withPosition:CGPointMake(x, y) andFont:FontWithSize(SIZE_FONT_NAME)andTextColor:[UIColor colorWithRed:106/255.0 green:140/255.0 blue:181/255.0 alpha:1]andHeight:rect.size.height];//绘制名字下面的infoy += SIZE_FONT_NAME+5;float fromX = leftX;float size = [UIScreen screenWidth]-leftX;NSString *from = [NSString stringWithFormat:@"%@  %@", _data[@"time"], _data[@"from"]];[from drawInContext:context withPosition:CGPointMake(fromX, y) andFont:FontWithSize(SIZE_FONT_SUBTITLE)andTextColor:[UIColor colorWithRed:178/255.0 green:178/255.0 blue:178/255.0 alpha:1]andHeight:rect.size.height andWidth:size];}{//评论角CGRect countRect = CGRectMake(0, rect.size.height-30, [UIScreen screenWidth], 30);[[UIColor colorWithRed:250/255.0 green:250/255.0 blue:250/255.0 alpha:1] set];CGContextFillRect(context, countRect);float alpha = 1;float x = [UIScreen screenWidth]-SIZE_GAP_LEFT-10;NSString *comments = _data[@"comments"];if (comments) {CGSize size = [comments sizeWithConstrainedToSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) fromFont:FontWithSize(SIZE_FONT_SUBTITLE) lineSpace:5];x -= size.width;//图片文字[comments drawInContext:context withPosition:CGPointMake(x, 8+countRect.origin.y)andFont:FontWithSize(12)andTextColor:[UIColor colorWithRed:178/255.0 green:178/255.0 blue:178/255.0 alpha:1]andHeight:rect.size.height];//评论图片(bundle里的图片)[[UIImage imageNamed:@"t_comments.png"] drawInRect:CGRectMake(x-5, 10.5+countRect.origin.y, 10, 9) blendMode:kCGBlendModeNormal alpha:alpha];commentsRect = CGRectMake(x-5, self.height-50, [UIScreen screenWidth]-x+5, 50);x -= 20;}//转发角NSString *reposts = _data[@"reposts"];if (reposts) {CGSize size = [reposts sizeWithConstrainedToSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) fromFont:FontWithSize(SIZE_FONT_SUBTITLE) lineSpace:5];x -= MAX(size.width, 5)+SIZE_GAP_BIG;//转发文字[reposts drawInContext:context withPosition:CGPointMake(x, 8+countRect.origin.y)andFont:FontWithSize(12)andTextColor:[UIColor colorWithRed:178/255.0 green:178/255.0 blue:178/255.0 alpha:1]andHeight:rect.size.height];//转发图片(bundle里的图片)[[UIImage imageNamed:@"t_repost.png"] drawInRect:CGRectMake(x-5, 11+countRect.origin.y, 10, 9) blendMode:kCGBlendModeNormal alpha:alpha];repostsRect = CGRectMake(x-5, self.height-50, commentsRect.origin.x-x, 50);x -= 20;}//更多角[@"•••" drawInContext:contextwithPosition:CGPointMake(SIZE_GAP_LEFT, 8+countRect.origin.y)andFont:FontWithSize(11)andTextColor:[UIColor colorWithRed:178/255.0 green:178/255.0 blue:178/255.0 alpha:.5]andHeight:rect.size.height];//绘制原帖底部的分割线if ([_data valueForKey:@"subData"]) {[[UIColor colorWithRed:200/255.0 green:200/255.0 blue:200/255.0 alpha:1] set];CGContextFillRect(context, CGRectMake(0, rect.size.height-30.5, rect.size.width, .5));}}//将整个contex转化为图片,赋给背景imageviewUIImage *temp = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();dispatch_async(dispatch_get_main_queue(), ^{if (flag==drawColorFlag) {postBGView.frame = rect;postBGView.image = nil;postBGView.image = temp;}});});//绘制两个label的text[self drawText];//加载帖子里的网路图片,使用SDWebImage[self loadThumb];
}

下面抽出每一种绘制内容的代码,分别讲解:

3.1 异步加载网络图片

关于网络图片的异步加载和缓存,作者使用了第三方框架:SDWebImage

- (void)setData:(NSDictionary *)data{_data = data;[avatarView setBackgroundImage:nil forState:UIControlStateNormal];if ([data valueForKey:@"avatarUrl"]) {NSURL *url = [NSURL URLWithString:[data valueForKey:@"avatarUrl"]];[avatarView sd_setBackgroundImageWithURL:url forState:UIControlStateNormal placeholderImage:nil options:SDWebImageLowPriority];}
}

对于SDWebImage,我相信大家都不会陌生,我前一阵写了一篇源码解析,有兴趣的话可以看一下:SDWebImage源码解析。

3.2 异步绘制本地图片

本地图片的绘制,只需要提供图片在bundle内部的名字和frame就可以绘制:

[[UIImage imageNamed:@"t_comments.png"] drawInRect:CGRectMake(x-5, 10.5+countRect.origin.y, 10, 9) blendMode:kCGBlendModeNormal alpha:alpha];

3.3 异步绘制UIView

对于UIView的绘制,我们只需要知道要绘制的UIView的frame和颜色即可:

//背景颜色
[[UIColor colorWithRed:250/255.0 green:250/255.0 blue:250/255.0 alpha:1] set];//通过rect填充背景颜色
CGContextFillRect(context, rect);

讲到现在,就剩下了关于文字的绘制,包括脱离了UILabel的纯文本的绘制和UILabel里文本的绘制,我们先说一下关于简单的纯NSString的绘制:

3.4 异步绘制NSString

作者通过传入字符串的字体,颜色和行高,以及位置就实现了纯文本的绘制:

//绘制名字
[_data[@"name"] drawInContext:context withPosition:CGPointMake(x, y) andFont:FontWithSize(SIZE_FONT_NAME)
                 andTextColor:[UIColor colorWithRed:106/255.0 green:140/255.0 blue:181/255.0 alpha:1]
             andHeight:rect.size.height];

这个方法是作者在NSString的一个分类里自定义的,我们看一下它的实现:

- (void)drawInContext:(CGContextRef)context withPosition:(CGPoint)p andFont:(UIFont *)font andTextColor:(UIColor *)color andHeight:(float)height andWidth:(float)width{CGSize size = CGSizeMake(width, font.pointSize+10);CGContextSetTextMatrix(context,CGAffineTransformIdentity);//移动坐标系统,所有点的y增加了heightCGContextTranslateCTM(context,0,height);//缩放坐标系统,所有点的x乘以1.0,所有的点的y乘以-1.0CGContextScaleCTM(context,1.0,-1.0);//文字颜色UIColor* textColor = color;//生成CTFontCTFontRef font1 = CTFontCreateWithName((__bridge CFStringRef)font.fontName, font.pointSize,NULL);//用于创建CTParagraphStyleRef的一些基本数据CGFloat minimumLineHeight = font.pointSize,maximumLineHeight = minimumLineHeight+10, linespace = 5;CTLineBreakMode lineBreakMode = kCTLineBreakByTruncatingTail;//左对齐CTTextAlignment alignment = kCTLeftTextAlignment;//创建CTParagraphStyleRefCTParagraphStyleRef style = CTParagraphStyleCreate((CTParagraphStyleSetting[6]){{kCTParagraphStyleSpecifierAlignment, sizeof(alignment), &alignment},{kCTParagraphStyleSpecifierMinimumLineHeight,sizeof(minimumLineHeight),&minimumLineHeight},{kCTParagraphStyleSpecifierMaximumLineHeight,sizeof(maximumLineHeight),&maximumLineHeight},{kCTParagraphStyleSpecifierMaximumLineSpacing, sizeof(linespace), &linespace},{kCTParagraphStyleSpecifierMinimumLineSpacing, sizeof(linespace), &linespace},{kCTParagraphStyleSpecifierLineBreakMode,sizeof(CTLineBreakMode),&lineBreakMode}},6);//设置属性字典;对象,keyNSDictionary* attributes = [NSDictionary dictionaryWithObjectsAndKeys:(__bridge id)font1,(NSString*)kCTFontAttributeName,textColor.CGColor,kCTForegroundColorAttributeName,style,kCTParagraphStyleAttributeName,nil];//生成path,添加到cgcontex上CGMutablePathRef path = CGPathCreateMutable();CGPathAddRect(path,NULL,CGRectMake(p.x, height-p.y-size.height,(size.width),(size.height)));//生成CF属性字符串NSMutableAttributedString *attributedStr = [[NSMutableAttributedString alloc] initWithString:self attributes:attributes];CFAttributedStringRef attributedString = (__bridge CFAttributedStringRef)attributedStr;//从attributedString拿到ctframesetterCTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attributedString);//从framesetter拿到 core text 的 ctframeCTFrameRef ctframe = CTFramesetterCreateFrame(framesetter, CFRangeMake(0,CFAttributedStringGetLength(attributedString)),path,NULL);//将ctframe绘制到context里面CTFrameDraw(ctframe,context);//因为不是对象类型,需要释放CGPathRelease(path);CFRelease(font1);CFRelease(framesetter);CFRelease(ctframe);[[attributedStr mutableString] setString:@""];//恢复context坐标系统CGContextSetTextMatrix(context,CGAffineTransformIdentity);CGContextTranslateCTM(context,0, height);CGContextScaleCTM(context,1.0,-1.0);
}

在这里,作者根据文字的起点,颜色,字体大小和行高,使用Core Text,将文字绘制在了传入的context上面。

3.5 异步绘制UILabel

而对于UILabel里面的绘制,作者也采取了类似的方法:

首先看一下在cell实现文件里,关于绘制label文字方法的调用:

//将文本内容绘制到图片上,也是异步绘制
- (void)drawText{//如果发现label或detailLabel不存在,则重新add一次if (label==nil||detailLabel==nil) {[self addLabel];}//传入framelabel.frame = [_data[@"textRect"] CGRectValue];//异步绘制text[label setText:_data[@"text"]];//如果存在原帖if ([_data valueForKey:@"subData"]) {detailLabel.frame = [[_data valueForKey:@"subData"][@"textRect"] CGRectValue];//异步绘制text[detailLabel setText:[_data valueForKey:@"subData"][@"text"]];detailLabel.hidden = NO;}
}

可以看出,对于帖子而言,是否存在原贴(当前贴是否是转发贴)是不固定的,所以需要在判断之后,用hidden属性来控制相应控件的隐藏和显示,而不是用addSubView的方法。

这里的label是作者自己封装的VVeboLabel。它具有高亮显示点击,利用正则表达式区分不同类型的特殊文字(话题名,用户名,网址,emoji)的功能。

简单介绍一下这个封装好的label:

  • 继承于UIView,可以响应用户点击,在初始化之后,_textAlignment,_textColor,_font,_lienSpace属性都会被初始化。
  • 使用Core Text绘制文字。
  • 持有两种UIImageView,用来显示默认状态和高亮状态的图片(将字符串绘制成图片)。
  • 保存了四种特殊文字的颜色,用正则表达式识别以后,给其着色。

这里讲一下这个label的setText:方法:

//使用coretext将文本绘制到图片。
- (void)setText:(NSString *)text{//labelImageView 普通状态时的imageview//highlightImageView 高亮状态时的iamgeview...//绘制标记,初始化时赋一个随机值;clear之后更新一个随机值NSInteger flag = drawFlag;//是否正在高亮(在点击label的时候设置为yes,松开的时候设置为NO)BOOL isHighlight = highlighting;dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{NSString *temp = text;_text = text;CGSize size = self.frame.size;size.height += 10;UIGraphicsBeginImageContextWithOptions(size, ![self.backgroundColor isEqual:[UIColor clearColor]], 0);CGContextRef context = UIGraphicsGetCurrentContext();if (context==NULL) {return;}if (![self.backgroundColor isEqual:[UIColor clearColor]]) {[self.backgroundColor set];CGContextFillRect(context, CGRectMake(0, 0, size.width, size.height));}CGContextSetTextMatrix(context,CGAffineTransformIdentity);CGContextTranslateCTM(context,0,size.height);CGContextScaleCTM(context,1.0,-1.0);//Determine default text colorUIColor* textColor = self.textColor;//Set line height, font, color and break modeCGFloat minimumLineHeight = self.font.pointSize,maximumLineHeight = minimumLineHeight, linespace = self.lineSpace;CTFontRef font = CTFontCreateWithName((__bridge CFStringRef)self.font.fontName, self.font.pointSize,NULL);CTLineBreakMode lineBreakMode = kCTLineBreakByWordWrapping;CTTextAlignment alignment = CTTextAlignmentFromUITextAlignment(self.textAlignment);//Apply paragraph settingsCTParagraphStyleRef style = CTParagraphStyleCreate((CTParagraphStyleSetting[6]){{kCTParagraphStyleSpecifierAlignment, sizeof(alignment), &alignment},{kCTParagraphStyleSpecifierMinimumLineHeight,sizeof(minimumLineHeight),&minimumLineHeight},{kCTParagraphStyleSpecifierMaximumLineHeight,sizeof(maximumLineHeight),&maximumLineHeight},{kCTParagraphStyleSpecifierMaximumLineSpacing, sizeof(linespace), &linespace},{kCTParagraphStyleSpecifierMinimumLineSpacing, sizeof(linespace), &linespace},{kCTParagraphStyleSpecifierLineBreakMode,sizeof(CTLineBreakMode),&lineBreakMode}},6);//属性字典NSDictionary* attributes = [NSDictionary dictionaryWithObjectsAndKeys:(__bridge id)font,(NSString*)kCTFontAttributeName,textColor.CGColor,kCTForegroundColorAttributeName,style,kCTParagraphStyleAttributeName,nil];//拿到CFAttributedStringRefNSMutableAttributedString *attributedStr = [[NSMutableAttributedString alloc] initWithString:text attributes:attributes];CFAttributedStringRef attributedString = (__bridge CFAttributedStringRef)[self highlightText:attributedStr];//根据attributedStringRef 获取CTFramesetterRefCTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attributedString);CGRect rect = CGRectMake(0, 5,(size.width),(size.height-5));if ([temp isEqualToString:text]) {//根据 framesetter 和 attributedString 绘制text[self drawFramesetter:framesetter attributedString:attributedStr textRange:CFRangeMake(0, text.length) inRect:rect context:context];//恢复contextCGContextSetTextMatrix(context,CGAffineTransformIdentity);CGContextTranslateCTM(context,0,size.height);CGContextScaleCTM(context,1.0,-1.0);//截取当前图片UIImage *screenShotimage = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();dispatch_async(dispatch_get_main_queue(), ^{CFRelease(font);CFRelease(framesetter);[[attributedStr mutableString] setString:@""];if (drawFlag==flag) {if (isHighlight) {//高亮状态:把图片付给highlightImageViewif (highlighting) {highlightImageView.image = nil;if (highlightImageView.width!=screenShotimage.size.width) {highlightImageView.width = screenShotimage.size.width;}if (highlightImageView.height!=screenShotimage.size.height) {highlightImageView.height = screenShotimage.size.height;}highlightImageView.image = screenShotimage;}} else {//非高亮状态,把图片付给labelImageViewif ([temp isEqualToString:text]) {if (labelImageView.width!=screenShotimage.size.width) {labelImageView.width = screenShotimage.size.width;}if (labelImageView.height!=screenShotimage.size.height) {labelImageView.height = screenShotimage.size.height;}highlightImageView.image = nil;labelImageView.image = nil;labelImageView.image = screenShotimage;}}
//                    [self debugDraw];//绘制可触摸区域}});}});
}

这个被作者封装好的Label里面还有很多其他的方法,比如用正则表达式高亮显示特殊字符串等等。

关于tableView的优化,作者做了很多处理,使得这种显示内容比较丰富的cell在4s真机上好不卡顿,非常值得学习。

本篇文章已经同步到我个人博客:VVeboTableView源码解析

欢迎来参观 ^^

本文已在版权印备案,如需转载请访问版权印。48422928

获取授权

VVeboTableView 源码解析相关推荐

  1. 谷歌BERT预训练源码解析(二):模型构建

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_39470744/arti ...

  2. 谷歌BERT预训练源码解析(三):训练过程

    目录 前言 源码解析 主函数 自定义模型 遮蔽词预测 下一句预测 规范化数据集 前言 本部分介绍BERT训练过程,BERT模型训练过程是在自己的TPU上进行的,这部分我没做过研究所以不做深入探讨.BE ...

  3. 谷歌BERT预训练源码解析(一):训练数据生成

    目录 预训练源码结构简介 输入输出 源码解析 参数 主函数 创建训练实例 下一句预测&实例生成 随机遮蔽 输出 结果一览 预训练源码结构简介 关于BERT,简单来说,它是一个基于Transfo ...

  4. Gin源码解析和例子——中间件(middleware)

    在<Gin源码解析和例子--路由>一文中,我们已经初识中间件.本文将继续探讨这个技术.(转载请指明出于breaksoftware的csdn博客) Gin的中间件,本质是一个匿名回调函数.这 ...

  5. Colly源码解析——结合例子分析底层实现

    通过<Colly源码解析--框架>分析,我们可以知道Colly执行的主要流程.本文将结合http://go-colly.org上的例子分析一些高级设置的底层实现.(转载请指明出于break ...

  6. libev源码解析——定时器监视器和组织形式

    我们先看下定时器监视器的数据结构.(转载请指明出于breaksoftware的csdn博客) /* invoked after a specific time, repeatable (based o ...

  7. libev源码解析——定时器原理

    本文将回答<libev源码解析--I/O模型>中抛出的两个问题.(转载请指明出于breaksoftware的csdn博客) 对于问题1:为什么backend_poll函数需要指定超时?我们 ...

  8. libev源码解析——I/O模型

    在<libev源码解析--总览>一文中,我们介绍过,libev是一个基于事件的循环库.本文将介绍其和事件及循环之间的关系.(转载请指明出于breaksoftware的csdn博客) 目前i ...

  9. libev源码解析——调度策略

    在<libev源码解析--监视器(watcher)结构和组织形式>中介绍过,监视器分为[2,-2]区间5个等级的优先级.等级为2的监视器最高优,然后依次递减.不区分监视器类型和关联的文件描 ...

最新文章

  1. loganalyzer部署文档-(第一部分)
  2. 重拾IP路由选择:CCNA学习指南中的IP路由选择
  3. 文巾解题 929. 独特的电子邮件地址
  4. python 小甲鱼 好不好_[Python]小甲鱼Python视频第025课(字典:当索引不好用时)课后题及参考解答...
  5. mariadb 最新精简压缩版 win64 解压即用
  6. 计算机加入域 不能访问网络位置 解决办法
  7. 云计算学习路线图课件:云计算中的常见的云配置错误
  8. oracle新建定时任务,Oracle创建定时任务
  9. 美洽消息推送 php,ThinkPHP内核仿美洽多商户多端接入无限客服系统支持PC+WAP+公众号接入...
  10. 【基于51】红外寻迹智能小车 - 代码篇
  11. SONET/SDH帧格式
  12. idea run with coverage异常
  13. 微信公众号现金红包红包 企业付款openid 获取
  14. android4.2 拦截power键,Android 屏蔽Power键 Home键
  15. 模糊查询银行卡号mysql_mysql like查询字符串示例语句
  16. 老旧笔记本安装openwrt实践:
  17. CSS的小特效之:融合效果
  18. 【Roofline 推理速度】影响深度学习模型推理速度的因素及相关基础知识
  19. matlab提取车牌字符程序,matlab - 如何使用Matlab提取和识别车牌号?
  20. 大教堂与集市读书笔记

热门文章

  1. python读取文件
  2. python 之路,Day11 (下)- sqlalchemy ORM
  3. 静态链表实现(A-B)+(B-A)【代码】
  4. git获取指定release版本代码
  5. IL,Emit之OpCodes说明(备查)
  6. OpenCV 【十五】绘直线/椭圆/矩形/圆及其填充
  7. F5与NetScaler比较
  8. 基于第四层交换技术的负载均衡
  9. ASP.NET中的页面指示标识
  10. 在jsp调试后端绑定对象