OS-动态调整UITableViewCell的高度iOS开发文档, by 友盟翻译组 stefaliu.

大概你第一眼看来,动态调整高度是一件不容易的事情,而且打算解决它的第一个想法往往是不正确的。在这篇文章中我将展示如何使图表单元格的高度能根据里面文本内容来动态改变,同时又不必子类化UITableViewCell。你当然可以通过子类化它来实现,但是这样做会使得代码复杂因为设置高度是在图表本身的实例上而不是对单元格操作。下面你将会看到这其实是一件轻而易举的事情。对于图表来说能够动态调整高度是件很有意义的事情,我首先想到的需要这个功能的是当显示一列长度会变化的文本列表时,如果文本内容较少,它或许能够适合正常的单元格label,但是如果文本变长,就不得不重新设置单元格大小以便于显示全部的文本内容。我总结了重新设置单元格大小的主要步骤如下:

1 创建并添加一个UILabel作为单元格cell的子视图; 2 在UITableView的委托方法: (CGFloat)tableView:(UITableView*)tableViewheightForRowAtIndexPath: (NSIndexPath *) indexPath中计算高度 3 在UITableView的委托方法: (UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath: (NSIndexPath *) indexPath中计算UILabel的框大小。

下面我要详细介绍这些步骤,首先看一下程序输出截图: 在普通的图表中,你可以简单地用下面的方法设置单元格内label的文本内容:

[[cell textLabel] setText:@"Text for the current cell here."];

也许你认为这样做就可以完全控制UILabel了,但是我发现我的任何要改变UILabel框大小的尝试都失败了,因此这并不是实现动态调整大小的一个好的候选方案。

我们需要设计一个UILabel然后把它添加到单元格的内容视图中。要实现它需要调用-cellForRowAtIndexPath,大致内容如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell;
UILabel *label = nil;
 
cell = [tv dequeueReusableCellWithIdentifier:@"Cell"];
if (cell == nil)
{
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:@"Cell"] autorelease];
 
label = [[UILabel alloc] initWithFrame:CGRectZero];
[label setLineBreakMode:UILineBreakModeWordWrap];
[label setMinimumFontSize:FONT_SIZE];
[label setNumberOfLines:0];
[label setFont:[UIFont systemFontOfSize:FONT_SIZE]];
[label setTag:1];
 
[[cell contentView] addSubview:label];
}
}

这并不是完整的代码因为我们仅仅在创建单元格的时候初始化它的label,这段代码对应调用-dequeueReusableCellWithIdentifier之后的判断模块if(cell == nil)。 在这里我想强调两点:第一个,我们可以注意到label有一个标签与其对应,因为调用了-setTag:1。当cell不等于nil时这个标签可以用到。第二点,我们通过调用[[cell contentView] addSubview:label]来将label添加到单元格的内容视图中,这个只是在label初始化的时候用到。每调用这个函数都会添加label 到子视图序列中。下面我们会将这段代码补充完整,但之前先让我们看一下如何设置cell的高度。

计算cell的高度

在一个复杂的cell中,计算高度可能比较困难,但是你只需要关心那些高度会变化的部件就可以了。在我的例子中,唯一需要处理的就是添加到单元格中的label。我们根据文本的大小来计算cell 的高度,而文本的大小取决于文本的长度和文本字体。NSString类提供了函数-sizeWithFont来方便我们获取cell 的大小。下面的代码介绍了函数-heightForRowAtIndexPath:

1
2
3
4
5
6
7
8
9
10
11
12
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
{
NSString *text = [items objectAtIndex:[indexPath row]];
 
CGSize constraint = CGSizeMake(CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), 20000.0f);
 
CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap];
 
CGFloat height = MAX(size.height, 44.0f);
 
return height + (CELL_CONTENT_MARGIN * 2);
}

你会注意到我们用到了几个常量来计算cell 的大小,它们的定义如下所示:

#define FONT_SIZE 14.0f
#define CELL_CONTENT_WIDTH 320.0f
#define CELL_CONTENT_MARGIN 10.0f

