iOS简单表视图UITableView之自定义单元格

记录一个菜鸟的IOS学习之旅，如能帮助正在学习的你，亦枫不胜荣幸；如路过的大神如指教几句，亦枫感激涕淋！

细心的朋友可能已经注意到了，IOS学习之旅系列教程在本篇公众号的文章中，封面已经换成美女图片了，程序员的福利有木有！！！

这是亦枫将在微信公众号 [技术鸟] 的IOS系列文章中采取的路线。看文章，学技术，眼睛累了马上点击大图看美女，这难道就是传说中的养眼吗！！

iOS系统提供了多种样式的表视图单元格样式，包含了基本的图片（UIImageView）、一级标题、二级标题和拓展视图等控件。同时，我们也可以通过自定义单元格实现更为丰富的表视图样式。

iOS自定义单元格有三种基本的方式，代码实现、xib文件、故事板。本文就以上一篇文章中的例子为模板，教大家学习如何通过故事板文件自定义表视图的单元格样式。

我们在 Document Outline 窗口中选择TableView目录下面的Custom Cell文件，从控件库中拖拽一个图片控件和文本控件到设计界面TableView里面prototype cells中，如图所示：

然后创建自定义单元格类CustomCell.h和CustomCell.m文件，具体操作过程为：右击工程，选择New File选项，选择iOS —— Source —— Cocoa Touch Class模板：

下一步，输入类名，如CustomCell，父类选择UITableViewCell类，下一步完成即可：

这样，自定义单元格的.h头文件和.m实现文件就自动生成了。打开故事板文件，选择 Document Outline 窗口中的Custom Cell文件，选择右侧工具栏中的标识检测器，在class属性中选择我们刚刚新建的CustomCell类，再打开属性检测器，设置可重用标识符Identifier属性为“CustomCell”，方便代码中创建可重用单元格。

为刚才在prototype cells单元格添加的图片和文本控件设置输出口，具体怎么快捷添加输出口部分的代码可以参考《iOS学习之旅》前面写的文章，添加完成之后CustomCell.h和CustomCell.m的代码如下：

#import <UIKit/UIKit.h>
@interface CustomCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UILabel *title;
@end

#import "CustomCell.h"
@implementation CustomCell
@end

接下来就可以修改ViewController.m视图控制器中的代码了，主要是创建单元格部分，将单元格对象所属的类替换成我们自定义的CustomCell类，可重用标识符换位故事板文件中定义的Identifier属性值：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
 static NSString *identifierString = @"simpleTableViewCell";
 CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:identifierString];
// if (cell==nil) {
// cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifierString];
// }
 NSInteger rowIndex = [indexPath row];
 NSDictionary *cellDictionary = [self.simpleData objectAtIndex:rowIndex];
 cell.title.text = [cellDictionary objectForKey:@"name"];
 cell.imageView.image = [UIImage imageNamed:[cellDictionary objectForKey:@"cover"]];
 cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
 return cell;
}

这样，通过修改上篇文章中的实例代码，就实现了自定义单元格的功能，运行效果如下：

本文只是简单的设计了自定义单元格，注重于学习功能的使用，至于更为丰富的单元格样式，大家可以自己发挥想象，自由设计。