动态计算UITableViewCell高度详解
2016-06-30 00:00
597 查看
动态计算UITableViewCell高度详解
不知道大家有没有发现,在iOS APP开发过程中,UITableView是我们显示内容常见的控件,本人觉得它是UIKit中最复杂的一个控件。今天要向大家介绍的就是如何动态计算UITableViewCell高度的一经验与技巧,在此做一些总结方便朋友们查阅。为了不让讲解空洞抽象,我还是用代码实例的方式进行讲解,这样更容易接收与学习。
本文将介绍四种情况下UITableViewCell的计算方式,分别是:
Auto Layout with UILabel in UITableViewCell
Auto Layout with UITextView in UITableViewCell
Manual Layout with UILabel in UITableViewCell
Manual Layout with UITextView in UITableViewCell
随UITextView高度动态改变Cell高度
由于只是一个demo,所以命名这些都是随意从简。
首先创建一个Single Page的工程,我命名为CellHeightDemo
1. Auto Layout with UILabel in UITableViewCell
创建一个空的xib,命名为C1.xib, 然后拖入一个UITableViewCell控件。接着创建一个UITableViewCell的子类,命名为C1类。然后在C1.xib中,将与C1类进行关联。别给我说你不会关联,如果不会那看下图你就明白了。V^只需要在Class那里写入关联的类名C1即可。
还有由于UITableViewCell需要重用功能,所以我们还需要设置一个重用标识
在Identifier那里写入重用标识C1,当然你也可以用任意字符。不过后面代码里需要这个字符。
接着我们来布局。用到了auto layout, 在此我不想介绍auto layout, 以后有时间再专门介绍,下图就是我布局
这儿有两点需要说明:1. UILabel的属性Lines这儿设为了0表示显示多行。2. Auto Layout一定要建立完完整。
接着我们在UITableView中来使用我们自定义的UITableViewCell C1.
首先我们创建一个UITableViewController的子类T1ViewController, 接着在Main.storyboard中拖入一个UITableViewController,并关联T1ViewController.
一切都准备好了,那我们现在来写点代码,给UITableView加点料。
我们想要我们的UITableView使用C1.xib中自定义的Cell,那么我们需要向UITableView进行注册。
1 2 | UINib *cellNib = [UINib nibWithNibName:@"C1" bundle:nil]; [self.tableView registerNib:cellNib forCellReuseIdentifier:@"C1"]; |
1 | self.tableData = @[@"1\n2\n3\n4\n5\n6", @"123456789012345678901234567890", @"1\n2", @"1\n2\n3", @"1"]; |
1 2 | - (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; } |
这里有一个需要特别注意的问题,也是效率问题。UITableView是一次性计算完所有Cell的高度,如果有1W个Cell,那么- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath就会触发1W次,然后才显示内容。不过在iOS7以后,提供了一个新方法可以避免这1W次调用,它就是- (CGFloat)tableView:(UITableView )tableView estimatedHeightForRowAtIndexPath:(NSIndexPath )indexPath。要求返回一个Cell的估计值,实现了这个方法,那只有显示的Cell才会触发计算高度的protocol. 由于systemLayoutSizeFittingSize需要cell的一个实例才能计算,所以这儿用一个成员变量存一个Cell的实列,这样就不需要每次计算Cell高度的时候去动态生成一个Cell实例,这样即方便也高效也少用内存,可谓一举三得。
我们声明一个存计算Cell高度的实例变量:
1 | @property (nonatomic, strong) UITableViewCell *prototypeCell; |
1 | self.prototypeCell = [self.tableView dequeueReusableCellWithIdentifier:@"C1"]; |
1 2 | - (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; } |
发现没Cell的高度是127, 面contentView的高度是126, 这下明白了吧。
为了让读者看清楚,我将Cell中UILabel的背景色充为了light gray.下面是运行效果:
2. Auto Layout with UITextView in UITableViewCell
本小段教程将介绍UITextView在cell中计算高度需要注意的地方。同样参考上面我们创建一个C2.xib, UITableViewCell的子类C2,并关联C2.xib与C2类。并在C2.xib中对其布局,同样使用了auto layout. 布局如下图:创始UITableViewController的了类T2ViewController,在Main.storyboard中拖入UITableViewController,并关联他们。接着代码中注册C2.xib到UITableView.
下面计是计算高度的代码:
1 2 | - (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; } |
此图中距顶的约束是10, 距底的约束8, 距左边约束是87,距右边的约束是13, 那么systemLayoutSizeFittingSize:返回的CGSize为height等于19, size等于100. 它UITextView的frame是不影响systemLayoutSizeFittingSize:的计算。不知道这样说大家明白没。
所以,我们需要加上textViewSize.height.
下面是运行效果:
3. Manual Layout with UILabel in UITableViewCell
本小段教程将介绍UILabel在Manual layout cell中计算高度, 原理是根据字体与字符串长度来计算长度与宽度。 按照前面介绍的,我们需要创建C3.xib, C3类, T3ViewController类,Main.storyboard中拖入UITableViewController,并分别建立关联。 为了简单,C3.xib中我就不加padding之类的了,如图记得关闭C3.xib的auto layout
直接上代码了:
1 2 | - (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; } |
1 2 | - (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)); } |
运行效果如图:
4. Manual Layout with UITextView in UITableViewCell
本小段教程将介绍UITextView在Manual layout cell中计算高度, 原理是与第二小节里的相同,用sizeThatFits:的方法计算UITextView的长度与高度。然后加上padding就是Cell的高度。 按照前面介绍的,我们需要创建C4.xib, C4类, T4ViewController类,Main.storyboard中拖入UITableViewController,并分别建立关联。 为了简单,C4.xib中我就不加padding之类的了,如图计得关闭C4.xib的auto layout
也直接上代码了,直观明了:
1 2 | - (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高度动态改变Cell高度
本小节要介绍的一个功能是,UITextView中UITableViewCell中,当输入UITextView中的字变多/变少时,高度变化,Cell高度与随之变化的功能。按照前面介绍的,我们需要创建C5.xib, C5类, T5ViewController类,Main.storyboard中拖入UITableViewController,并分别建立关联。 为了简单,C5.xib中我就不加padding之类的了,如图
记得开启C5.xib的auto layout
先看代码:
1 2 | - (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]; } |
相关文章推荐
- UIImageView,UIScrollView
- AngularUI Router学习笔记
- easyui datagrid 分页保持checkbox选中状态
- RocketMQ队列queue的偏移量Offset均衡分布测试
- UISwitch
- 理解 Android Build 系统
- 自定义UITableView索引动画,实现饿了么菜单效果
- ui-router中路由的二级嵌套
- 关于自定义UIControl
- easyui:关于parser
- EasyUI tree加载树
- String,StringBuffer,StringBuilder的区别以及 StringBuffer的原理
- angular-ui-router中对带参ui-view的配置
- UIMenuController
- newlisp实现quick sort
- ui-router入门(精简)
- 长按UITableViewCell弹出UIMenuController
- iOS AudioQueue
- ActionBar
- file遍历(递归)