iOS之UITableView的使用——自定义UITableViewCell

自定义UITableViewCell的方式可分为3种：1）继承自UITableViewCell，来添加控件。2）使用动态单元格定制表格行，在IB中

设计。3）利用xib文件定义表格行。然后让UITableView加载该表格行

实例1：继承自UITableViewCell定制表格行

1）FKBookTableCell类

//FKBookTableCell.h#import <UIKit/UIKit.h>@interface FKBookTableCell : UITableViewCell@property UILabel* nameField;@property UILabel* priceField;@end//FKBookTableCell.m#import "FKBookTableCell.h"@implementation FKBookTableCell- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];    if (self) {UIColor * bgColor = [UIColor colorWithRed:0.7green:1.0 blue:0.7 alpha:1.0];// 设置该使用淡绿色背景self.contentView.backgroundColor = bgColor;// 创建一个用于显示"书名"字符串的标签UILabel* nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(5 , 5 , 70 , 20)];// 设置该UILabel显示的文本内容nameLabel.text = @"书名：";// 设置右对齐nameLabel.textAlignment = NSTextAlignmentRight;// 设置字体nameLabel.font = [UIFont boldSystemFontOfSize:17];// 设置背景色nameLabel.backgroundColor = [UIColor clearColor];// 将nameLabel添加到当前单元格中[self.contentView addSubview:nameLabel];// 创建一个用于显示"价格"字符串的标签UILabel* priceLabel = [[UILabel alloc]initWithFrame:CGRectMake(5 , 30 , 70 , 20)];// 设置该UILabel显示的文本内容priceLabel.text = @"价格：";// 设置右对齐priceLabel.textAlignment = NSTextAlignmentRight;// 设置字体priceLabel.font = [UIFont boldSystemFontOfSize:17];// 设置背景色priceLabel.backgroundColor = [UIColor clearColor];// 将priceLabel添加到当前单元格中[self.contentView addSubview:priceLabel];// 创建一个用于显示书名值的标签self.nameField = [[UILabel alloc]initWithFrame:CGRectMake(90 , 5 , 180 , 20)];// 设置左对齐self.nameField.textAlignment = NSTextAlignmentLeft;// 设置字体self.nameField.font = [UIFont boldSystemFontOfSize:18];// 设置文字颜色self.nameField.textColor = [UIColor blueColor];// 将self.nameField添加到当前单元格中[self.contentView addSubview:self.nameField];// 创建一个用于显示价格值的标签self.priceField = [[UILabel alloc]initWithFrame:CGRectMake(90 , 30 , 180 , 20)];// 设置左对齐self.priceField.textAlignment = NSTextAlignmentLeft;// 设置字体self.priceField.font = [UIFont boldSystemFontOfSize:18];// 设置文字颜色self.priceField.textColor = [UIColor blueColor];// 将self.nameField添加到当前单元格中[self.contentView addSubview:self.priceField];    }    return self;}@end

2）FKViewController类

//FKViewController.h#import <UIKit/UIKit.h>@interface FKViewController : UIViewController<UITableViewDataSource, UITableViewDelegate>@property (strong, nonatomic) IBOutlet UITableView *table;@end//FKViewController.m#import "FKViewController.h"#import <QuartzCore/QuartzCore.h>#import "FKBookTableCell.h"@implementation FKViewControllerNSArray *books;NSArray *prices;- (void)viewDidLoad{    [super viewDidLoad];// 创建、并初始化NSArray对象。books = [NSArray arrayWithObjects:@"疯狂Android讲义",@"疯狂iOS讲义", @"疯狂Ajax讲义" , @"疯狂XML讲义", nil];// 创建、并初始化NSArray对象。prices = [NSArray arrayWithObjects:@"99", @"79" , @"79" , @"69" , nil];// 为UITableView控件设置dataSource和delegateself.table.dataSource = self;self.table.delegate = self;}// 该方法返回值决定各表格行的控件。- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{// 为表格行定义一个静态字符串作为标识符static NSString* cellId = @"cellId";// 从可重用表格行的队列中取出一个表格行FKBookTableCell* cell = [tableViewdequeueReusableCellWithIdentifier:cellId];// 如果取出的表格行为nilif(cell == nil){// 创建自定义的FKBookTableCell对象cell = [[FKBookTableCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellId];}// 从IndexPath参数中获取当前行的行号NSUInteger rowNo = indexPath.row;//将单元格的边框设置为圆角cell.layer.cornerRadius = 12;cell.layer.masksToBounds = YES;// 为表格行的nameField、priceField的text设置值cell.nameField.text = [books objectAtIndex:rowNo];cell.priceField.text = [prices objectAtIndex:rowNo];return cell;}// 该方法的返回值决定指定分区内包含多少个表格行。- (NSInteger)tableView:(UITableView*)tableViewnumberOfRowsInSection:(NSInteger)section{// 由于该表格只有一个分区，直接返回books中集合元素个数代表表格的行数return books.count;}// 该方法的返回值将作为表格行的高度。- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{return 60;}@end

实例2：使用动态单元格原型定制表格行

在storyboard中设计表格行，然后再ViewController中使用，为了使用自定义的表格行中的控件，需要给控件添加tag或Identifier