常量CELL_CONTENT_WIDTH是整个cell的宽度。CELL_CONTENT_MARGIN是我们定义的页边空白,FONT_SIZE是我们采用文本的字体大小。

首先我们要创建一个内容宽度的约束条件。CGSizeMake的第一个参量是总共的内容宽度减去两个页边空白。因为左边和右边各有一个页边空白。第二个参数是我们提供的最大数值。这个约束条件在后面的函数-sizeWithFont中将会用到。在-sizeWithFont中我们设置为 UILineBreakModeWordWrap来获取在允许自动换行的情况和上面提到的约束条件下正确的大小。最后我们使用MAX宏设置cell的高度,并且保证cell 的高度不会小于44个像素,因为它返回size.height和44两个数中的最大值。最后,我们将上下的页边空白考虑进去得到最后的结果。

为了使得读者形象化的了解页边空白,下面一个截图可以看出有一个边界环绕着label。调用[[label layer] setBorderWidth:2.0f]可以显示该边界从而方便我们看到页边空白。 计算并设置UILabel框大小

在前面我们用来计算高度的方法也是我们用来设置UILabel框大小的方法。下面将-cellForRowAtIndexPath代码补充完整:

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
34
35
36
- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell;
UILabel *label = nil;
 
cell = [tv dequeueReusableCellWithIdentifier:@"Cell"];
if (cell == nil)
{
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:@"Cell"] autorelease];
 
label = [[UILabel alloc] initWithFrame:CGRectZero];
[label setLineBreakMode:UILineBreakModeWordWrap];
[label setMinimumFontSize:FONT_SIZE];
[label setNumberOfLines:0];
[label setFont:[UIFont systemFontOfSize:FONT_SIZE]];
[label setTag:1];
 
[[label layer] setBorderWidth:2.0f];
 
[[cell contentView] addSubview:label];
 
}
NSString *text = [items objectAtIndex:[indexPath row]];
 
CGSize constraint = CGSizeMake(CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), 20000.0f);
 
CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap];
 
if (!label)
label = (UILabel*)[cell viewWithTag:1];
 
[label setText:text];
[label setFrame:CGRectMake(CELL_CONTENT_MARGIN, CELL_CONTENT_MARGIN, CELL_CONTENT_WIDTH - (CELL_CONTENT_MARGIN * 2), MAX(size.height, 44.0f))];
 
return cell;
}

要注意if(cell == nil)模块是初始化代码,只在cell创建的时候运行一次。该模块外部代码每次都会执行只要在每次数据更新或者窗口拖拽之后调用了-cellForRowAtIndexPath

也就是说,每次都需要设置label中文本内容以及设置label外框大小。注意如果label处于未初始化状态,我们需要通过调用[cell viewWithTag:1]来获取UILabel的句柄。这段代码跟前面计算高度的代码基本相同。

总结

动态计算单元格cell的高度真的并不困难。如果你有一个很复杂的cell,你只需要根据内容宽度和特定文本字体的大小来确定cell的高度。如果你不清楚你的外框显示在什么地方,只需要通过调用[[view layer] setBorderWidth:2.0f]来使外框显示即可。这会有助于你了解绘图过程以及更快地在更深的层次理解绘图显示的问题。

演示工程文件:DynamicHeights Demo Project

作者:Matt Long 原文链接:http://www.cimgf.com/2009/09/23/uitableviewcell-dynamic-height/

