专栏首页iOS122-移动混合开发研究院有了Auto Layout,为什么你还是害怕写UITabelView的自适应布局?

有了Auto Layout,为什么你还是害怕写UITabelView的自适应布局?

Apple 算是最重视应用开发体验的公司了.从Xib到StoryBoard,从Auto Layout到Size Class,每一次的更新,都会给iOS应用的开发带来不小的便利.但是,对于绝对多数iOS攻城狮来说,我们依然还是很害怕写UITabelVIew的自适应布局.当然,害怕不是因为我们不会写,或者本身有什么特殊的技术点,而是因为太麻烦.当然,文章的后半部分,会给出相应的解决方案,毕竟本文不是为了吐槽而吐槽.

UITabelView的自适应布局有多麻烦?

数据类型的不确定性:种类越多,页面越复杂.

以网易新闻的客户端为例,可能的数据包括文字新闻,图片新闻,图集,推广,视频等.每一种数据,又根据来源或点击量等细分出许多不同的状态.基本上每种数据类型,都至少需要一种单独的Cell去呈现,每一个Cell的布局,都要单独去写.所以说,数据的类型将直接决定页面本身的复杂度.

数据长度的不确定性: 不确定字段越多,迭代成本越高.

上图取自新浪微博.稍微有点经验的iOS攻城狮,都猜到我要吐槽什么了吧!没错,就是同种数据类型,但是内部字段的长度可能不同,而且还要都要给他们显示出来!其实我也很希望自家的应用都像网易那样,固定长度显示新闻,显示不完,就直接截断--可惜那样的应用都是别人公司的应用.可能你会说: 顶部给个非微博正文区域给个固定高度;文字区域动态计算出高度;图片部分,图片高度固定,根据数量动态计算高度;转发部分同理;然后根据数据在tabelView的代理方法 tableView:heightForRowAtIndexPath: 中动态返回高度即可.是的,思路就是这么个思路,但是你确定产品经理一直不会改需求?你确定不需要适配 6plus时,字号要大点?你确定自己的应用不希望大屏上一样能显示更多的图片?你确定老板不是盘算着 iPad版也交给你维护?所以说,对于这种数据长度不确定,但是又要求完全显示的设计,最复杂的不在于实现,而在于后期的迭代.可变字段越多,迭代越复杂.如果连显示方式都改了,那就基本等于重做了几遍.

cell高度计算有坑: 难以理解的诡异问题

tableView:heightForRowAtIndexPath: 中计算高度时,是有坑的,对于刚接触iOS的攻城狮来说,几乎是难以理解的诡异问题.这里简单说两个,其他的大家可跟帖补充:

1.文字高度计算时 0.1 高度误差问题.

cell中经常需要使用 textRectForBounds: limitedToNumberOfLines: 来计算某一个文字的显示高度.这里,其实有一个很大的坑的,如果你没遇到只能说明你很幸运.由于浮点数四舍五入机制的存在,所以偶现UILabel最后一行无法显示的情况.原因也很诡异: 在你计算时,部分值会存在稍许的不超过0.01的误差,大多数情况下,这个误差值,可以安全忽略,但是确实存在那0.01误差刚好是绝对换行与不换行的分界值,因为0.01的误差,可能计算出来的高度就不足以显示最后几个文字.为了安全起见,如果需要计算文本高度,我都是加上一个额外的0.1来保证最后一行肯定可以显示.

2.手动调用 tableView:cellForRowAtIndexPath: 获取cell,引起的卡顿问题.

这个可能也是一些有经验的开发者也会混淆的问题: 不要在自己的代码中调用 tableView:cellForRowAtIndexPath: 方法来获取某一个位置的 cell,来进行关于这个cell的某些计算,因为你手动调用这个方法产生的cell不会参与cell的复用! 各种缘由,不过多解释,总之结论就是,只要系统自己调用 tableView:cellForRowAtIndexPath: 方法产生的 cell才会参与cell的复用. 关于这个话题,比较易犯的错误是,竟然有开发者在

tableView:heightForRowAtIndexPath: 中调用 tableView:cellForRowAtIndexPath: 来获取cell,然后计算cell高度.然后你会发现,凡是稍微涉及到图片显示的界面,你的显示是对的,但是滚动非常卡顿,因为你在自己浑然不觉的情况下创建了N个Cell,而且这些Cell绝对不会参与复用.

为什么我现在不再害怕写UITabelView的自适应布局?

是的,我现在一点也不担心去处理各种UITabelView布局.不是因为我有一股所谓的不畏艰难的伟大工作精神,而是因为我切实找到了解决办法.具体该怎么做呢?

1.使用AutoLayout 布局你的cell

坦白说,咱都是刚入行的人,使用AutoLayout布局,写一个自适应的Cell,大家估计也都会.可以用xib,也可以用纯代码写.如果准备用纯代码写,建议你先好好研究下 Masonry — 使用纯代码进行iOS应用的autolayout自适应布局

2.使用 UITableView-FDTemplateLayoutCell 根据单元格内容的约束自适应单元格高度

