iOS之动态计算UITableViewCell高度技巧(一)

最新推荐文章于 2022-11-27 19:52:06 发布
最新推荐文章于 2022-11-27 19:52:06 发布
阅读量1.6k 收藏
点赞数
分类专栏： iOS-OC 文章标签： ios uitableviewcell

动态计算的UITableViewCell高度详解

说明:转载自Havens’blog http://www.ifun.cc/blog/2014/02/21/dong-tai-ji-suan-uitableviewcellgao-du-xiang-jie/

不知道大家有没有发现，在iOS APP开发过程中，UITableView是我们显示内容常见的控件，本人觉得它是UIKit中最复杂的一个控件。今天要向大家介绍的就是如何动态计算UITableViewCell高度的一经验与技巧，在此做一些总结方便朋友们查阅。

。为了不让讲解空洞抽象，我还是用代码实例的方式进行讲解，更这样容易接收与学习
。本文将介绍四种情况下的UITableViewCell的计算方式，分别是：

  1. 在UITableViewCell中使用UILabel进行自动布局
  2. 在UITableViewCell中使用UITextView进行自动布局
  3. 在UITableViewCell中使用UILabel进行手动布局
  4. 在UITableViewCell中使用UITextView进行手动布局
  5. 随的UITextView高度动态改变细胞高度

由于只是一个演示，所以命名这些都是随意从简。

首先创建一个单页的工程，我命名为CellHeightDemo

在UITableViewCell中使用UILabel自动布局

创建一个空的xib，命名为C1.xib，然后拖入一个UITableViewCell控件。接着创建一个UITableViewCell的子类，命名为C1类。然后在C1.xib中，将与C1类进行关联。别给我说你不会关联，如果不会那看下图你就明白了。V ^

只需要在班那里写入关联的名字C1即可。

还有由于的UITableViewCell需要重用功能，所以还我们需要设置一个重用标识

在标识符那里写入重用标识C1，当然你也可以用任意字符。不过后面代码里需要这个字符。

接到我们来布局。用到了汽车布局，在此我不想介绍汽车布局，以后有时间再专门介绍，下图就是我布局

这儿有两点需要说明：1。的UILabel的属性线这儿设为了0表示显示多行0.2。自动布局一定要建立完整。

接着我们在UITableView中来使用我们自定义的UITableViewCell C1。
首先我们创建一个UITableViewController的子类T1ViewController，接着在Main.storyboard中拖入一个UITableViewController，并关联T1ViewController。


一切都准备好了，那我们现在来写点代码，给UITableView的加点料。
我们想要我们的UITableView的使用C1.xib中自定义的细胞，那么我们需要向的UITableView进行注册。

1 
2

UINib *cellNib = [UINib nibWithNibName:@"C1" bundle:nil];
[self.tableView registerNib:cellNib forCellReuseIdentifier:@"C1"];

这样就进行注册了，接着我们还需要每行显示的数据，为了简单一点，我就声明了一个NSArray的变量来存放数据。

1

self.tableData = @[@"1\n2\n3\n4\n5\n6", @"123456789012345678901234567890", @"1\n2", @"1\n2\n3", @"1"];

现在实现UITableViewDataSource的协议：

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return self.tableData.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    C1 *cell = [self.tableView dequeueReusableCellWithIdentifier:@"C1"];
    cell.t.text = [self.tableData objectAtIndex:indexPath.row];
    return cell;
}

从self.tableData中的数据我们可以看到，每一个单元格显示的数据高度是不一样的，那么我们需要动态计算单元格的高度。由于是自动布局，所以我们需要用到一个新的API systemLayoutSizeFittingSize：来计算UITableViewCell所占空间高度.Cell的高度在于 - （CGFloat）tableView：（UITableView ）tableView heightForRowAtIndexPath：（NSIndexPath）indexPath这个UITableViewDelegate的方法里面传给UITableView的。

