【一步一步学IOS5 】定制UITableView表视图单

之前，我们已经创建了一个简单的表视图App，用来显示菜单列表和图片。

下面，我们继续改进该App，是其效果更佳。

1）实现不同的行显示不同的图片

2) 定制表视图单元格

1.显示不同的缩略图：

在修改代码之前，我们先回顾一下在数据行上显示缩略图的代码：

- ( UITableViewCell *)tableView:( UITableView *)tableView cellForRowAtIndexPath:( NSIndexPath *)indexPath

{

static NSString *simpleTableIdentifier = @"simpleTableItem" ;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier :simpleTableIdentifier];

if (cell == nil ) {

cell = [[ UITableViewCell alloc ] initWithStyle : UITableViewCellStyleDefault reuseIdentifier :simpleTableIdentifier];

}

cell. textLabel . text = [ tableData objectAtIndex :indexPath. row ];

cell. imageView . image = [ UIImage imageNamed : @"creme_brelee.jpg" ];

return cell;

}

上面代码中，我们添加了代码行，指示UITableView在每一行显示creme_brelee.jpg缩略图。显然，为了显示不同的图片，我们需要更改这一行代码。之前解释过，在每一行数据显示之前，iOS自动调用一次cellForRowAtIndexPath方法。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

查看该方法的参数，在调用的时候，传入indexPath参数。indexPath 参数包包含了数据行的行编号（也就是节点编号）。你可以使用indexPath.row属性获知当前指向的行。和数组一样，数据行从0开始。也就是说，indexPath.row属性针对表的第一行返回0.

为了显示不同的缩略图，我们将添加一个 新的数据（如thumbnails),存放缩略图的文件名称：

@implementation SimpleTableViewController

{

NSArray * tableData;

NSArray * thumbnails;

NSString * prepTime;

NSArray * time;

}

- ( void )viewDidLoad

{

[ super viewDidLoad ];

//Initialize table data

tableData = [ NSArray arrayWithObjects : @"Egg Benedict" , @"Mushroom Risotto" , @"Full Breakfast" , @"Hamburger" , @"Ham and Egg sandwith" , @"Creme Brelee" , @"White Chcolate Dount" , @"Starbucks Coffee" , @"Vegetable Curry" , @"Instant Noodle with Egg" , @"Noodle with BBQ Pork" , @"Japanese Noodle with Pork" , @"Green Tea" , @"Thai Shrimp Cake" , @"Angry Birds Cake" , @"Ham and Cheese Panini" , nil ];

//Initialize thumbnails

thumbnails = [ NSArray arrayWithObjects : @"egg_benedict.jpg" , @"mushroom_risotto.jpg" , @"full_breakfast.jpg" , @"hamburger.jpg" , @"ham_and_egg_sandwich.jpg" , @"creme_brelee.jpg" , @"white_chocolate_donut.jpg" , @"starbucks_coffee.jpg" , @"vegetable_curry.jpg" , @"instant_noodle_with_egg.jpg" , @"noodle_with_bbq_pork.jpg" , @"japanese_noodle_with_pork.jpg" , @"green_tea.jpg" , @"thai_shrimp_cake.jpg" , @"angry_birds_cake.jpg" , @"ham_and_cheese_panini.jpg" , nil ];

//Initialize prepTime

prepTime = @"PrepTime:" ;

//Initialize time

time = [ NSArray arrayWithObjects : @"30 min" , @"20 min" , @"10 min" , @"40 min" , @"50 min" , @"70 min" , @"90 min" , @"30 min" , @"30 min" , @"30 min" , @"30 min" , @"30 min" , @"30 min" , @"30 min" , @"30 min" , @"30 min" , nil ];

}

从上面的代码可以看出，我们初始化thumbnails数组位缩略图文件名列表。图片顺序和tableData数组记录保持一致。

图片包见附件。

最后，更改cellForRowAtIndexPath方法的代码行：

cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

2.[thumbnails objectAtIndex:indexPath.row] 有什么用途？

该代码负责位特定行检索缩略图的文件名。对第一行，indexPath.row 属性返回0，我们使用objectAtIndex方法，从thumbnails 数组获得第一张图片（如 egg_benedict.jpg)

在保存所有更改之后，再次运行A pp，界面效果如下：

3.定制表视图单元格

显示效果如下：

4.设计单元格

在项目导航栏中，右击SimpleTable文件夹，并选择New File...。

为了设计我们自己的单元格，我们需要为单元格创建一个新的Interface Builder 文件。针对这个例子，我们仅需要从一个Empty的用户界面开始，点击Next按钮继续。

在弹出选择device family 窗口中，选择iPhone，并点击Next按钮继续。保存文件为SimpleTableCell.

在创建文件之后，可以在项目导航栏可以看到这个文件，选择SimpleTableCell.xib文件切换到Interface Builder窗口。

下面，我们将设计定制单元格的用户界面。

在对象库（Object Library)中，选择Table View Cell 控件，并拖拽到Interface Builder窗口的设计区域。

为了容纳大尺寸的缩略图，我们需要更改单元格的高度。按住单元格的底部或顶部边缘，拖拉到78高度。

另外一个方法是，你可以通过Size Inspector 窗口来更改高度：

接着，选择工具区域（Utility Area)上部分的Attribute Inspector 窗口，设置定制单元格的Identifier属性值为：SimpleTableCell.这个Identifier将在后面代码用到。

在配置好Table Cell View 之后，我们将放置其他控件在里面。选择 Image View 控件，并拖拽到Table Cell View里面。

图像视图控件用来显示缩略图，我们可以通过改变控件尺寸，以适合单元格的大小。

我们设置图像控件的高度和宽度为69像素

