AppCoda Tutorial#4学习笔记

Posted on | Edited on | In



首先思考一下问题：

在＃3中已经实现在每一行都显示相同的一张图片。那么能不能为每一个每行食谱显示不同的图片呢？

于是开始考虑不用默认的table view cell而是自己定制table view cell

每行显示不同的缩图

在#3中，最后一行代码通知了UITableView在每一行都显示图片“creme_brelee.jpg”。
于是想当然就会认为我们需要插入这行代码来显示不同的图片。在每个table row显示之前,“cellForRowAtIndexPath”方法都会被iOS模拟器自动调用。

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

观察上方的函数,会发现每当函数被调用时都会传递“indexPath”这个参数。indexPath参数包含了table row的行数。可以简单地用“indexPath.row”表示当前指向哪一行。table row从0开始计数，这一点跟数组一样。也可以理解为如果当前指向第一行table row,那么”indexPath.row” 就返回0;
所以为了在每行显示不同的缩图，需要创建一个新的数组来存放所有缩图的文件名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@implementation ViewController
{
    NSArray *recipes;
    NSArray *thumbnails;
    NSArray *time
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //初始化table数据
    recipes = [NSArray arrayWithObjects:@"鸡蛋羹",@"香酥鸡",@"白灼虾",@"北京烤鸭",@"糖醋鲤鱼",@"糖醋排骨",@"水煮鱼",@"剁椒鱼头",@"拔丝山药",@"鱼香肉丝",@"大闸蟹",@"辣炒蛤俐",@"夫妻肺片",@"宫保鸡丁",@"粉蒸牛肉",nil];
    
    //初始化缩图文件名
    thumbnails = [NSArray arrayWithObjects:@"鸡蛋羹.jpeg",@"香酥鸡.jpeg",@"白灼虾.jpeg",@"北京烤鸭.jpeg",@"糖醋鲤鱼.jpeg",@"糖醋排骨.jpeg",@"水煮鱼.jpeg",@"剁椒鱼头.jpeg",@"拔丝山药.jpeg",@"鱼香肉丝.jpeg",@"大闸蟹.jpeg",@"辣炒蛤俐.jpeg",@"夫妻肺片.jpeg",@"宫保鸡丁.jpeg",@"粉蒸牛肉.jpeg", nil];
    
    //初始化时间
    time = [NSArray arrayWithObjects:@"10 m",@"20 m",@"5 m",@"30 m",@"25 m",@"8 m",@"42 m",@"1 h",@"9 m",@"3 m",@"10 m",@"15 m",@"6 m",@"14 m",@"35 m",nil];
    
}

从上面的代码中可以看到，用一连串图片文件名初始化了thumbnails数组。图片的顺序跟“tableData”里的数据对齐。
然后把图片文件加入project中。

定制Table View Cell

下面需要定制Table View Cell让食谱的图标更大，给每道菜添加一个Prep Time。

设计cell

需要新建一个”Empty” User Interface,命名为”SimpleTableCell”.进入“SimpleTableCell.xib”.

在Object Library中,选择“Table View Cell”并把它拖到界面设计区域。把cell的高度拉到78.当然也可以采用“Size Inspector”来调整高度。

接着在工具栏中选中“Attributes Inspector”并把建好的cell的“Identifier” 命名为“SimpleTableCell”.这个名字将会在之后的代码中用到。

之后，继续在Table View Cell中添加其他元素。添加“Image View”,并把高和宽设置为69像素。添加3个”Label”,分别命名为”Name”,”Prep Time”,”Time”。在“Attribute Inspector”中设置字体。将会得到以下效果:

为已创建的cell创建一个class

新建一个”Cocoa Touch Class”,命名为”SimpleTableCell”,并选择“UITableViewCell”作为它的父类。

SimpleTableCell类作为创建好的cell的数据模型。在cell中有3个值是可变的:thumbnail image view, name label还有time label.所以在SimpleTableCell中我们需要添加3个属性来表示这3个变量。

1
2
3
@property (nonatomic, weak) IBOutlet UILabel *nameLabel;
@property (nonatomic, weak) IBOutlet UILabel *timeLabel;
@property (nonatomic, weak) IBOutlet UIImageView *thumbnailImageView;

属性和输出口

我们可以把IBOutlet看做指示器.为了将实例变量和Table View Cell(SimpleTableCell.xib)中的要素相联系。我们使用关键字”IBOutlet”来使Interface Builder知道它们允许被连接。

@synthesize 指令

关键字”@synthesize”告诉编译器为获取之前声明的properties而自动生成代码。

建立连接

首先，切换到Interface Builder，在”Identity Inspector”中把类名改为”SimpleTableCell”。此举是为了把cell View跟之前的类”SimpleTableCell”相联系。

接着开始建立连接，右击”SimpleTableCell”，出现一个”Outlets”Inspector.单击”nameLabel”右边的圆圈，拖入”Name Label”中。Xcode就自动将这个连接好了。
重复上述步骤，将”prepTimeLabel”和”thumbnailImageView”跟对应的object建立连接。

更新SimpleTableView.m

在完成table cell的设计和编码工作后。我们最后要在SimpleTableView类中把cell用起来。
把原来代码修改为：

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
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";
//    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    /*
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                      reuseIdentifier:simpleTableIdentifier];
    }
     */
    SimpleTableCell *cell = (SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if (cell == nil) {
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SimpleTableCell" owner:self options:nil];
        cell = [nib objectAtIndex:0];
        
    }
    
    /*
    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];
    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
     */
    
    cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
    cell.timeLabel.text = [time objectAtIndex:indexPath.row];
    
    return cell;
}

修改过程中别忘了先加上：

1
#import "SimpleTableCell.h"

最后的最后，在@end前添加如下代码把table cell的高度设置为78。

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

Run The App