UITableViewCell 自适应高度 ios8特性

这篇文章介绍了在一个动态数据的 table view 中，cell 根据 text view 内容的输入实时改变 cell 和 table view 的高度。自动计算 cell 高度的功能使用 iOS 8 才支持的自适应 cell，如果你还不知道 iOS 8 自适应 cell，可以参看这篇文章：iOS 8 自适应 Cell

先上图，我们最终要实现的效果是这样的：

图 1：实时更新 cell 高度

实现上面效果的基本原理是： 

  1. 在 cell 中设置好 text view 的 autolayout，让 cell 可以根据内容自适应大小
  2. text view 中输入内容，根据内容更新 textView 的高度
  3. 调用 tableView 的 beginUpdates 和 endUpdates，重新计算 cell 的高度
  4. 将 text view 更新后的数据保存，以免 table view 滚动超过一屏再滚回来 text view 中的数据又不刷新成原来的数据了。

功能具体实现方法

新建一个项目，拉出 TableViewController，在 cell 上添加一个 UITextView。

首先设置 text view 的 autolayout，比较关键的 constraint 是要设置 textView 的高度大于等于一个值。如图：

图 2： Text view 的 autolayout 设置

然后，设置 UITextView 的 scrollEnable 为 NO。这一点很关键，如果不设置为 NO，UITextView 在内容超出 frame 后，重新设置 text view 的高度会失效，并出现滚动条。

图 3：去掉 scrolling enable 勾选

根据刚才在 storyboard 中创建的 cell，新建一个 UITableViewCell 类。

1
2
3
4
5
6
7

#import <UIKit/UIKit.h>

@interface TextViewCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UITextView *textView;

@end

创建 TableViewController 并初始化一些数据

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
32

#import "TableViewController.h"
#import "TextViewCell.h"

@interface TableViewController ()

@property (nonatomic, strong) NSArray *data;

@end

@implementation TableViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  //  支持自适应 cell
  self.tableView.estimatedRowHeight = 100;
  self.tableView.rowHeight = UITableViewAutomaticDimension;

  self.data = @[@"Cell 1 ", @"Cell 2", @"Cell 3", @"Cell 4", @"Cell 5", @"Cell 6", @"Cell 7", @"Cell 8"];
}

#pragma mark - Table view data source

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  return [self.data count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  TextViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"TextViewCell" forIndexPath:indexPath];
  cell.textView.text = self.data[indexPath.row];
  return cell;
}

使用上面的代码项目已经可以运行了，但是 text view 还不能自动更新大小，下面来实现 text view 根据内容计算高度

先在 storyboard 中，将 UITextView 的 delegate 设置为 cell

图 4：设置 UITextView 的 delegate 为 cell

在 TextViewCell.m 中实现 - (void)textViewDidChange:(UITextView *)textView，每次 text view 内容改变的时候，就重新计算一次 text view 的大小，并让 table view 更新高度。

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
32
33

#import "TextViewCell.h"

@implementation TextViewCell

- (void)textViewDidChange:(UITextView *)textView
{
  CGRect bounds = textView.bounds;

  // 计算 text view 的高度
  CGSize maxSize = CGSizeMake(bounds.size.width, CGFLOAT_MAX);
  CGSize newSize = [textView sizeThatFits:maxSize];
  bounds.size = newSize;

  textView.bounds = bounds;

  // 让 table view 重新计算高度
  UITableView *tableView = [self tableView];
  [tableView beginUpdates];
  [tableView endUpdates];
}

- (UITableView *)tableView
{
  UIView *tableView = self.superview;

  while (![tableView isKindOfClass:[UITableView class]] && tableView) {
    tableView = tableView.superview;
  }

  return (UITableView *)tableView;
}

@end

这样就已经实现了 text view 改变内容自动更新 cell 高度的功能，这篇文章没有涉及到计算 cell 高度的代码，因为计算 cell 高度的工作全部交给 iOS 8 的 autolayout 自动计算了，这让我们少写了许多令人痛苦的代码。

最后：为了防止 table view 过长，导致滚动后重新加载 cell，会让 text view 中的内容还原的问题，我们应该在更新了 text view 的内容之后保存数据。（如果是在编辑状态下，还需要考虑取消编辑后的回滚功能。 普通数组数据，可以保存一个原始数据的副本，如果用户取消编辑，就设置 data 为原始数据的副本。如果是 NSManagedObject 对象可以使用 NSUndoManage，不过这些已经超出本篇文章的内容范围了。）

为了在 text view 更新后能让 TableViewController 中的 data 更新，需要为 cell 添加一个 delegate，在 text view 更新后调用 delegate，TableViewController 中收到 delegate 信息后更新 data。

修改后的 TextViewCell.h

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

#import <UIKit/UIKit.h>

@protocol TextViewCellDelegate;

@interface TextViewCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UITextView *textView;

@property (weak, nonatomic) id<TextViewCellDelegate> delegate;

@end

@protocol TextViewCellDelegate <NSObject>

- (void)textViewCell:(TextViewCell *)cell didChangeText:(NSString *)text;

@end

在 TextView.m的 - (void)textViewDidChange:(UITextView *)textView 中添加 delegate 的调用

1
2
3
4
5
6
7
8
9
10
11

- (void)textViewDidChange:(UITextView *)textView
{
  if ([self.delegate respondsToSelector:@selector(textViewCell:didChangeText:)]) {
    [self.delegate textViewCell:self didChangeText:textView.text];
  }

  // 计算 text view 的高度
  ...
  // 让 table view 重新计算高度
  ...
}