这个有一个需要特别注意的问题，也就是效率问题.UITableView是一次性计算完所有Cell的高度，如果有1W个单元格，那么 - （CGFloat）tableView：（UITableView ）tableView heightForRowAtIndexPath :( NSIndexPath）indexPath就会触发1W次，然后才显示内容。不过在iOS7以后，提供了一个新方法可以避免这1W次调用，它就是 - （CGFloat）tableView：（UITableView ）tableView estimatedHeightForRowAtIndexPath :( NSIndexPath）indexPath要求返回一个Cell的估计值，实现了这个方法，那只有显示的细胞才会触发计算高度的协议。由于systemLayoutSizeFittingSize需要细胞的一个实例才能计算，所以这儿用一个成员变量存一个细胞的实列，这样就不需要每次计算细胞高度的时候去动态生成一个细胞实例，这样即方便也高效也少用内存，可谓一举三得。

我们声明一个存计算细胞高度的实例变量：

1

@property (nonatomic, strong) UITableViewCell *prototypeCell;

然后初始化它：

1

self.prototypeCell  = [self.tableView dequeueReusableCellWithIdentifier:@"C1"];

下面是计算细胞高度的实现：

1 
2 
3 
4 
5 
6 
7

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    C1 *cell = (C1 *)self.prototypeCell;
    cell.t.text = [self.tableData objectAtIndex:indexPath.row];
    CGSize size = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
    NSLog(@"h=%f", size.height + 1);
    return 1  + size.height;
}

看到代码，可能你有点疑问，为何这儿要加1呢？笔者告诉你，如果不加1，结果就是错误的，Cell中UILabel将显示不正确。原因就是因为这行代码CGSize size = [cell。 contentView systemLayoutSizeFittingSize：UILayoutFittingCompressedSize];由于是在cell.contentView上调用这个方法，那么返回的值将是contentView的高度，UITableViewCell的高度要比它的contentView要高1，也就是它的分隔线的高度。如果你不相信，那请看C1.xib的属性，比较下面两张图。
发现没有Cell的高度是127，面contentView的高度是126，这下明白了吧。

为了让读读者看清楚，我将Cell中UILabel的背景色充充为浅灰色下面是运行效果：

在UITableViewCell中使用UITextView自动布局

本小段教程将介绍UITextView在单元格中计算高度需要注意的地方。同样参考上面我们创建一个C2.xib，UITableViewCell的子类C2，并关联C2.xib与C2类。并在C2.xib中对其布局，同样使用了自动布局。布局如下图：

创始的UITableViewController的了类T2ViewController，在Main.storyboard中拖入的UITableViewController，并关联他们。接着代码中注册C2.xib到的UITableView。

下面计是计算高度的代码：

1 
2 
3 
4 
5 
6 
7 
8 
9 
10

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    C2 *cell = (C2 *)self.prototypeCell;
    cell.t.text = [self.tableData objectAtIndex:indexPath.row];
    CGSize size = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
    CGSize textViewSize = [cell.t sizeThatFits:CGSizeMake(cell.t.frame.size.width, FLT_MAX)];
    CGFloat h = size.height + textViewSize.height;
    h = h > 89 ? h : 89;  //89是图片显示的最低高度， 见xib
    NSLog(@"h=%f", h);
    return 1 + h;
}

在这儿我们是通过sizeThatFits：计算的UITextView的的高度（这是计算的UITextView内容全部显示时的方法，在第四小段中我们还会用到它），然后加上systemLayoutSizeFittingSize：返回的高度为什么要这样呢？因为UITextView内容的高度不会影响systemLayoutSizeFittingSize计算。这句话什么意思呢？我真不知道如何用言语表达了。还是先上一张图吧：

此图中距顶的约束是10，距底的约束8，距左边约束是87，距右边约约是13，那么systemLayoutSizeFittingSize：返回的CGSize为height等于19，size等于100。它的UITextView的帧是不影响systemLayoutSizeFittingSize：的计算不知道这样说大家明白没。
所以，我们需要加上textViewSize.height。

下面是运行效果：

在UITableViewCell中使用UILabel手动布局

本小段教程将介绍UILabel在手动布局单元中计算高度，原理是根据字体与字符串长度来计算长度与宽度。按照前面介绍的，我们需要创建C3.xib，C3类，T3ViewController类，Main.storyboard中拖入UITableViewController，并分别建立关联。为了简单，C3.xib中我就不加padding之类的了，如图

记得关闭C3.xib的自动布局


