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

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

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

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

1）FKBookTableCell类

//FKBookTableCell.h
#import 

@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.7
			green: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 

@interface FKViewController : UIViewController
@property (strong, nonatomic) IBOutlet UITableView *table;
@end

//FKViewController.m
#import "FKViewController.h"
#import 
#import "FKBookTableCell.h"


@implementation FKViewController
NSArray *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和delegate
	self.table.dataSource = self;
	self.table.delegate = self;
}

// 该方法返回值决定各表格行的控件。
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
	// 为表格行定义一个静态字符串作为标识符
	static NSString* cellId = @"cellId";
	// 从可重用表格行的队列中取出一个表格行
	FKBookTableCell* cell = [tableView
		dequeueReusableCellWithIdentifier:cellId];
	// 如果取出的表格行为nil
	if(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*)tableView
	numberOfRowsInSection:(NSInteger)section
{
	// 由于该表格只有一个分区，直接返回books中集合元素个数代表表格的行数
	return books.count;
}
// 该方法的返回值将作为表格行的高度。
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:
	(NSIndexPath *)indexPath
{
	return 60;
}
@end

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

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

//FKViewController.h
#import 

@interface FKViewController : UIViewController
@property (strong, nonatomic) IBOutlet UITableView *tableView;

@end


//FKViewController.m
#import "FKViewController.h"
@interface FKViewController ()

@end

@implementation FKViewController

NSArray* 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 *)tableView
	cellForRowAtIndexPath:(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的UILabel
	UILabel* 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 

@class FKViewController;

@interface FKAppDelegate : UIResponder 

@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 

@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 

@interface FKViewController : UIViewController 
@property (strong, nonatomic) IBOutlet UITableView *table;

@end


//.m
#import 
#import "FKViewController.h"
#import "FKBookTableCell.h"
@interface FKViewController ()

@end

@implementation FKViewController
NSArray *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和delegate
	self.table.dataSource = self;
	self.table.delegate = self;
}

// 该方法返回值决定各表格行的控件。
- (UITableViewCell *)tableView:(UITableView *)tableView
	cellForRowAtIndexPath:(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];
		// 注册后将该旗标设为YES
		isRegist = YES;
	}
	FKBookTableCell* cell = [tableView
		dequeueReusableCellWithIdentifier: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.7
		green:1.0 blue:0.7 alpha:1.0];
	UIColor* redColor = [UIColor colorWithRed:1.0
		green: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;