iOS App开发中使cell高度自适应的黑魔法详解_IOS

在使用 table view 的时侯经常会遇到这样的需求:table view 的 cell 中的内容是动态的,导致在开发的时候不知道一个 cell 的高度具体是多少,所以需要提供一个计算 cell 高度的算法,在每次加载到这个 cell 的时候计算出 cell 真正的高度。

在 iOS 8 之前

没有使用 Autolayout 的情况下,需要实现 table view delegate 的 tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat 方法,在这个方法中计算并返回 cell 的高度。比如,我有一个可以显示任意行数的纯文本 cell,计算 cell 的代码可以是这样:

复制代码 代码如下:

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    let content = self.datas[indexPath.row] as String

    let padding: CGFloat = 20
    let width = tableView.frame.size.width - padding * 2;

    let size = CGSizeMake(width, CGFloat.max)
    let attributes = [NSFontAttributeName: UIFont(name: "Helvetica", size: 14)!]
    let frame = content.boundingRectWithSize(size,
        options: NSStringDrawingOptions.UsesLineFragmentOrigin,
        attributes: attributes,
        context: nil)
    return frame.size.height+1;
}

上面的代码是一个最简单的例子,这个例子看起来好像没有什么问题。但是通过查看这个 delegate 方法的文档后,可以知道,在每次 reload tableview 的时候,程序会先计算出每一个 cell 的高度,等所有高度计算完毕,确定了 tableview 的总的高度后,才开始渲染视图并显示在屏幕上。这意味着在显示 table view 之前需要执行一堆的计算,并且这是在主线程中进行的,如果计算量太大程序就很有可能出现卡顿感。比如: table view 的数据有上千条,或者计算高度的代码中还要先获取图片再根据图片计算高度,这些操作都是非常慢的。

如果在 cell 中使用了 autolayout,在计算 cell 高度时会更麻烦。有兴趣的可以看这里有篇关于如何在 autolayout 下动态计算高度 的文章。

为什么不能等滚动到某个 cell 的时候,再调用计算这个 cell 高度的 delegate 呢?原因是 tableview 需要获得它的内容的总高度,用这个高度去确定滚动条的大小等。直到 iOS 7 UITableViewDelegate中添加了新的 API

tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat
这个方法用于返回一个 cell 的预估高度,如果在程序中实现了这个方法,tableview 首次加载的时候就不会调用heightForRowAtIndexPath 方法,而是用 estimatedHeightForRowAtIndexPath 返回的预估高度计算 tableview 的总高度,然后 tableview 就可以显示出来了,等到 cell 可见的时候,再去调用heightForRowAtIndexPath 获取 cell 的正确高度。

通过使用estimatedHeightForRowAtIndexPath 这个 Delegate 方法,解决了首次加载 table view 出现的性能问题。但还有一个麻烦的问题,就是在 cell 没有被加载的时候计算 cell 的高度,上面给出的代码中,仅仅是计算一个 NSString 的高度,就需要不少代码了。这种计算实际上是必须的,然而在 iOS 8 开始,你可能可以不用再写这些烦人的计算代码了!

iOS 8 的魔法

在 iOS 8 中,self size cell 提供了这样一种机制:cell 如果有一个确定的宽度/高度,autolayout 会自动根据 cell 中的内容计算出对应的高度/宽度。

TableView 中的 cell 自适应

要让 table view 的 cell 自适应内容,有几个要点:

设置的 AutoLayout 约束必须让 cell 的 contentView 知道如何自动延展。关键点是 contentView 的 4 个边都要设置连接到内容的约束,并且内容是会动态改变尺寸的。
UITableView 的 rowHeight 的值要设置为 UITableViewAutomaticDimension
和 iOS 7 一样,可以实现 estimatedHeightForRowAtIndexPath 方法提升 table view 的第一次加载速度。
任何时候 cell 的 intrinsicContentSize 改变了(比如 table view 的宽度变了),都必须重新加载 table view 以更新 cell。
例子

在 Xcode 中新建一个项目,在 storyboard 中创建一个 UITableViewController 的 IB,创建一个如下样子的 cell:

这个 cell 中有 3 个元素,其中 imageView 的 autoLayout 约束为:

  • imageView 左边离 contentView 左边 0
  • imageView 上边离 contentView 上边 0
  • imageView 的 width 和 height 为 80
  • imageView 下边离 contentView 下边大于等于 0(为了防止内容太少,导致 cell 高度小于图片高度)

titleLabel 的 autoLayout 约束为:

  • titleLabel 左边离 imageView 右边 8
  • titleLabel 上边和 imageView 上边在同一只线上
  • titleLabel 右边离 contentView 右边 0
  • titleLabel 下边离 description 上边 8
  • titleLabel 的高度小于等于 22,优先级为 250

descriptionLabel 的约束为:

  • descriptionLabel 左边和 titleLabel 左边在同一直线上
  • descriptionLabel 上边里 titleLabel 8
  • descriptionLabel 下边里 contentView 下边 0
  • descriptionLabel 右边离 contentView 右边 0

然后在这个 IB 对应的 UITableViewController 中加载一些数据进去,显示效果如图:

实现这个效果,我除了设置了 autoLayout,还设置了 tableView 的 rowHeight = UITableViewAutomaticDimension,然后就是这样了。一点计算 cell 高度的代码都没有!!我连 heightForRowAtIndexPath都不用实现,真的是….爽出味啊!所以如果已经在开发 iOS 8 Only 的应用了一定要用autolayout,把烦人的计算交给 autolayout 去吧。

CollectionView 中的 cell 自适应

在 collection view 中也能让 cell 自适应内容大小,如果 UICollectionView 的 layout 是一个 UICollectionViewFlowLayout,只需要将 layout.itemSize = ... 改成 layout.estimatedItemSize = ...。 只要设置了 layout 的 estimatedItemSize,collection view 就会根据 cell 里面的 autolayout 约束去确定cell 的大小。

原理:

  • collection view 根据 layout 的 estimatedItemSize 算出估计的 contentSize,有了 contentSize collection view 就开始显示
  • collection view 在显示的过程中,即将被显示的 cell 根据 autolayout 的约束算出自适应内容的 size
  • layout 从 collection view 里获取更新过的 size attribute
  • layout 返回最终的 size attribute 给 collection view
  • collection 使用这个最终的 size attribute 展示 cell

UITextView 输入内容实时更新 cell 的高度
在一个动态数据的 table view 中,cell 根据 text view 内容的输入实时改变 cell 和 table view 的高度。自动计算 cell 高度的功能使用 iOS 8 才支持的自适应 cell,先上图,我们最终要实现的效果是这样的:

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

  • 在 cell 中设置好 text view 的 autolayout,让 cell 可以根据内容自适应大小
  • text view 中输入内容,根据内容更新 textView 的高度
  • 调用 tableView 的 beginUpdates 和 endUpdates,重新计算 cell 的高度

将 text view 更新后的数据保存,以免 table view 滚动超过一屏再滚回来 text view 中的数据又不刷新成原来的数据了。

功能具体实现方法:

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

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

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

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

复制代码 代码如下:

#import <UIKit/UIKit.h>

@interface TextViewCell : UITableViewCell

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

@end

创建 TableViewController 并初始化一些数据

复制代码 代码如下:

#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

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

复制代码 代码如下:

#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

复制代码 代码如下:

#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 的调用

复制代码 代码如下:

- (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

复制代码 代码如下:

#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];
}

时间: 2024-08-03 20:20:19

iOS App开发中使cell高度自适应的黑魔法详解_IOS的相关文章

iOS App开发中Core Data框架基本的数据管理功能小结_IOS

一.何为CoreDataCoreData是一个专门用来管理数据的框架,其在性能与书写方便上都有很大的优势,在数据库管理方面,apple强烈推荐开发者使用CoreData框架,在apple的官方文档中称,使用CoreData框架可以减少开发者50%--70%的代码量,这虽然有些夸张,但由此可见,CoreData的确十分强大. 二.设计数据模型在iOS开发中,时常使用SQL数据库对大量的表结构数据进行处理,但是SQL有一个十分明显的缺陷,对于常规数据模型的表,其处理起来是没问题的,例如一个班级表,其

