iOS-使用Masnory实现UITableViewCell自适应高度

2023-10-14 14:50

本文主要是介绍iOS-使用Masnory实现UITableViewCell自适应高度,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在iOS开发当中,如果涉及到UITableViewCell的一些复杂UI的绘制时难免会碰到这么一个难题:UITableViewCell的高度如何设置!

的确,我们就拿一个简单的例子来说:一个Cell上,有头像,有昵称,有评论内容,还有图片等控件,其中评论内容的字数并不能确定,那就决定了其每一个Cell的高度不定。比如下面我所做的一个项目中的评论:

 

图1:简单的评论

从图1中可以看到,Cell的头像,昵称,发表日期的frame是固定的,但是评论的内容是有多有少的,因此frame并不确定,为此Cell的高度也不确定。

在最开始开发的时候,大家都知道UITableView有一个获取cell高度的代理方法,可以从这个方法当中设置Cell的高度,即:

 图2:获取高度方法

那么自然而然的就可以想到这种办法来设置高度:定义一个全局的Cell,在图2的方法上给cell赋值,让评论的Label执行sizeToFit,重新计算Cell的高度,然后返回Cell的高度。

说实话,这种思路能实现效果,但是说实话:太Low了,代码太脏了。我能想到的就有下面几个缺点:

1.给Cell赋了两次值,效率不高

2.如果Cell的布局更改,那么要改的地方可就多了

3.逻辑有点反反复复

当然,别人还写过别的Cell高度计算方法,但是异曲同工,都十分的Low,不优雅。代码我就不po出来了,太脏,懒得po出来。

那么有没有一种简单有效并且十分优雅的方式来实现Cell的自适应高度呢?当然有。我上篇文章过:苹果推荐的方案就是最优雅的

下面小编我就说说苹果推荐的方案:

步骤1:设置tableView.rowHeight = UITableViewAutomaticDimension。

解释:如此设置之后,就不必要写图2的获取高度方法了。(注:默认值就是UITableViewAutomaticDimension,但是为了整个流程还是写出来了,)。

步骤2:设置tableView.estimatedRowHeight = 100。

解释:设置一个预估的行高,为了代码的易读性,还是尽量要设置一个跟cell的高差不多的值。

做了上面的步骤之后,剩下的就是绘制Cell了,这里就涉及到一个思想:根据内容自动撑开。这个解释起来就有点麻烦,先看代码(控件的创建就不po出来了,谁都会)。

步骤3:

图3:设置头像的约束

步骤4与步骤5:

图4:设置评论的约束

根据图3与图4的代码,作如下解释:UITableViewCell上有一个contentView,contentView上面放置了所有的控件。而这里的最顶部的控件avatarButton(头像按钮)头部顶着contentView的头部,contentLabel(评论label)头部顶着avatarButton(头像按钮)的底部,同时contentLabel(评论label)底部有顶着contentView的底部,为此就实现了avatarButton与contentLabel共同将contentView给撑开了,也就把cell给撑开了。

那么会有人问:那contentLabel的高度怎么出来?其实从图4可以看到我根本是没有设置contentLabel的height,原因就是contentLabel的text就决定了contentLabel的高度,内容的多少会自动将contentLabel的高度撑开。

这就是我上面说到的根据内容自动撑开的思想。

以下就是一个简单的demo:Github。

 

这篇关于iOS-使用Masnory实现UITableViewCell自适应高度的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/211237

相关文章

Java中的Cursor使用详解

《Java中的Cursor使用详解》本文介绍了Java中的Cursor接口及其在大数据集处理中的优势,包括逐行读取、分页处理、流控制、动态改变查询、并发控制和减少网络流量等,感兴趣的朋友一起看看吧... 最近看代码,有一段代码涉及到Cursor,感觉写法挺有意思的。注意是Cursor,而不是Consumer

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

Docker部署Jenkins持续集成(CI)工具的实现

《Docker部署Jenkins持续集成(CI)工具的实现》Jenkins是一个流行的开源自动化工具,广泛应用于持续集成(CI)和持续交付(CD)的环境中,本文介绍了使用Docker部署Jenkins... 目录前言一、准备工作二、设置变量和目录结构三、配置 docker 权限和网络四、启动 Jenkins

Python3脚本实现Excel与TXT的智能转换

《Python3脚本实现Excel与TXT的智能转换》在数据处理的日常工作中,我们经常需要将Excel中的结构化数据转换为其他格式,本文将使用Python3实现Excel与TXT的智能转换,需要的可以... 目录场景应用:为什么需要这种转换技术解析:代码实现详解核心代码展示改进点说明实战演练:从Excel到

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

Rust中的注释使用解读

《Rust中的注释使用解读》本文介绍了Rust中的行注释、块注释和文档注释的使用方法,通过示例展示了如何在实际代码中应用这些注释,以提高代码的可读性和可维护性... 目录Rust 中的注释使用指南1. 行注释示例:行注释2. 块注释示例:块注释3. 文档注释示例:文档注释4. 综合示例总结Rust 中的注释

C# string转unicode字符的实现

《C#string转unicode字符的实现》本文主要介绍了C#string转unicode字符的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随... 目录1. 获取字符串中每个字符的 Unicode 值示例代码:输出:2. 将 Unicode 值格式化

python安装whl包并解决依赖关系的实现

《python安装whl包并解决依赖关系的实现》本文主要介绍了python安装whl包并解决依赖关系的实现,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录一、什么是whl文件?二、我们为什么需要使用whl文件来安装python库?三、我们应该去哪儿下

Python脚本实现图片文件批量命名

《Python脚本实现图片文件批量命名》这篇文章主要为大家详细介绍了一个用python第三方库pillow写的批量处理图片命名的脚本,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言源码批量处理图片尺寸脚本源码GUI界面源码打包成.exe可执行文件前言本文介绍一个用python第三方库pi