直接上代码了：

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    C3 *cell = [self.tableView dequeueReusableCellWithIdentifier:@"C3"];
    cell.t.text = [self.tableData objectAtIndex:indexPath.row];
    [cell.t sizeToFit];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    C3 *cell = (C3 *)self.prototypeCell;
    NSString *str = [self.tableData objectAtIndex:indexPath.row];
    cell.t.text = str;
    CGSize s = [str calculateSize:CGSizeMake(cell.t.frame.size.width, FLT_MAX) font:cell.t.font];
    CGFloat defaultHeight = cell.contentView.frame.size.height;
    CGFloat height = s.height > defaultHeight ? s.height : defaultHeight;
    NSLog(@"h=%f", height);
    return 1  + height;
}

这儿用到了一个的NSString的Cagetory方法：

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18

- (CGSize)calculateSize:(CGSize)size font:(UIFont *)font {
    CGSize expectedLabelSize = CGSizeZero;
    
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
        paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping;
        NSDictionary *attributes = @{NSFontAttributeName:font, NSParagraphStyleAttributeName:paragraphStyle.copy};
        
        expectedLabelSize = [self boundingRectWithSize:size options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:nil].size;
    }
    else {
        expectedLabelSize = [self sizeWithFont:font
                                       constrainedToSize:size
                                           lineBreakMode:NSLineBreakByWordWrapping];
    }

    return CGSizeMake(ceil(expectedLabelSize.width), ceil(expectedLabelSize.height));
}

原理上面我已说了，这儿没有什么好说明的，代码一目了然。

运行效果如图：

在UITableViewCell中使用UITextView进行手动布局

本小段教程将介绍UITextView在手动布局单元中计算高度，原理是与第二小节里的相同，用sizeThatFits：的方法计算UITextView的长度与高度。然后加上padding就是Cell的高度。按照前面介绍的，我们需要创建C4.xib，C4类，T4ViewController类，Main.storyboard中拖入UITableViewController，并分别建立关联。为了简单，C4.xib中我就不加padding之类的了，如图

计得关闭C4.xib的自动布局


也直接上代码了，直观明了：

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    C4 *cell = [self.tableView dequeueReusableCellWithIdentifier:@"C4"];
    cell.t.text = [self.tableData objectAtIndex:indexPath.row];
    [cell.t sizeToFit];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    C4 *cell = (C4 *)self.prototypeCell;
    NSString *str = [self.tableData objectAtIndex:indexPath.row];
    cell.t.text = str;
    CGSize s =  [cell.t sizeThatFits:CGSizeMake(cell.t.frame.size.width, FLT_MAX)];
    CGFloat defaultHeight = cell.contentView.frame.size.height;
    CGFloat height = s.height > defaultHeight ? s.height : defaultHeight;
    return 1  + height;
}

运行效果：

5.随UITextView的高度动态改变细胞高度

本小节要介绍的一个功能是，UITextView的中的UITableViewCell中，当输入的UITextView中的字变多/变少时，高度变化，细胞高度与随之变化的功能。
按照前面介绍的，我们需要创建C5.xib， C5类，T5ViewController类，Main.storyboard中拖入UITableViewController，并分别建立关联。为了简单，C5.xib中我就不加padding之类的了，如图

记得开启C5.xib的自动布局


先看代码：

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    C5 *cell = [self.tableView dequeueReusableCellWithIdentifier:@"C5"];
    cell.t.text = @"123";
    cell.t.delegate = self;
    return cell;
}

#pragma mark - UITableViewDelegate
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    C5 *cell = (C5 *)self.prototypeCell;
    cell.t.text = self.updatedStr;
    CGSize s =  [cell.t sizeThatFits:CGSizeMake(cell.t.frame.size.width, FLT_MAX)];
    CGFloat defaultHeight = cell.contentView.frame.size.height;
    CGFloat height = s.height > defaultHeight ? s.height : defaultHeight;
    return 1  + height;
}

#pragma mark - UITextViewDelegate
- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text {
    if ([text isEqualToString:@"\n"]) {
        NSLog(@"h=%f", textView.contentSize.height);
    }
    return YES;
}

- (void)textViewDidChange:(UITextView *)textView {
    self.updatedStr = textView.text;
    [self.tableView beginUpdates];
    [self.tableView endUpdates];
}