详解iOS App开发中session和coockie的用户数据存储处理_IOS

NSURLSession在iOS7之后,NSURLSession作为系统推荐使用的HTTP请求框架,在进行前台请求的情况下,NSURLSession与NSURLConnection并无太大差异,对于后台的请求,NSURLSession更加灵活的优势就将展现无遗.1.NSURLSession集合的类型 NSURLSession类提供3中Session类型: (1)Default类型:提供前台请求相关方法,支持配置缓存,身份凭证等. (2)Ephemeral类型:即时的请求类型,不使用缓存,身份凭证

iOS App开发中通过UIDevice类获取设备信息的方法_IOS

UIDevice提供了多种属性.类函数及状态通知,帮助我们全方位了解设备状况.从检测电池电量到定位设备与临近感应,UIDevice所做的工作就是为应用程序提供用户及设备的一些信息.UIDevice类还能够收集关于设备的各种具体细节,例如机型及iOS版本等.其中大部分属性都对开发工作具有积极的辅助作用.下面的代码简单的使用UIDevice获取手机属性. 简单示例:设备相关信息的获取   NSString *strName = [[UIDevice currentDevice] name];   N

详解iOS App开发中改变UIButton内部控件的基本方法_IOS

UIButton内部默认有个UIImageView.UILabel控件,可以分别用下面属性访问: 复制代码 代码如下: @property(nonatomic,readonly,retain) UIImageView *imageView; @property(nonatomic,readonly,retain) UILabel     *titleLabel; UIButton之所以能显示文字,完全是因为它内部的titleLabel也,也就是说,UIButton的setTitle:forSta

iOS App开发中导航栏的创建及基本属性设置教程_IOS

文件目录如下:基本导航顺序: root -> First -> Second -> Third.其中,FirstViewController作为 navigation堆栈的rootview 1.创建navigation 如果是想直接把navigation导航作为项目一开始的跟视图,把RootViewController.h文件里的nav属性放到AppDelegate.h里即可,再把RootViewController.m文件里的action的代码复制到 AppDelegate.m里的di

Android开发中原生生成JSON与解析JSON详解教程

下面分为生成JSON数据和解析JSON数据,所用的包是org.json (1)生成JSON数据方法: 比如要生成一个这样的json文本      {       "phone" : ["12345678", "87654321"],    //数组     "name" : "dream9", // 字符串        "age" : 100, // 数值       "ad

iOS App开发中使用及自定义UITableViewCell的教程_IOS

UITableView用来以表格的形式显示数据.关于UITableView,我们应该注意: (1)UITableView用来显示表格的可见部分,UITableViewCell用来显示表格的一行. (2)UITableView并不负责存储表格中的数据,而是仅仅存储足够的数据使得可以画出当前可见部分. (3)UITableView从UITableViewDelegate协议获取配置信息,从UITableViewDataSource协议获得数据信息. (4)所有的UITableView实现时实际上只有

iOS App开发中UIViewController类的使用教程_IOS

一.引言作为MVC设计模式中的C,Controller一直扮演着项目开发中最重要的角色,它是视图和数据的桥梁,通过它的管理,将数据有条有理的展示在我们的View层上.iOS中的UIViewController是UIKit框架中最基本的一个类.从第一个UI视图到复杂完整项目,都离不开UIViewController作为基础.基于UIViewController的封装和扩展,也能够出色的完成各种复杂界面逻辑.这里旨在讨论UIViewController的生命周期和属性方法,在最基础的东西上,往往会得

iOS应用开发中使UITextField实现placeholder属性的方法_IOS

我们都知道iOS开发中的UITextField有个placeholder属性,placeholder可以很方便引导用户输入.但是UITextView却没有placeholder属性. 一.猥琐的方法 如何让UITextView也有placeholder功能呢?今天给各位分享一个比较猥琐的做法.思路大概是这样的: 把UITextView的text当placeholder使用. 在开始编辑的代理方法里清除placeholder. 在结束编辑的代理方法里在设置placeholder. 实现方法: 1.