iOS-动态调整UITableViewCell的高度的更多相关文章

  1. iOS学习之路十三(动态调整UITableViewCell的高度)

    大概你第一眼看来,动态调整高度是一件不容易的事情,而且打算解决它的第一个想法往往是不正确的.在这篇文章中我将展示如何使图表单元格的高度能根据里面文本内容来动态改变,同时又不必子类化UITableVie ...

  2. 动态调整UITableViewCell高度的实现方法

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPa ...

  3. iOS开发——Autolayout下动态调整单元格高度

    情景描述: 有时候我们希望更新某一个单元格的数据,通常的做法是使用reloadData方法更新整个单元格.但是对一些情况是不适用的或者说实现起来比较麻烦.比如说这种简单的"点开"一 ...

  4. 让tableView的高度等于contentSize的高度、动态调整tableView的高度、tableView的高度自适应布局

    文章概要: 1.简介下,tableView中的内容如何高度自适应的布局 2.如何做到让tableView的高度动态调整 还是看图作文吧- 首先,tableView的高度就是用户能够看见里面更大世界的那 ...

  5. [转] iOS TableViewCell 动态调整高度

    原文: http://blog.csdn.net/crayondeng/article/details/8899577 最近遇到了一个cell高度变化的问题,在找解决办法的时候,参考了这篇文章,觉得不 ...

  6. 转:动态计算UITableViewCell高度详解

    转自:http://www.cocoachina.com/industry/20140604/8668.html   不知道大家有没有发现,在iOS APP开发过程中,UITableView是我们显示 ...

  7. 动态计算UITableViewCell高度详解 (转)

    感觉挺有用的一篇文章,分析了4种解决方案.回头测试之.如果有别的方案,我会在后面补上. 原文地址:http://www.ifun.cc/blog/2014/02/21/dong-tai-ji-suan ...

  8. 动态计算UITableViewCell高度

    动态计算UITableViewCell高度 UILabel in UITableViewCell Auto Layout - UILabel的属性Lines设为了0表示显示多行.Auto Layout ...

  9. Android - 动态调整ListView高度

    布局中,如果设计ListView的高度为包裹内容,那么ListView的高度是随着它的子条目的数量的变化而改变的, 这就可能会导致ListView下面的一些控件的位置也会随着ListView的高度的变 ...

随机推荐

  1. Unable to load type System.Data.Entity.DynamicProxiesXXXXXrequired for deserialization.

    Memcache实例的Get方法时抛出了异常“Unable to load type System.Data.Entity.DynamicProxies.AdInfoItems_19CD09C8E46 ...

  2. Java基础——数据类型之间的转换

    Java数据类型分为三大类,即布尔型.字符型和数值型.其中数值型又分为整型和浮点型.Java的基本数据类型(8种)为布尔型boolean(1字节):字符型char(2字节):整型byte(1字节).s ...

  3. vc不用IDE编译方法

    一个EXE是如何形成的 比如一个源程序有以下两个文件. 1.c 1.rc 首先cl.exe 会把源代码编译为1.obj rc.exe会把1.rc编译为1.res link.exe会把1.obj 1.r ...

  4. Puppet安装与配置简介(附视频教程)

    Puppet是一种Linux平台的集中配置管理系统,他可管理配置文件.用户.cron任务.软件包.系统服务等.puppet把这些系统实体称之为资源,puppet采用C/S星状的结构,所有的客户端和一个 ...

  5. ionic 不同view的數據交互

    angular中通過service factory 等服務來對不同的控制器進行數據交互 ,ionic 也一樣... var app = angular.module('ionicApp', ['ion ...

  6. js对象的相关操作方法

    //在js的对象中可以直接将一个方法赋值给一个属性,这种方法非常好用. //在js中虽然没有像其他语言中的class关键字,但是我们也可以用函数,字面量的方式来模拟. var myHome={ nam ...

  7. Glassfish数据源配置详解

    本文环境: Win2003 + myeclipse6.01 + sqlserver2000(sp4) 1. 安装glassfish——启动,在管理控制台下配置如下 首先配置连接池——大家把sqlser ...

  8. Linkedlist,arrayDeque,HashMap,linkedHashMap

    Linkedlist 1.extneds AbstractSequentialList, implements List<E>, Deque<E>, Cloneable, ja ...

  9. javascript 详解数组

      概念 数组创建 数组读写 数组 VS. 一般对象 相同点 不同点 稀疏数组 数组的length属性 元素增删 数组迭代 二维数组 数组方法 Array.prototype.join Array.p ...

  10. XSS测试语句大全

    '><script>alert(document.cookie)</script> ='><script>alert(document.cookie)& ...