坦白说,我原来也是: 虽然cell用着AutoLayout,但是计算cell高度时,也是看着设计图返回一个适合的值--想想都虐心.前天,一个热心的开发者在我博客留言说: 他用 Masonry 进行Cell的高度自适应时遇到了问题.我第一反应是: Masonry 能用来计算cell高度?! 然后,他提到了一个第三方UITableView-FDTemplateLayoutCell,好像是国内的大神写的,具体介绍可以看这里: 优化UITableViewCell高度计算的那些事.这篇文章的博主关于 UITableView-FDTemplateLayoutCell 分析很详尽,用一句总结就是: 一行代码解决cell高度动态计算问题.

3.一个关于Masonry 和 UITableView-FDTemplateLayoutCell结合使用的小例子

示例下载地址: 点击下载

非常感谢 @未来帅哥 的讨论,给了我很大启发和帮助,我也如约做了一个关于Masonry 和 UITableView-FDTemplateLayoutCell结合使用的小例子,以解决他的问题:关于如何让左侧图片底部总是不被遮盖.

核心代码片段:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    CGFloat height = [tableView fd_heightForCellWithIdentifier: NSStringFromClass([YFAutoLayoutCell class]) cacheByIndexPath:indexPath configuration:^(YFAutoLayoutCell * cell) {
        YFAutoLayoutCellModel * model = [self.data objectAtIndex: indexPath.row];
        
        cell.model = model;
    }];
    
    return height;
}
/**
 *  初始化视图.
 */
- (void) setupView
{
    self.imgView = [[UIImageView alloc] init];
    self.introLabel = [[UILabel alloc] init];
    
    [self.contentView addSubview: self.imgView];
    [self.contentView addSubview: self.introLabel];
    
    self.introLabel.numberOfLines = 0;
    
    [self.imgView makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.equalTo(8);
        make.size.equalTo(CGSizeMake(60, 60));
        make.bottom.lessThanOrEqualTo(-8); // 这里是关键
    }];
    
    [self.introLabel makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.imgView.right).offset(8);
        make.top.equalTo(self.imgView);
        make.right.equalTo(-8);
        make.bottom.equalTo(-8);
    }];
}

小结

有了Auto Layout,为什么你还是害怕写UITabelView的自适应布局?因为你还在用传统的方式去计算cell的高度! Auto Layout + UITableView-FDTemplateLayoutCell + Masonry,耐心研究几个小时,绝对让你受益匪浅!

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iPhone X 适配手Q H5 页面通用解决方案

    对于手Q 中的各业务来说,受 Phone X 影响的 H5 页面挺多,应该采取什么快速有效的办法来应对呢?

    林焕彬
  • 让 iPhone “崩溃” 又有了新方法:只需要一个视频

    玄武实验室在 10 月 15 日就发现了视频样本,在深入分析后,我们在微信后台对能够触发这种漏洞的恶意视频进行检测和拦截,保护了大量用户免遭攻击。

    腾讯玄武实验室
  • 打造黑苹果(四)安装MACOS系统

    打造黑苹果(四)安装MACOS系统前情回顾打造黑苹果(一)组装硬件的选择与组装打造黑苹果(二)制作黑mac系统安装U盘打造黑苹果(三)COMS(BIOS)设置前...

    FungLeo
  • 微信小程序的编程模式

    在进行「轻芒小程序+」和其他小程序应用开发的过程中,本文作者与其团队对当前正火热的小程序开发有了更为深度的理解与认识,进而有了本文。文章从从编程模式入手,看在小...

    云加社区专栏
  • 打造黑苹果(五)设置 MACOS 系统盘引导,以及安装驱动

    经过前面的一系列工作,我们已经把系统安装在我们的硬盘上了,但是我们启动的时候还必须通过U盘启动,那是因为我们还没有给我们的系统设置引导,另外看上去貌似不正常,甚...

    FungLeo
  • 腾讯 TMQ 团队10 年巨献: iOS 测试实践

    开始敲这篇“软”文,我觉得颈肩都好硬,转转头抖抖肩,许多事情如开闸水般涌入脑海,整个人顿时放松了下来。也烦请读者朋友耐心读下来,看一看这千千万万测试人的一些共鸣...

    腾讯移动品质中心TMQ
  • 关于 iOS 证书,你必须了解的知识

    从事iOS开发几年,越来越发现,对iOS应用开发到发布过程中必不可少的一环,证书签名相关部分,却只是一知半解。本文从iOS证书体系的基本构成模块 入手,一步步解...

    陈泽滨
  • iOS 中的 Promise 设计模式

    无论是代理模式,还是闭包,在处理单一任务的时候,都出色的完成了任务。可是当两种模式要相互配合,一起完成一系列任务,并且每个任务之间还要共享信息,相互衔接,雇主就...

    serena
  • 到底有多强?苹果的增强现实框架:ARKit

    本篇文章重在 workShop 上苹果工程师的解惑和我对 ARKit 的理解, 最后会简单介绍一下相关技术。

    郭艺帆
  • iPhone 摄影中的深度捕捉 ( WWDC2017-Session 507 ) 下篇

    在 iOS 11中, 了解如何利用深度信息为创意成像开辟新的可能性。 获得对高层次深度概念的更广泛的了解,并学习如何从相机中捕获流式传输和静态图像深度数据。

    张耀琦

扫码关注云+社区

领取腾讯云代金券