iOS开发 －定制TableViewCell

定制TableViewCell

一，优化TableViewCell的显示内容

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">1，每一行显示不同的图片</span>

上一节中只在程序中加了一个图片，每一行都显示相同的图片。那怎么样来显示不同的图片呢？首先我们看下每行是怎么显示不同文本的：

1）定义一个NSArray数组tableData存放每一行显示的数据；

2）在cellForRowAtIndexPath函数中调用NSArray的objectAtIndex方法，获取指定行的内容，赋值给要显示的cell中的文本：

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

          按照这种思路，我们也可以定义一个存放图片名称的数组，值cellForRowAtIndexPath函数中根据indexPath的信息来为cell的imageView指定对应的图片名称信息，修改代码：

 1）再从easyIcon网站上下载两个图标；

2）在.h中增加缩略图数组的定义：NSArray *thumbnailImg;

3)  在.m中的viewDidLoad函数中增加缩略图数组的初始化：

thumbnailImg = [NSArray arrayWithObjects :@“egg.png”, @“milk.png”, @“cow.png”,
@“egg.png”, @“milk.png”, @“cow.png”,
@“egg.png”, @“milk.png”, @“cow.png”,
@“egg.png”, @“milk.png”, @“cow.png”,
@“egg.png”, @“milk.png”, @“cow.png”, nil
];

4)在cellForRowAtIndex函数中修改

cell.imageView.image = [UIImage imageNamed : @“egg.png”];

为

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

这样再次运行模拟器，每行就可以显示不同的图标了。这里简化了下只用了三个数据。

二，定制化tableViewCell

现在的的单元格中只是显示了一个菜名和一个图标名称，图标的图片也比较小。我们是不是可以再丰富下展示信息和扩大图标的显示呢？答案是当然可以的。

1，添加一个User InterFace文件

     选中SimpleTable文件夹右键->New File…，选择User InterFace选项，再选择Empty,如下：

 

选择下一步后，输入名称为：SimpleTableCell。

2，添加控件

1）拖动一个Table View Cell到SimpleTableCell.xib中；

      推动一个Image View到刚刚放入的Table View Cell中；

      推动三个Label到Table View Cell中；

2）设定属性

      选中Table View Cell控件，在Custom Class中输入SimpleTableCell，设定其宽度为320，高度为8；

    设置UIImage的宽高为69，69；

    

最终效果如下： 

3，编写对应的控件类

    1）添加新文件： 

选择下一步输入名称为SimpleTableCell（要保持在xib文件中输入的Custom Class一致）。

2）添加控件的定义

在SimpleTableCell.h中的@end之前添加如下代码：

@property(nonatomic weak) IBOutlet UILabel *nameLabel; 
@property(nonatomic weak)IBOutlet UILabel *prepTimeLabel;
@property(nonatomic weak)IBOutlet UIImage *thumbnailImageView;

@property的作用：为类增加属性；@property(attributes) type name;

nonatomic : 禁止多线程，变量保护，提高性能；

weak : 改属性声明的变量没有对象的所有权，并且当对象被抛弃之后，对象自动被赋值为nil.

IBOutlet : 可以理解为一个指示符，让Interface Builder知道允许它们建立连接；

在SimpleTableCell.m文件中的@end之前添加如下代码：

@synthesize nameLabel = _nameLabel;
@synthesize prepTimeLabel = _prepTimeLabel;
@synthesize thumbnailImageView = _thumbnailImageView;

@synthesize：和@proerty配对使用，让编译器自动编写一个与数据成员同名的方法来省去读写方法的声明。

4，建立连接

打开SimpleTableCell.xib，在Simple Table Cell上右键，弹出的界面上 

在nameLabel后的圆圈上点击拖地到Name上，再依次拖动prepTimeLabel到Time，thumbnaiIImageView到Image View上；

5，修改SimpleViewController文件中的生成TableCell的方法

      在上节中使用的是默认的TableViewCell：

      

UITableViewCell *cell = [tableView dequeueReusableCellWithIdent\ifier:simpleTableIdentifier];
if (cell == nil) {
 cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
}

修改为：

SimpleTableCell *cell = (SimpleTableCell*)[tableView dequeueReusableCellWithIdentifier:
if(cell == nil) {
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SimpleTableCell" owner:self options:nil];
cell = [nib obejcetAtIndex:0];

设定显示的菜单名：

cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];
cell.humbnailImageView = [UIImage imageNamed:[thumbnailImg objectAtIndex:indexPath.row]];
cell.prepTimeLabel.text = [prepareTime obejctAtIndex:indexPath.row]; //prepareTime仿照tableData定义一下

ok，保存后再次运行代码，可以看到显示的内容重叠了。这是因为我们修改了默认的cell高度导致的，电子上写的是需要实现如下方法：

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 78;
}

但是在iOS8会收到警告：

Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a tableview cell's content view. We're considering the collapse unintentional and using standard height instead.

这个修改没有起作用。

最后，在cellForRowAtIndexPath方法中，返回cell前加入了一句：

tableView.rowHeight = 78;

才算是搞定。

来一个效果图：

代码地址: https://git.oschina.net/woodlouse/IosLearing