自定义tableViewCell实现自定义表格（需代码实现）ui中tableviewcell设置成custom

设计自定义的原型单元格

对于很多应用来说，使用默认的单元格风格就OK了，但是我偏偏要在每一个单元格的右边加上一个一个图片来表示选手的评级，但是添加图片对于默认类型的单元格来说并不支持，我们需要自定义一个设计。

让我们转回MainStoryboard.storyboard，选中table view中的prototype cell，把它的Style attribute改为Custom，所有默认的标签都会消失。

首先把单元格变得更高一些，你可以直接拉它，也可以在大小控制器中修改数字，我在这里使用55点的高度。

从 Objects Library中拖出两个标签物体，按照之前的样式安插到单元格里，记得设置label的Highlighted颜色为白色，那样的话当单元格被选中的时候会看起来更好看一些。

之后添加一个Image View对象，将它放置在单元格的右边，设置他的宽度为81点，高度并不重要，在属性检查器中设置模式为置中。

我把标签设置为210点长以确保他不会和ImageView重合，最后整体的设计会看起来象下面这样：

由于这是一个自定义的单元格，所以我们不能够使用UITableView默认的textLabel和detailLabel来设置数据，这些属性也不再指向我们的单元格了，我们使用标签（tags）来指定标签。

将Name标签的tag设置为100，Game的设置喂101，image的设置喂102，在属性检查器里设置哦亲。

编写Player.h如下：

@interface Player : NSObject

@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *game;
@property (nonatomic, assign) int rating;

@end

编写Player.m如下：

#import "Player.h"

@implementation Player

@synthesize name;
@synthesize game;
@synthesize rating;

@end

//构造players

	players = [NSMutableArray arrayWithCapacity:20];
	Player *player = [[Player alloc] init];
	player.name = @"Bill Evans";
	player.game = @"Tic-Tac-Toe";
	player.rating = 4;
	[players addObject:player];
	player = [[Player alloc] init];
	player.name = @"Oscar Peterson";
	player.game = @"Spin the Bottle";
	player.rating = 5;
	[players addObject:player];
	player = [[Player alloc] init];
	player.name = @"Dave Brubeck";
	player.game = @"Texas Hold’em Poker";
	player.rating = 2;
	[players addObject:player];

之后打开 PlayersViewController.m ，在PlayersViewcontroller中将cellForRowatIndexPath修改为：

- (UITableViewCell *)tableView:(UITableView *)tableView
  cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
	UITableViewCell *cell = [tableView
      dequeueReusableCellWithIdentifier:@"PlayerCell"];
	Player *player = [self.players objectAtIndex:indexPath.row];
	UILabel *nameLabel = (UILabel *)[cell viewWithTag:100];
	nameLabel.text = player.name;
	UILabel *gameLabel = (UILabel *)[cell viewWithTag:101];
	gameLabel.text = player.name;
	UIImageView * ratingImageView = (UIImageView *)
      [cell viewWithTag:102];
	ratingImageView.image = [self imageForRating:player.rating];
    return cell;
}

这里是用了一个新的方法，叫做ImageRating，在 cellForRowAtIndexPath方法之前加入这个方法：

- (UIImage *)imageForRating:(int)rating
{
	switch (rating)
	{
		case 1: return [UIImage imageNamed:@"1StarSmall.png"];
		case 2: return [UIImage imageNamed:@"2StarsSmall.png"];
		case 3: return [UIImage imageNamed:@"3StarsSmall.png"];
		case 4: return [UIImage imageNamed:@"4StarsSmall.png"];
		case 5: return [UIImage imageNamed:@"5StarsSmall.png"];
	}
	return nil;
}

这就完成了，运行看看：

这和我们想象的结果并不是很符合，我们修改了原型单元格的属性和高度，但是table view却没有考虑进去，有两种方法可以修复它，我们可以改变table view的行高或者加入 heightForRowAtIndexPath 方法来修改，地一种方法更简单，我们就用他。

