为原型单元格设置子类
我们的表格视图已经相当像模像样了,但是我并不是很喜欢使用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的名字命名的一样,只是营卫我喜欢这样哦亲,这两个之间其实没啥关系。
现在你可以将标签和p_w_picpath view连接到输出口去了,选中或者将他从链接检查器拖动到table view cell。
I
请注意:要把这个control连接到table view cell而不是view controller哦亲,别选错了。
现在我们把一切都链接好了,只需要加入数据源的代码就可以了。
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:( *)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.p_w_picpath = [self p_w_picpathForRating:player.rating]; return cell;} |
我们现在将接收到 dequeueReusableCellWithIdentifier 的控件指派到PlayerCell,只需要简单的使用已经链接labels和p_w_picpath view到设置好的属性上就可以了,这会让这个设计看上去更加好控制,更加简明。
当然,在PlayerCell前要引入资源:
#import "PlayerCell.h" |
试着运行,你会发现其实什么都没有变化,可是我们都知道,内部已经有了变化。
在这相同的场景下面,我们可是在使用子类呢。
这里还有一些设计小窍门:第一点:一定要设置标签被选中时的颜色。
第二点,确保你加入单元格的字符大小是可以变化的,这样,当单元格大小变化时,他的内容的大小也会跟着变化,比如说:
在PlayersViewController.m中加入如下方法:
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:( *)indexPath{ if (editingStyle == UITableViewCellEditingStyleDelete) { [self.players removeObjectAtIndex:indexPath.row]; [tableView deleteRowsAtIndexPaths:[ arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade]; }} |
这个方法加入好了之后,用手指轻扫一行单元格,会出现一个删除键,试试看
Delete按钮出现在右边,遮住了一部分评级图片,怎么解决呢?
打开MainStoryBoard.storyboard,选中table view cell中的p_w_picpath 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