原理就是UITextView的内容改变的时候，计算自身高度，然后通知UITableView的更新，这样就会触发UITableViewCell的高度重新计算，以达到目的。

本文只是简单的介绍了一些原理与技巧，之细节处还请参看源码

参考：
http : //www.howlin-interactive.com/2013/01/creating-a-self-sizing-uitextview-within-a-uitableviewcell-in-ios-6/ http://johnszumski.com/blog/ auto-layout-for-table-view-cells-with-dynamic-heights http://technet.weblineindia.com/mobile/add-auto-layout-support-for-uiscrollview-with-example-in-ios-app -development / http://useyourloaf.com/blog/2014/02/14/table-view-cells-with-varying-row-heights.html

luochuanAD
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS优化UITableViewCell高度计算的一些事儿
08-26
iOS开发中对于UITableViewCell高度自适应的文章已经很多很多，但都不是自己所需要的，下面篇文章主要给大家介绍了关于iOS优化UITableViewCell高度计算的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以...
iOS之动态计算UITableViewCell高度技巧(二)
LuochuanAD的博客
09-05 5600
一说明: 转载自http://blog.csdn.net/u011043997/article/details/51263016 二:四种方法计算cell的高度(推荐使用第三种) 1、iOS8的自动计算机制，需要autolayout（适用iOS8之后系统） 2、iOS6之后系统API结合autolayout进行计算（适用于iOS6之后的系统） 3、手动计算（适用于iOS6之后
【iOS】UITableView的动态Cell高度（Masonry）
zdsey的博客
11-27 2942
这样以来将每个评论都计算一次，用数组存储，待到需要时遍历数组取出就好了。estimateRowHeight是预估高度，是还没有加载好评论时的cell高度，当评论的高度已经确定，cell会刷新高度。对于之前写的项目的评论部分，由于评论文字字数的不同会导致label高度不同，所以需要设定不同的cell高度来展示。这样并不是很方便，尤其是有的评论有回复，有的没有回复，这样就需要计算回复的label高度再做判断，更加麻烦。另外对于tableView，下面这个设定行高的方法就不需要了，也不建议去写，很有可能出错。
iOS cell 高度计算
xia_haijiao的博客
03-08 362
iOS cell 高度计算 heightForCell:每一个cell对应一个模型，模型里面有cell的高度，以及对图片frame的重新赋值； - (CGFloat)cellHeight { if (!_cellHeight) { // 文字的最大尺寸 CGSize maxSize = CGSizeMake([UIScreen mainScreen].bounds.size.wid
iOS 谈一谈自适应Cell的高度缓存
H.A.N的博客
09-28 882
系统如何计算的自适应高度？ 系统计算的行高会不会被缓存? 如何缓存? 前几天读文档的时候发现一对方法 - (CGSize)systemLayoutSizeFittingSize:(CGSize)targetSize NS_AVAILABLE_IOS(6_0); - (CGSize)systemLayoutSizeFittingSize:(CGSize)targetSize withHoriz...
ios Tableview行高的计算
iChenfy的专栏
09-16 807
一、正常计算行高 这其中需要先传入一个最大尺寸和一个属性字典，特殊的格式要求都写在属性字典中。NSDictionary *attrs = @{NSFontAttributeName : font};[str boundingRectWithSize:size options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context
优化UITableViewCell高度计算的那些事
02-20
摘要：在将UITableView+FDTemplateLayoutCell自动算高工具更新至1.2版本之后，百度知道iOS团队对UITableViewCell利用AutoLayout自动高度计算和UITableView滑动优化进行了总结，以及RunLoop实践技巧。这篇文章是我和...
自动计算UITableViewCell高度的扩展
04-04
源码UITableView-FDTemplateLayoutCell，AutoLayout下自动计算UITableViewCell高度的扩展，Demo中用一种Cell加一行算高代码便完成了动态高度的Feed流页面，告别了笨拙的手动累加计算。这酸爽，手写frame布局的同学们...
动态计算UITableViewCell高度详解
08-10
NULL 博文链接：https://justsee.iteye.com/blog/2208725
四种方法实现UITableView的cell高度自动计算
u013712343的博客
06-17 1982
UITableview是iOS开发中使用最频繁的一个控件，在实际开发中，我们经常需要定制cell，让cell显示图片、文字等。由于cell包含的图片和文字是根据服务器返回的数据进行填充的，这就导致cell包含的内容的高度是不定的。 四种方法计算cell的高度： 1、iOS8的自动计算机制，需要autolayout（适用iOS8之后系统） 2、iOS6之后系统API结合autolayout进行计算（适用于iOS6之后的系统） 3、手动计算（适用于iOS6之后的系统） 4、借助于第三方框架自..
ios-最简单方式，实现cell动态高度计算，只计算一次.zip
07-11
只计算一次，优化内存。 思路： 基于UITableViewDataSource 数据源方法 和 UITableViewDelegate 代理方法执行的先后顺序 1.cell 持有 model对象 2.在cell 里根据内从计算所有UI控件 3.最后计算拿到最底部控件的bottom值 就是cell的最终高度，再赋值 给model 用来存储高度 4.cellForRowAtIndexPath 执行完后 会接着执行 UITableViewDelegate 代理方法，在拿到计算好的高度用来返回即可。
ios-动态设置cell高度.zip
07-11
实现点击城市后,记录已经点击的城市并根据最近访问城市数据动态设置cell高度
IOS学习之UITableViewCell动态计算高度(IOS8)
DBMN的专栏
01-05 5810
上一篇介绍了AutoLayout的三个属性，后来发现其实和UITableViewCell动态高度的学习关系不大。不过还是有用的，因为AutoLayout涉及到比较复杂的布局，就肯定会用到那三个属性。废话不多说，今天就来学习一下UITableViewCell的动态计算高度问题。这篇的方法仅适用IOS8以上的系统，稍后在写一篇通用的。 计算Cell高度这个问题，苹果终于在IOS8时帮我们做了，也就是
iOS-使用Masnory实现UITableViewCell自适应高度
LiuChongFaye的博客
07-18 9180
在iOS开发当中，如果涉及到UITableViewCell的一些复杂UI的绘制时难免会碰到这么一个难题：UITableViewCell的高度如何设置！ 的确，我们就拿一个简单的例子来说：一个Cell上，有头像，有昵称，有评论内容，还有图片等控件，其中评论内容的字数并不能确定，那就决定了其每一个Cell的高度不定。比如下面我所做的一个项目中的评论：   图1：简单的评论 从图1中可以看到...
iOS中最简单实用的自定义动态返回行高的cell，动态计算cell的高度
热门推荐
horisea的博客
07-25 1万+
最简单实用的动态返回行高的自定义UITableViewCell
iOS - 自动计算cell的高度(iOS8 Auto-sizing)
LinXunFeng的博客
06-01 2884
从iOS8开始,苹果就可以使用Auto-sizing来自动计算tableView中cell的高度了 一 .照常我们自定义一个cell,并添加了各种约束(具体的自行搞定,因为这跟本文要讲的没什么太大的关系),并设置对应的数据,但不要去计算cell的高度 应用该cell后,发现cell的高度就是默认高度44   二 . 接下来只需要两个个步骤即可实现自动计算cell高度
iOS个人整理20-UITableViewCell自定义,cell高度的自适应（纯代码）
舍本逐末
03-03 1万+
UITableViewCell
iOS开发-写给萌新们的UITableView的Cell高度自适应方法
伪随机的张三
08-20 3608
Emmmm…. 时间过得好快，一晃眼一年就过去了，打开尘封已久的CSDN博客，发现自己堕落了无数时光，但人活着总是要混口饭吃的嘛，所以再度起航，键盘敲起来，文章写起来。希望大家能支持我这个垃圾猿，好啦切入正题。 皮一下很开心 上周在技术群里看萌新们在问UITableView的Cell怎么自适应宽高（xib和storyboard的我就不说了，关东升老哥的书里全都是），有装大佬的人就给他们...
iOS-RATreeView多层UITableViewCell展示【多级列表展开与收起】的使用
最新发布
05-31
iOS-RATreeView是一个开源的第三方库，提供了多层级的UITableView展示功能。使用该库可以轻松实现多级列表的展开与收起。 首先，在项目中引入iOS-RATreeView库。可以使用CocoaPods引入，也可以手动下载并导入。 接...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值