AppCoda Tutorial#3学习笔记

在Xcode7.2中使用StoryBoard来实现UITableView

Table View是iOS app的常用组件之一。大多数App都用Table View来显示数据清单。iPhone自带的Mail app就是一个很好的例子，它用了Table View来显示用户的邮箱和邮件。Table View不仅能够显示文本数据，还能呈现图像和视频数据。YouTube和Airbnb App就是使用Table View的很好的例子。

TableViewExample

新建一个SimpleTable项目

打开Xcode,用Single View Application模板新建一个项目，点击Next,输入

Product Name : SimpleTable
Organization Name :AppCoda
Organization Identifier :com.AppCoda
Language : Objective-C
Devices : iPhone

TableViewExample

设计视图界面

选择Main.storyboard。在Object Library里选择”Table View”并把它拖进界面中。在界面中设置它的大小，使它刚刚好没覆盖状态栏。在插入”Table View”后你将得到如下界面：
TableViewExample

用模拟器运行一次app.将会得到条纹状的table view。接下去给App添加表数据。

添加表数据

先想一个问题:怎么才能告诉UITableView我这里有数据清单要显示呢？

答案是UITableViewDataSource 和UITableViewDelegate。UITableViewDataSource协议里面声明了两个方法：(tableView:cellForRowAtIndexPath和tableView:numberOfRowsInSection)，你必须在.m文件里实现它们。通过实现这两个方法，你就能告诉Table View应该显示多少行？每行都有什么数据？

UITableViewDelegate处理UITableView的显示。在以后的教程中将会继续讨论。
Okay,选择.m文件定义一个实例变量来存表数据。

@implementation ViewController
{
    NSArray *recipes;
}

在viewDidLoad:方法中添加一段代码来初始化一列菜单；

- (void)viewDidLoad {
    [super viewDidLoad];

    recipes = [NSArray arrayWithObjects:@"Egg01", @"Egg02",@"Egg03",@"Egg04",@"Egg05",@"Egg06",@"Egg07",@"Egg08",@"Egg09",@"Egg10",@"Egg11",@"Egg12",@"Egg13",@"Egg14",nil];
}

最后需要添加两个datasource方法：tableView:cellForRowAtIndexPath和tableView:numberOfRowsInSection。

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [recipes count];
}

接着实现另一个方法

- (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];
    }
    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];

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

}

下面的图解将解释UITableView和UITableDataSource的工作机制

接下去，Run一下代码。发现跟原先一样，并没有加载表数据，这是为什么呢？
还有一件事忘了！

连接DataSource和Delegate

必须建立Table View和上面两个方法的连接。按住control,点击视图界面把箭头拖到”View Controller”图标上。松手后会发现有两个选择dataSource和delegate。把其中一个选中，再重复上述动作，选中另外一个。
可以在”Connection Inspector”查看已建立的连接。
这时候Run就能看到数据了。

在Table View中添加缩图

下载图片。命名为creme_brulee.jpg。添加图片到项目根目录下。
在.m文件里添加一段代码把它放在tableView:cellForRowAtIndexPath方法里并把它放在”return cell”之前。添加后如下所示:

- (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];
    }
    cell.textLabel.text = [recipes objectAtIndex:indexPath.row];

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

}

运行后将会呈现如下效果：