［转］iOS开发教程：Storyboard全解析-第一部分03

 

为原型单元格设置子类

 

我们的表格视图已经相当像模像样了，但是我并不是很喜欢使用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按钮的时候消失，不过这只是一个练习，不要太较真哦亲

接下来看些什么？

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

 

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