注意：在一下两种情况下，你应该使用 heightForRowAtIndexPath 方法：一是，你不能预先知道你的单元格的高度，二是不同的单元格会有不同的高度。

回到MainStoryboard.storyboard,在大小检查器中将高度设置为55:

通过这种方式的话，如果之前你是使用拖动而不是键入数值的方式改变高度的属性的话，则table view的数值也会自动改变。

现在运行看看，好多了吧

为原型单元格设置子类

我们的表格视图已经相当像模像样了，但是我并不是很喜欢使用tag来访问label，要是我们能够把这些lable连接到输出口，之后在回应属性中使用他们，该多好，而且不出所料，我们可以这样做。

使用 Objective-C class模板新建一个文件，命名为PlayerCell，继承UITableViewCell。

修改PlayerCell.h

@interface PlayerCell : UITableViewCell

@property (nonatomic, strong) IBOutlet UILabel *nameLabel;
@property (nonatomic, strong) IBOutlet UILabel *gameLabel;
@property (nonatomic, strong) IBOutlet UIImageView
  *ratingImageView;

@end

修改PlayerCell.m

#import "PlayerCell.h"

@implementation PlayerCell

@synthesize nameLabel;
@synthesize gameLabel;
@synthesize ratingImageView;

@end

这个类本身并不其很大的作用，只是为nameLabel、gameLabel和ratingImageView声明了属性。

回到MainStoryboard.storyboard选中原型单元格，将他的class属性修改为“PlayerCell”，现在当你向table view请求dequeueReusableCellWithIdentifier，他会返回一个PlayerCell实例而不是一个普通的UITableViewCell实例。

请注意我将这个类和reuse Indetifier的名字命名的一样，只是营卫我喜欢这样哦亲，这两个之间其实没啥关系。

现在你可以将标签和image view连接到输出口去了，选中或者将他从链接检查器拖动到table view cell。

I

请注意：要把这个control连接到table view cell而不是view controller哦亲，别选错了。

现在我们把一切都链接好了，只需要加入数据源的代码就可以了。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
	PlayerCell *cell = (PlayerCell *)[tableView
     dequeueReusableCellWithIdentifier:@"PlayerCell"];
	Player *player = [self.players objectAtIndex:indexPath.row];
	cell.nameLabel.text = player.name;
	cell.gameLabel.text = player.game;
	cell.ratingImageView.image = [self imageForRating:player.rating];
    return cell;
}

我们现在将接收到 dequeueReusableCellWithIdentifier 的控件指派到PlayerCell，只需要简单的使用已经链接labels和image view到设置好的属性上就可以了，这会让这个设计看上去更加好控制，更加简明。

当然，在PlayerCell前要引入资源：

#import "PlayerCell.h"

试着运行，你会发现其实什么都没有变化，可是我们都知道，内部已经有了变化。

在这相同的场景下面，我们可是在使用子类呢。

这里还有一些设计小窍门：第一点：一定要设置标签被选中时的颜色。

第二点，确保你加入单元格的字符大小是可以变化的，这样，当单元格大小变化时，他的内容的大小也会跟着变化，比如说：

在PlayersViewController.m中加入如下方法：

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
	if (editingStyle == UITableViewCellEditingStyleDelete)
	{
		[self.players removeObjectAtIndex:indexPath.row];
		[tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
	}
}

这个方法加入好了之后，用手指轻扫一行单元格，会出现一个删除键，试试看

Delete按钮出现在右边，遮住了一部分评级图片，怎么解决呢？

打开MainStoryBoard.storyboard，选中table view cell中的image view，在大小检查器中修改Autosizing属性，是它能够跟随上级view的边缘。

为labels设置同样的属性。

加入了这些变动之后，删除按钮如我们意料的出现了：

其实，最好的做法是让这些星星在出现delete按钮的时候消失，不过这只是一个练习，不要太较真哦亲