//FKViewController.h#import <UIKit/UIKit.h>@interface FKViewController : UIViewController<UITableViewDataSource>@property (strong, nonatomic) IBOutlet UITableView *tableView;@end//FKViewController.m#import "FKViewController.h"@interface FKViewController ()@end@implementation FKViewControllerNSArray* books;- (void)viewDidLoad{[super viewDidLoad];self.tableView.dataSource = self;books = [NSArray arrayWithObjects:@"疯狂Android讲义",@"疯狂iOS讲义", @"疯狂Ajax讲义" , @"疯狂XML讲义", nil];}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{return books.count;}- (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath{NSInteger rowNo = indexPath.row;  // 获取行号// 根据行号的奇偶性使用不同的标识符NSString* identifier = rowNo % 2 == 0 ? @"cell1" : @"cell2";// 根据identifier获取表格行（identifier要么是cell1，要么是cell2）UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];// 获取cell内包含的Tag为1的UILabelUILabel* label = (UILabel*)[cell viewWithTag:1];label.text = [books objectAtIndex:rowNo];return cell;}@end

实例3：利用xib文件定制表格行

通过xib方式定制表格行后，接下来程序在tableView：cellForRowAtIndexPath：方法中只要调用如下方法为该UITableView注册表格行控件即可。

-registerNib：forCellReuseIdentifier：为表格控件注册自定义的表格行控件。然后可直接在UITableView维护的可重用表格行队列中获取可用的表格行，此时UITableView将可以保证该方法返回的表格行不为nil。

1、xib制作UITableViewCell

1）新建Cocoa Touch Class文件，继承自UITableViewCell勾选Also create XIB file

2）添加两个UILabel和UITextField到xib中的UITableViewCell中，并设置Cell的高度，然后给UITextField设置两个IBOutlet属性

2、xib制作UITableView

1）新建Cocoa Touch Class文件，继承自UITableView勾选Also create XIB file

2）添加UITableVIew控件到xib文件中，并添加IBOutlet属性

代码如下：

1、FKAppDelegate类

//FKAppDelegate.h#import <UIKit/UIKit.h>@class FKViewController;@interface FKAppDelegate : UIResponder <UIApplicationDelegate>@property (strong, nonatomic) UIWindow *window;@property (strong, nonatomic) FKViewController *viewController;@end//FKAppDelegate.m#import "FKAppDelegate.h"#import "FKViewController.h"@implementation FKAppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    // Override point for customization after application launch.self.viewController = [[FKViewController alloc] initWithNibName:@"FKViewController" bundle:nil];self.window.rootViewController = self.viewController;    [self.window makeKeyAndVisible];    return YES;}

2、FKBookTableCell类

//FKBookTableCell.h#import <UIKit/UIKit.h>@interface FKBookTableCell : UITableViewCell@property (strong, nonatomic) IBOutlet UILabel *nameField;@property (strong, nonatomic) IBOutlet UILabel *priceField;@end//FKBookTableCell.m#import "FKBookTableCell.h"@implementation FKBookTableCell@end

3、FKViewController类

//FKViewController.h#import <UIKit/UIKit.h>@interface FKViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>@property (strong, nonatomic) IBOutlet UITableView *table;@end//.m#import <QuartzCore/QuartzCore.h>#import "FKViewController.h"#import "FKBookTableCell.h"@interface FKViewController ()@end@implementation FKViewControllerNSArray *books;NSArray *prices;- (void)viewDidLoad{    [super viewDidLoad];// 创建、并初始化NSArray对象。books = [NSArray arrayWithObjects:@"疯狂Android讲义",@"疯狂iOS讲义", @"疯狂Ajax讲义" , @"疯狂XML讲义", nil];// 创建、并初始化NSArray对象。prices = [NSArray arrayWithObjects:@"99", @"79" , @"79" , @"69" , nil];// 为UITableView控件设置dataSource和delegateself.table.dataSource = self;self.table.delegate = self;}// 该方法返回值决定各表格行的控件。- (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath{// 为表格行定义一个静态字符串作为标示符static NSString* cellId = @"cellId";// 定义一个静态变量做旗标，用于保证仅为该表格注册一次单元格视图static BOOL isRegist = NO;if(!isRegist){// 加载*.xib界面设计文件UINib* nib = [UINib nibWithNibName:@"FKBookTableCell" bundle:nil];// 注册单元格[tableView registerNib:nib forCellReuseIdentifier:cellId];// 注册后将该旗标设为YESisRegist = YES;}FKBookTableCell* cell = [tableViewdequeueReusableCellWithIdentifier:cellId];// 从IndexPath参数中获取当前行的行号NSUInteger rowNo = indexPath.row;//将单元格的边框设置为圆角cell.layer.cornerRadius = 12;cell.layer.masksToBounds = YES;cell.nameField.text = [books objectAtIndex:rowNo];cell.priceField.text = [prices objectAtIndex:rowNo];return cell;}// 该方法的返回值决定指定分区内包含多少个表格行。- (NSInteger)tableView:(UITableView*)tableView  numberOfRowsInSection:(NSInteger)section{// 由于该表格只有一个分区，直接返回books中集合元素个数代表表格的行数return books.count;}// 该方法的返回值将作为表格行的高度。- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{return 60;}- (void)tableView: (UITableView*)tableView willDisplayCell:(UITableViewCell*)cell forRowAtIndexPath: (NSIndexPath*)indexPath{// 定义淡绿色和淡红色UIColor* greenColor = [UIColor colorWithRed:0.7green:1.0 blue:0.7 alpha:1.0];UIColor* redColor = [UIColor colorWithRed:1.0green:0.7 blue:0.7 alpha:1.0];// 根据行数的奇偶来设置不同的背景色cell.backgroundColor = indexPath.row % 2 ? greenColor : redColor;// 设置nameField、priceField的背景色（不使用颜色）    ((FKBookTableCell*)cell).nameField.backgroundColor = [UIColor clearColor];    ((FKBookTableCell*)cell).priceField.backgroundColor = [UIColor clearColor];}@end;