最后在 TableViewController.m 的最后实现 TextViewCellDelegate 的方法，更新 data

1
2
3
4
5
6
7
8
9
10

#pragma mark - TextViewCellDelegate

- (void)textViewCell:(TextViewCell *)cell didChangeText:(NSString *)text
{
  NSIndexPath *indexPath = [self.tableView indexPathForCell:cell];

  NSMutableArray *data = [self.data mutableCopy];
  data[indexPath.row] = text;
  self.data = [data copy];
}

总结

从最后的代码量来看，这个功能在实现上并不难。只要记住的几点：

  1. 使用 iOS 8 的特性自动计算 cell 高度，或者在 heightForRow 中自己实现计算高度的代码。
  2. UITextView 的 scrollEnable 要设置 NO
  3. 更新 table view 的高度使用 beginUpdates 和 endUpdates
  4. Text view 更新内容后要保存数据，以免重新加载 cell 时数据丢失

参考

时间： 2024-08-28 21:04:00

UITableViewCell 自适应高度 ios8特性的相关文章

【转】UITableViewCell自适应高度 UILabel自适应高度和自动换行

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {    // 列寬    CGFloat contentWidth = self.tableView.frame.size.width;    // 用何種字體進行顯示    UIFont *font = [UIFont systemFontOfSize:13];       // 該行要顯示的內容    

iOS UITableViewCell自适应高度

在cell.m文件中 1)初始化方法中: self.lalName=[[UILabel alloc] initWithFrame:CGRectMake(71, 5, 250, 40)]; [self addSubview:self.lalName]; 2)创建方法: //给用户介绍赋值并且实现自动换行 -(void)setIntroductionText:(NSString*)text{ //获得当前cell的高度 CGRect frame=[self frame]; //文本赋值 self.l

iOS开发-使用storyboard实现UILabel的自适应高度（iOS8）

好久没有写博客了,以后多写些博客,对自己是一种提升,对大家也是一种帮助 最近特别痴迷storyboard和xib的可视化编程,在写项目的时候遇到个问题就是如何使UILabel自适应高度,查了好多文章博客,没有太好的办法,我就自己手动搞了搞,实现了自己想要的效果,下面分享出来 相信大家都遇到这种情况,label没有根据text的字数来自适应高度 那么如何使UILabel自适应高度呢? 在可视化编程下我们需要这么做 1.不可以将label的高度设成固定值,因为设成固定值,label的大小就确定了,在

UITableViewCell自适应内容高度

UITableViewCell自适应内容高度 (2015-06-25 16:02:31) 其实TableViewCell自适应高度也就是Cell中的label自适应高度,网上有好多label自适应高度的方法,可以百度. 除了上面说的,还有一种比较简单的,其实原理估计都是一样的,只是个人觉得这种更好些而已. 首先我们知道返回cell自适应高度,那么这个高度怎么来,肯定是TableViewDelegate的方法- (CGFloat)tableView:(UITableView *)tableView

iOS8新功能 tableviewcell 自适应高度 iPhone5siPhone6 与iPhone6p的差异设置

自大iOS8推出了tableview自适应高度,我就一直想试试,刚好手上有个新闻的app需要用到就尝试了下. 使用流程很多博客上都有提,在storyboard中拉一个cell然后把里面的元素都设置好约束.这个我常做,注意最后一个元素要设置到底部的约束. 在storyboard中我没有将 打上勾 然后结果就是这样的了 iPhone6p上一切正常: iPhone5和iPhone6上tableview的高度自适应就没有成功: 如果我打上了这个勾 再来看下iPhone6p上: iPhone5s或iPho

TableView cell自适应高度-----xib

1.通过xib创建一个cell,将label进行上左下右,进行适配, self.automaticallyAdjustsScrollViewInsets = NO; self.edgesForExtendedLayout = UIRectEdgeNone;//将原点移动到navigationBar下面去了 tableView.estimatedRowHeight = 37.0;//估计cell的高度 tableView.rowHeight = UITableViewAutomaticDimens

第?一讲:UITableView 高级 自定义cell , cell自适应高度

一.自定义cell(包括cell的自定义,以及直接赋值的方法) 自定义cell就是创建一个UITableViewCell的子类. 把cell上的控件创建都封装在子类中,简化UIViewController中的代码 示例代码分析:(这个例子包括cell的自定义,以及直接赋值的方法) 1.需要建立tabelViewCell类, 在其中进行cell上控件的添加 2.在tabelViewCell.m中进行初始化,和layoutSubviews的frame布局的操作 tabelViewCell.h定义属性

iOS 【终极方案】精准获取webView内容高度，自适应高度

前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能有新的收获,我们也都致力于写一些能帮别人解决问题的文章,下面我用另一种方式来完美实现这个问题.毕竟之前大家都是根据UIWebView写的,我来说说换成WK之后的区别,主题思路也不同哦~ 插两个链接,是我朋友的大家也可以做个对比 iOS [终极方案]精准获取webView内容高度,自适应高度 iOS

iOS 8自适应高度单元格问题

iOS 8 中通过UITableViewAutomaticDimension 常量支持自适应高度的单元格(iOS 7 就要麻烦得多).但是在实际应用中,我们需要注意以下几个问题: 1. 设置好模板单元格的自动布局 模板单元格中,subviews的自动局部必须要能够把单元格撑满.也就是说,iOS 必须能够通过内容的自动布局约束计算出 cell 的高.以下面的单元格为例: cell中有上下两个 Label,上面的Label只有一行文本(lines为1),所以高度在运行时不会改变,但下面的Label是