UITableView中Label能展开、收起 cell自适应行高、手动计算行高

上图直接给大家看看我们公司业务需求吧 以及做出来的效果图。


gif5新文件-1.gif

需求就是这样 自动去适应tableview的cell高度 并实时计算高度。

这里我给大家推荐两种方法去做自适应

A: 使用第三方 FDTemplateLayoutCell + Masonry

框架地址:FDTemplateLayoutCell

UITableView+FDTemplateLayoutCell 是一个由国人团队开发的优化计算 UITableViewCell 高度的轻量级框架,由于实现逻辑简明清晰,代码也不复杂,非常适合作为新手学习。
总结一下:
1、iOS8 之前虽然采用 autoLayout 相比 frame layout 得手动计算已经简化了不少(设置 estimatedRowHeight 属性并对约束设置正确的 cell 的 contentView 执行 systemLayoutSizeFittingSize: 方法),但还是需要一些模式化步骤,同时还可能遇到一些蛋疼的问题比如 UILabel 折行时的高度计算;
2、iOS8 推出 self-sizing cell 后,一切都变得轻松无比——做好约束后,直接设置 estimatedRowHeight 就好了。然而事情并不简单,一来我们依然需要做 iOS7 的适配,二来 self-sizing 并不存在缓存机制,不论何时都会重新计算 cell 高度,导致 iOS8 下页面滑动时会有明显的卡顿。
因此,这个框架的目的,引用阳神的原话,就是“既有 iOS8 self-sizing 功能简单的 API,又可以达到 iOS7 流畅的滑动效果,还保持了最低支持 iOS6”。

好话不多说 开始吧~~~~~

1.引用 UITableView+FDTemplateLayoutCell.h 类;

2.注册cell

- (void)registerNib:(nullable UINib *)nib forCellReuseIdentifier:(NSString *)identifier NS_AVAILABLE_IOS(5_0);
- (void)registerClass:(nullable Class)cellClass forCellReuseIdentifier:(NSString *)identifier NS_AVAILABLE_IOS(6_0);
注意 :此处不管你是用代码还是 XIB 创建的 cell,必须先进行注册(类似 UICollectionView):(不然 哈哈 你会懵逼的)

a. 运行崩溃报错 NSAssert(templateCell != nil, @"Cell must be registered to table view for identifier - %@", identifier);

原因:官方是这么说明的:
和每个 UITableViewCell ReuseID 一一对应的 template layout cell这个 cell 只为了参加高度计算,不会真的显示到屏幕上;它通过 UITableView 的 -dequeueCellForReuseIdentifier: 方法 lazy 创建并保存,所以要求这个 ReuseID 必须已经被注册到了 UITableView 中,也就是说,要么是 Storyboard 中的原型 cell,要么就是使用了 UITableView 的 -registerClass:forCellReuseIdentifier: 或 -registerNib:forCellReuseIdentifier:其中之一的注册方法。
解决:意思就是说你需要注册cell对应的identifier。

所以说呢注册是很有必要的一步!!!

3.在 tableView: heightForRowAtIndexPath: 代理方法中调用以下三个方法之一完成高度获取:

/identifier 即 cell 的 identifier;configuration block 中的代码应与数据源方法 tableView: cellForRowAtIndexPath: 中对 cell 的设置代码相同方法内部将根据以上两个参数创建与 cell 对应的 template layout cell,这个 cell 只进行高度计算,不会显示到屏幕上/

 - (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifierconfiguration:(void (^)(idcell))configuration;// 返回计算好的高度(无缓存)
 - (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifiercacheByIndexPath:(NSIndexPath *)indexPathconfiguration:(void (^)(idcell))configuration;// 返回计算好的高度,并根据 indexPath 内部创建与之相应的二维数组缓存高度
 - (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifiercacheByKey:(id<NSCopying>)keyconfiguration:(void (^)(idcell))configuration;// 返回计算好的高度,内部创建一个字典缓存高度并由使用者指定 key

像酱紫写😂


ppp.png

一般来说 cacheByIndexPath: 方法最为“傻瓜”,可以直接搞定所用问题。cacheByKey: 方法稍显复杂(需要关注数据刷新),但在缓存机制上相比 cacheByIndexPath: 方法更为高效。因此,像类似微博、新闻这种会拥有唯一标识的 cell 数据模型,更建议使用cacheByKey: 方法。

4.数据源变动时的缓存处理是个值得关注的问题。

对于 cacheByIndexPath: 方法,框架内对 9 个触发 UITableView 刷新机制的公有方法分别进行了处理,保证缓存数组的正确;同时,还提供了一个 UITableView 分类方法:

- (void)fd_reloadDataWithoutInvalidateIndexPathHeightCache; 

用于需要刷新数据但不想移除原有缓存数据(框架内对 reloadData 方法的处理是清空缓存)时调用,比如常见的“下拉加载更多数据”操作。
对于 cacheByKey: 方法,当 cell 高度发生改变时,必须手动处理:

[tableView.fd_keyedHeightCacheinvalidateHeightForKey:key];  // 移除 key 对应的高度缓存  



[tableView.fd_keyedHeightCacheinvalidateAllHeightCache];  // 移除所有高度缓存  

如果需要查看 debug 打印信息,设置 fd_debugLogEnabled 属性:

tableView.fd_debugLogEnabled = YES;  

高度获取

流程

我们直接以 cacheByIndexPath: 方法源码为例进行了解(cacheByKey: 方法的实现大同小异)

- (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifiercacheByIndexPath:(NSIndexPath *)indexPathconfiguration:(void (^)(idcell))configuration {  

// 1. 如果 identifier 和 indexPath 为空,返回高度为 0  
if (!identifier || !indexPath) {  
    return 0;  
}  

// 2. 通过 FDIndexPathHeightCache 类声明的方法检查是否存在相应缓存  
if ([self.fd_indexPathHeightCacheexistsHeightAtIndexPath:indexPath]) {  
    // 打印 debug 信息  
    [self fd_debugLog:[NSStringstringWithFormat:@"hit cache by index path[%@:%@] - %@", @(indexPath.section), @(indexPath.row), @([self.fd_indexPathHeightCacheheightForIndexPath:indexPath])]];  
    // 提取并返回对应缓存中的额高度  
    return [self.fd_indexPathHeightCacheheightForIndexPath:indexPath];  
}  

// 3. 如果没有缓存,通过 fd_heightForCellWithIdentifier: configuration: 方法计算获得 cell 高度  
CGFloatheight = [self fd_heightForCellWithIdentifier:identifierconfiguration:configuration];  

// 4. 通过 FDIndexPathHeightCache 类声明的方法将高度存入缓存  
[self.fd_indexPathHeightCachecacheHeight:heightbyIndexPath:indexPath];  
// 打印 debug 信息  
[self fd_debugLog:[NSStringstringWithFormat: @"cached by index path[%@:%@] - %@", @(indexPath.section), @(indexPath.row), @(height)]];  

return height;  

}

fd_heightForCellWithIdentifier: configuration: 方法会根据 identifier 以及 configuration block 提供一个和 cell 布局相同的 template layout cell,并将其传入 fd_systemFittingHeightForConfiguratedCell: 这个私有方法返回计算出的高度。

结合masonry 搭建页面时, 设为固定高度是没有问题的,但是使用框架缓存cell高度时,cell重叠所有cell高度都为0。 知道为什么吗?😎

原因:计算cell高度时,因Y方向上约束不完善,无法确定cell的高度。


3563A1D5-3ACA-45D5-A632-1C5BE605E821.png

解决:设置约束时,由上到下设置,最后一个需要设置距底部边距。一定能让系统确定这个cell的高度

===============这样的话就没有问题啦================

B: Masonry + 手动计算行高

关于手动计算高度 ,怎么去做呢。可以这样给大家说 RowHeight = 固定高度 + 非固定高度;


0E215188-916B-4ADF-9458-3CEB57A4B0E4.png

固定:每一个控件之间的间隙 这个是固定的 如上图:用户名、收回按钮同样也是固定高度。
非固:如上图中的message信息 (UIlabel)、和下面的banner 为不固定

1.在tableviewCell里面约束好相关控件 怎么约束去看看 https://blog.csdn.net/dragongd/article/details/61432393

在使用Masonry约束好相关控件之后。我们就该去手动计算我们的行高了。

2.自定义一个Model

.h
#import "BaseModel.h"

@interface GrassdetailModelTwo : BaseModel

@property(nonatomic,assign)CGFloat rowHeight;//行高

 -(void)updataModel;

@end

.m

#import "GrassdetailModelTwo.h"
#import "BrandView.h"
@implementation GrassdetailModelTwo
 -(void)updataModel{
UILabel * testLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, WIDTH-FitWidth(60), 0)];
testLabel.text = self.describe;
testLabel.font = [UIFont fontWithName:@"PingFangSC-Regular" size:FitValue(14)];
testLabel.numberOfLines = 0;
[testLabel sizeToFit];
CGFloat labelHeight  = testLabel.frame.size.height +1;

testLabel = nil;
}

label计算高度:

(1).boundingRectWithSize:
(2).sizeThatFits
(3).sizeToFit
(4).sizeWithAttributes

计算行高 这个其实有很多种,个人推荐用这种 [testLabel sizeToFit]; 😅 其余几种方法对于全中文的文本还行,但是对于英文特别多的时候,计算高度可能就会不准了。(自己的见解,勿喷🤡)

3.在TableView 代理返回高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    NSArray * arr = _dataArr[indexPath.section];
    GrassdetailModelTwo * model = arr[0];
    return model.rowHeight;

}

注:此处为本人项目开发总结出来的经验 有什么不对的地方请及时告知 快来骚扰我吧😍

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容