VVeboTableView 源码解析

2018-08-302018-08-30 15:32:43阅读 2910

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

我们知道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];

    //覆盖在头像上面的图片，制造圆角效果：frame
    cornerImage = [[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 ： 停止后的contentOffset
    NSIndexPath *ip = [self indexPathForRowAtPoint:CGPointMake(0, targetContentOffset->y)];

    //当前可见第一行row的index
    NSIndexPath *cip = [[self indexPathsForVisibleRows] firstObject];

    //设置最小跨度，当滑动的速度很快，超过这个跨度时候执行按需加载
    NSInteger skipCount = 8;

    //快速滑动(跨度超过了8个cell)
    if (labs(cip.row-ip.row)>skipCount) {

        //某个区域里的单元格的indexPath
        NSArray *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;
    }

    //触摸的时候刷新可见cell
    if (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上面需要异步显示的内容分为四种：

UIImageView：本地图片（comments, more,reposts）。
UIView：背景，分割线(topLine)。
NSString：name，from字符串。
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];

            //绘制名字下面的info
            y += 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:context
                     withPosition: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转化为图片，赋给背景imageview
        UIImage *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增加了height
    CGContextTranslateCTM(context,0,height);

    //缩放坐标系统，所有点的x乘以1.0，所有的点的y乘以-1.0
    CGContextScaleCTM(context,1.0,-1.0);


    //文字颜色
    UIColor* textColor = color;

    //生成CTFont
    CTFontRef 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;

    //创建CTParagraphStyleRef
    CTParagraphStyleRef 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);

    //设置属性字典；对象，key
    NSDictionary* 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拿到ctframesetter
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attributedString);

    //从framesetter拿到 core text 的 ctframe
    CTFrameRef 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];
    }

    //传入frame
    label.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，用来显示默认状态和高亮状态的图片（将字符串绘制成图片）。
保存了四种特殊文字的颜色，用正则表达式识别以后，给其着色。

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

本文分享自微信公众号 - 程序员维他命（J_Knight_），作者：维他命君

原文出处及转载信息见文内详细说明，如有侵权，请联系 yunjia_community@tencent.com 删除。

原始发表时间：2018-08-06

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

展开阅读全文

我来说两句

0 条评论

登录后参与评论

2017年5月iOS招人心得（附面试题）
在2017年5月中旬，技术老大让我招两个1-2年的iOS开发，把简历的筛选和第一轮技术面试的任务交给了我。于是便自己准备了这套面试题。
用户2932962
客户端基本不用的算法系列：快速幂
幂运算是我们平时写代码的时候最常用的运算之一。根据幂运算的定义我们可以知道，如果我们要求 x 的 N 次幂，那么想当然的就会写出一个 N 次的循环，然后累乘得到...
用户2932962
应对苹果审核的非技术因素
最近一年来，App Store 的审核越来越严，机器审核的算法频繁变动，导致越来越多的开发者被误伤，当然搞灰产的职业选手受影响就更大。
用户2932962
Django 后台带有字典的列表数据与页面js交互实例
1、这里只是简单介绍一下Django的view如何跟js进行交互，首先，进入用户明细的时候会进入一个页面，叫用户信息表，里面包含了用户学习的课程和所得到的分数，...
砸漏
我们是如何将App的大小从31M减少到2.6M的？
然后呢？首先，将我们的任务简化为三个点。 “近期动态” “视频动态” “音频动态” 最开始我们都很兴奋，只用了2到3天就完成了“近期动态”这一功能。毕竟对于我...
用户1263954
Python 设计模式：观察者模式
但是这样会有一个问题：这种针对实现的编程会导致我们在增加或者删除需要格式化方式时必须修改代码。比如我们现在不再需要十六进制数字格式的显示，就需要把hex_for...
goodspeed
Docker最全教程之使用Tencent Hub来完成CI（十）
在本系列教程中，笔者希望将必要的知识点围绕理论、流程（工作流程）、方法、实践来进行讲解，而不是单纯的为讲解知识点而进行讲解。也就是说，笔者希望能够让大家将理论、...
心莱科技雪雁
「互联网笔试题」No.3答案与解析
1.小易经常沉迷于网络游戏.有一次,他在玩一个打怪升级的游戏,他的角色的初始能力值为 a.在接下来的一段时间内,他将会依次遇见n个怪物,每个怪物的防御力为b1...
KEN DO EVERTHING
深度学习|泰坦尼克号生还数据处理
之前我们用过传统的机器学习算法预测过泰坦尼克号数据的生还情况，这次我们使用神经网络算法来进行建模。
罗罗攀
爬取娱乐圈排行榜数据
想关注你的爱豆最近在娱乐圈发展的怎么样吗？本文和你一起爬取娱乐圈的排行榜数据，来看看你的爱豆现在排名变化情况，有几次登顶，几次进了前十名呀。
阿黎逸阳

作者介绍

用户2932962

专栏

精选专题

云计算新趋势
Serverless浪潮已来，如何稳坐潮头领先业界？

活动推荐

运营活动

广告关闭

腾讯云·社区

用户2932962