接着，我们添加三个标签Lables 控件，Name， Prep Time 和 Tiime。 Name 标签显示菜谱名称；Prep Time 是一个静态标签，显示文本Prep Time (准备时间); 最后，Time标签是一个动态标签，显示特定菜谱的实际准备时间。

添加Label 控件，从对象库（Object Library) 选择 Label 控件，拖拽到单元格。双击Label 更改其名称

选择Label，然后选择Attribute Inspector 窗口，在该窗口，你可以修改Font设置和最小化字体大小，同时，还可以更改字体颜色和对齐方式。

最终设计的UI如下图所示：

5.为定制单元格创建类

目前为止，我们已经设计好了表单元格，但是如何改变定制单元格的标签呢？

我们将位定制的表视图创建一个新类，这个类表示定制单元格的底层数据

和之前一一样，右击项目栏中SimpleTable 文件夹，选择New File...

接着Xcode弹出一窗口，选择Cocoa Touch 下面的 Object-C class, 点击Next

输入SimpleTableCell 作为类名，并选择UITableViewCell 作为 Subclass of 下拉选项。

点击next，点击Create按钮。

Xcode 应该在项目导航栏中创建了2个文件：SimpleTableCell.h 和 SimpleTableCell.m。

SimpleTableCell 类作为定制单元格的数据模型。在单元格中，有3个值是需要变更的：缩略图、菜谱名称标签和时间标签。在类中，我们将添加3个属性，分别表示这些动态值。

打开SimpleTableCell.h 文件，在@end代码前面添加如下属性：

@property ( nonatomic , weak ) IBOutlet UILabel *nameLabel;

@property ( nonatomic , weak ) IBOutlet UILabel *prepTimeLabel;

@property ( nonatomic , weak ) IBOutlet UIImageView *thumbnailImageView;

@property ( nonatomic , weak ) IBOutlet UILabel *time;

6.Property 和 Outlet

上述代码定义了三个实例变量，下面会用来和Interface Builder 中的表视图单元格进行关联。

关键字@property 用来在类中定义一个属性：

@property(attibutes) type name;

关于前面的代码，weak 和 nonatomic 是 property 的特性。 UILabel 和 UIImageView 是类型，

nameLabel, prepTimeLabel 和 thumbnailImageView是变量名称。

IBOutlet :你可以将IBOutlet理解为一个指示符（indicator). 为了关联实例变量和表视图单元格中的文件，我们使用IBOutlet关键字，让Interface Builder 知道它们允许建立连接。随后，你将看到如何在这些Outlets 和Interface Builder 中的对象建立连接。

现在，打开SimpleTableCell.m 文件，跟随在@implementation SimpleTableCell 代码行下面，添加如下代码：

@synthesize nameLabel = _nameLabel;

@synthesize prepTimeLabel = _prepTimeLabel;

@synthesize thumbnailImageView = _thumbnailImageView;

@synthesize time = _time;

7.@synthesize指令

@synthesize 关键字告诉编译器自动生成代码，用来访问前面定义的属性。如过你忘记包含这些指令，Xcode 将抛出异常

8.建立连接

选择SimpleTableCell.xib 文件，返回Interface Builder 界面。现在，我们将在此类的属性（或实例变量）和界面上的Label、ImageView控件上建立连接。

首先，选择单元格，并在Identity Inspector 窗口中，选择类SimpleTableCell.这里将关联单元格视图(cell view)和前面创建的定制类。

现在，我们将和属性建立连接。右击Objects下面的SimpleTableCell, 显示Outlets 监视器(inspector).点击并按住nameLabel右侧的圆形图标，拖拉到Label - Name 对象上。 Xcode 自动建立它们之间的连接。

重复上面的步骤，为prepTimeLabel 和 thumbnailImageView 建立连接。

(1)连接prepTimeLabel 和 Label - Time 对象；

(2)连接thumbnailImageView 和 ImageView 对象；

9.更新SimpleTableViewController

我们已经完成了定制表视图单元格的设计和编码工作，最后，我们要做的更新是 - 在SimpleTableViewController 中使用定制单元格。

再次访问SimpleTableViewController.m中用来创建表视图行的代码

我们使用默认的表视图单元格（如UITableViewCell)来显示表元素。为了使用我们之前创建的定制单元格，我们需要创建SimpleTableView.m 中的这部分代码，如下所示：

- ( UITableViewCell *)tableView:( UITableView *)tableView cellForRowAtIndexPath:( NSIndexPath *)indexPath

{

static NSString *simpleTableIdentifier = @"SimpleTableCell" ;

SimpleTableCell *cell = ( SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier :simpleTableIdentifier];

if (cell == nil ) {

NSArray *nib = [[ NSBundle mainBundle ] loadNibNamed : @"SimpleTableCell" owner : self options : nil ];

cell = [nib objectAtIndex : 0 ];

}

cell. nameLabel . text = [ tableData objectAtIndex :indexPath. row ];

cell. thumbnailImageView . image = [ UIImage imageNamed :[ thumbnails objectAtIndex :indexPath. row ]];

cell. prepTimeLabel . text = prepTime ;

cell. time . text = [ time objectAtIndex :indexPath. row ];

return cell;

}

然后，在更新好代码之后，Xcode检测到一些错误，并显示在源码编辑器中：

这是因为我们少引用SimpleTableCell.h 头文件。

最后，因为表单元格的高度更改为78，因此在@end代码行之前添加如下代码：

- ( CGFloat )tableView:( UITableView *)tableView heightForRowAtIndexPath:( NSIndexPath *)indexPath

{

return 78 ;

}

现在，点击Run按钮，你的SimpleTableApp运行界面如下图所示：

【一步一步学IOS5 】定制UITableView表视图单元格

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义