iOS 8:【转】iOS UITextView 输入内容实时更新 cell 的高度

源地址:http://vit0.com/blog/2014/12/25/ios-textview-in-cell/

这篇文章介绍了在一个动态数据的 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-12-25 05:58:10

iOS 8:【转】iOS UITextView 输入内容实时更新 cell 的高度的相关文章

iOS UITextView 输入内容实时更新cell的高度

先上图,我们最终要实现的效果是这样的:可参考(http://www.cocoachina.com/ios/20141226/10778.html) 图 1:实时更新 cell 高度 实现上面效果的基本原理是: 在 cell 中设置好 text view 的 autolayout,让 cell 可以根据内容自适应大小 text view 中输入内容,根据内容更新 textView 的高度 调用 tableView 的 beginUpdates 和 endUpdates,重新计算 cell 的高度

element table 在表格外的input输入内容实时过滤搜索表格内容显示

<template> <div class="table"> <div class="search-Box"> <el-input placeholder="请输入关键字" icon="search" class="search" v-model="search"></el-input> </div> <el-

关于xcode7下的ios模拟器输入内容无法显示系统键盘的解决办法

xcode7下的ios模拟器输入内容无法系统键盘,只能用电脑键盘输入内容,这样可能会对调试带来麻烦. 其实xcode7下的ios模拟器默认只能使用一种,要么是模拟器系统键盘,要么就是是电脑键盘.设置方法如下: 打开ios模拟器菜单栏:Hardware-->Keyboard,会分别看到三个选项:Uses the Same Layout as OS X .Connect Hardware Keyboard和Toggle Software Keyboard.Uses the Same Layout a

【iOS开发-17】UITextView属性,点击新增内容案例,及UITextViewDelegate里光标/值变化的操作方法

(1)UITextView和UITextField的区别可以(简单)理解为,前者是一块区域可以写很多东西有换行滚动条神马的,后者只有一行文本,类似于html里面的textarea和text. (2)在本例中,我们利用一个UITextField和一个UIButton不断把UITextField里面的内容加到UITextView的最后一行.这里面用到给按钮增加 一个事件,并在事件里面把UITextField.text加到UITextView.text的后面. (3)在本例中为了用户体验,可以设置每次

iOS开发系列之四 - UITextView 用法小结

// 初始化输入框并设置位置和大小 UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(10, 10, 300, 180)]; // 设置预设文本 textView.text = @""; // 设置文本字体 textView.font = [UIFont fontWithName:@"Arial" size:16.5f]; // 设置文本颜色 textView.textColor

iOS开发之剖析&quot;秘密&quot;App内容页面效果(二)

@前些天写了一篇"秘密"的Cell效果文章,但是与在工作中想要的效果还是有差距,而且扩展性很不好,于是重写封装,把整体视图都放到scrollView中,基本是和secret app 一模一样的效果了. @代码如下:(模糊效果的类就不写了,大家可以搜"UIImage+ImageEffects",还要导入Accelerate.framework) 1.MTSecretAppEffect.h #import <Foundation/Foundation.h>

【IOS】 遍历info 的所有内容 &amp;&amp; 保存设备唯一UUID

/**获取设备的imie*/ std::string DeviceInfo::getIMIE() { #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS) NSString*bunider = nil; NSBundle* mainBundle = [NSBundle mainBundle]; NSDictionary* infoDictionary = [mainBundle infoDictionary]; id key; NSArray* keys = [

iOS 根据文本内容为TextView动态定义高度

解决方案: 1.定义一个textview,在storyboard中设定该textview的constraints. 2.将高度的constraint定义到头文件中:(直接拖拽) @property (weak, nonatomic) IBOutlet NSLayoutConstraint *textviewHeightConstraint; 3.待在实现文件中为textview加载了内容之后,获取文本高度,为该constraint赋值: CGSize sizeThatShouldFitTheCo

iOS开发之剖析&quot;秘密&quot;App内容页面效果

最近在玩"秘密",发现点击主界面的Cell进去后的页面效果不错,就写了个Demo来演示下. 它主要效果:下拉头部视图放大,上拉视图模糊而且到一定位置固定不动,其他Cell可以继续上移. @封装的主要效果类:MTHeadEffect.m(.h文件省略,很简单的) #import "MTHeadEffect.h" #import <QuartzCore/QuartzCore.h> #import <Accelerate/Accelerate.h>