Objective-C 表视图-自定义单元格

最近在重新学习IOS，所以同步更新，留作笔记。如果有写的不正确的地方，烦请指摘，O(∩_∩)O谢谢。

添加单元格有两种方法：一种方法是创建单元时在程序中添加子视图，另一种方法是从nib文件中加载它们。其实也可以通过storyboard添加（方式同nib）。下面我们通过storyboard来自定义单元格。

首先，创建一个以“Single View Application”为模板的工程，在此我命名为TableViewSample,创建完成后，点击Main.storyboard,如图：





下一步就是添加UITableView到视图中，可以拖拽TableView到视图中，设置delegate和dataSource为ViewController类。由于我们只为展示表视图，所以简单化一些，将main.storyboard中的View Controller替换为已绑定好的Table View Controller。

1）删除故事板（main.storyboard）中的View Controller delete掉;

2）从对象库中拖拽Table View Controller到故事板上。如图：





现在我们只是把View Controller替换为了Table View Controller，现在的Table View Controller和类是两个没有关系的个体，我们如何去把它们关联起来呢？答案很简单，定义检查器的Class（上图中绿色框位置）改为我们要关联的类即可，在此我们依然使用ViewController类（当然也可以删除ViewController类，另创建一个继承UITableViewController的类来关联，影响不大）。

关联ViewController类的步骤如下：

1）修改ViewController的继承类为UITableViewController，并实现其协议UITableViewDelegate和UITableViewDataSource；





2）修改定义检查器的Class为ViewController。（如图，下拉列表中会自动显示所有继承自UITableViewController的类，如果没有第一步，列表中可不会显示ViewController类哦）





自此，关联结束，大家可以发现与拖拽Table View的方式不同，拖拽的Table View Controller除了Table View外还自带一个Table View Cell（单元格），你可以删除它，也可以利用它进行自定义。在此，我们利用它进行自定义，不再另外创建UITableViewCell的nib或storyboard。

Run 一下，看到什么？什么也没有，漆黑一片，原因是原有的默认的View Controller被我们删除了，我们需要将初始视图控制器设置为初期的View Controller，方法很简单：打开属性检查器，勾选“Is Initial View Controller”即可。再Run一下，展示了空白的table view。

说明：设置【Is Initial View Controller】的Controller前面会出现“→”，它表示该视图控制器为该故事板的入口。





自定义单元格：

1）创建自定义单元格类：创建一个Cocoa Touch Class类继承自UITableViewCell，在此我命名为CustomTableViewCell（因为我打算使用之前自带的cell，所以创建类过程中我没有勾选创建nib文件）

2）绑定单元格（故事板中）和CustomTableViewCell类：打开单元格的定义检查器，将Class设为CustomTableViewCell。





3）设置单元格样式为自定义：打开单元格的属性检查器，将Style设为Custom（自定义样式），默认的label等会被清空。

4）设置单元格的识别符：打开单元格的属性检查器，将Identifier设置为“CustomCell”（随意）

5）自定义单元格（布局）：根据需求布局单元格，在这里作为例子，我拖拽了Image View,Label和Switch。

6）连接输出口：注意，输出口应该连接到CustomTableViewCell而不是ViewController。







自此，我们自定义的单元格就有了。另外，使用nib的方式类似，创建CustomTableViewCell时选择创建nib文件，在nib文件上设置即可，这里不再描述，网上大部分都是这一种。

1）设置数据源：

①打开视图控制器头文件ViewController.h，声明一数组用于放置表格显示的数据；

@interface ViewController : UITableViewController<UITableViewDelegate, UITableViewDataSource>

@property (strong, nonatomic) NSArray *dataList;

@end

②给dataList赋值。和其它语言类似，表格的数据源一般不会在代码中写死，大部分是取自文件或者DB。由于这里我们重点是表视图，这里先不涉及。

@implementation ViewController

@synthesize dataList;

– (void)viewDidLoad {

[super viewDidLoad];

// Init the dataList.

self.dataList = @[@”Picture”,@”Sound”,@”Wifi”,@”Notice”];

}

2）实现协议中的需要的方法：这里只需要实现tableView:numberOfRowsInSection:和tableView:cellForRowAtIndexPath:方法，前者是设置有多少行，后者设置每行的单元格。

– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

return [self.dataList count];

}

注：这里我们需要使用自定义的单元格类，因此在ViewController.m的开始添加【#import “CustomTableViewCell.h”】。

– (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

static NSString *identifier = @”CustomCell”;

CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];

cell.customLabel.text = [self.dataList objectAtIndex:indexPath.row];

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

return cell;

}

注：identifier 的值和storyboard中自定义单元格的Identifier标识符相同。和代码创建不相同的是不用进行cell nil的判断。如果没有现存的单元格可以回收，程序会自动创造一个单元格的复制品之后返回给你，只需要提供你之前在Storyboard编辑视图中设置的标识就可以。

现在Run一下，啦啦，我们自定义的表视图就出现啦。