为原型单元格设置子类

 

我们的表格视图已经相当像模像样了,但是我并不是很喜欢使用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。

 

Connecting the player 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"

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

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

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

Selecting the proper highlight color

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

在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];
	}
}

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

The delete button overlapping a table view cell's content

 

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

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

 

Autosizing attributes for the image view

为labels设置同样的属性。

Autosizing attributes for the labels

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

Delete button appearing with proper autosizing

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

接下来看些什么?

本站会随后推出Storyboard教程的第二部分,如果你对基础部分不是很熟悉的话,请关注appkon.com上更新的iOS开发新手教程,谢谢大家的关注。

 

原帖地址:http://www.dasheyin.com/ios_kai_fa_jiao_cheng_storyboard_quan_jie_xi_-_di_yi_bu_fen.html