Xcode - storyboard_OC版 03：TableViewCell（定制 | 数据绑定：Tag） - 低头捡石頭

Xcode - storyboard_OC版 03：TableViewCell（定制 | 数据绑定：Tag）

UITableViewController

1 - 继前篇内容，你也许已经注意到了自从加入了 UITableViewController 之后，Xcode 会现实下面这样警告。从警告 Unsupported Configuration: Prototype table cells must have reuse identifiers 字面意思上不难看出：原型单元格必须有一个身份标识

2 - UITableView 默认会带有一个空白的原型单元格 UITableViewCell。我们选中 Cell 并在属性控制器中将它的 Style 改为 Subtitle，显示两行内容 Title 和 Subtitle；Cell 的 Accessory 和 Identifier 分别设置成 Disclosure Indicator 和 WarriorCell（名字自定义，但是一定不能忘记），配置标识后这将会解决 Xcode 的警告问题。最后将 Root View Controller 的 Title 命名成 Warrior

3 - 运行程序后发现什么都没改变，那是因为还没有给这个表格设置一个数据来源。新建 UITableViewController 子类 WarriorsViewController（这里我们不勾选 XIB ），回到 storyboard 中选择 Warrior Scene，在它的身份控制器中将 Custom Class 置成 WarriorsViewController，这意味着把 storyboard 中的场景和你自定义的类进行挂钩

4 - 代码配置

① 新建 Warrior 文件

 1 #import <Foundation/Foundation.h>
 2 
 3 #define FC_Base 200000+arc4random() % 100000// 战力
 4 
 5 @interface Warrior : NSObject
 6 
 7 @property(nonatomic,copy)NSString *nameStr; // 姓名
 8 @property(nonatomic,copy)NSString *fightingCapacityStr;// 战斗力
 9 @property(nonatomic,assign)int rating;      // 图下标
10 
11 @end

② 在 WarriorsViewController.m 中绑定数据

 1 #import "WarriorsViewController.h"
 2 #import "Warrior.h"
 3 @implementation WarriorsViewController{
 4     NSMutableArray *_warriorsArray;
 5 }
 6 
 7 - (void)viewDidLoad {
 8     [super viewDidLoad];
 9     // 创建数组
10     _warriorsArray = [NSMutableArray arrayWithCapacity:0];
11     
12     // 制造数据
13     Warrior *player1 = [[Warrior alloc] init];
14     player1.nameStr = @"カカロット";
15     player1.fightingCapacityStr = [NSString stringWithFormat:@"戦力：%d",FC_Base];
16     player1.rating = 1;
17     [_warriorsArray addObject:player1];
18     
19     player1 = [[Warrior alloc] init];
20     player1.nameStr = @"セクシー";
21     player1.fightingCapacityStr= [NSString stringWithFormat:@"戦力：%d",FC_Base];
22     player1.rating = 2;
23     [_warriorsArray addObject:player1];
24     
25     player1 = [[Warrior alloc] init];
26     player1.nameStr = @"ベジータ";
27     player1.fightingCapacityStr = [NSString stringWithFormat:@"戦力：%d",FC_Base];
28     player1.rating = 3;
29     [_warriorsArray addObject:player1];
30 }
31 
32 #pragma mark - Table view data source
33 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
34     
35     return 1;
36 }
37 
38 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
39     
40     return _warriorsArray.count;
41 }
42 
43 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
44     
45     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"WarriorCell" forIndexPath:indexPath];
46     
47     Warrior *player = [_warriorsArray objectAtIndex:indexPath.row];
48     cell.textLabel.text = player.nameStr;
49     cell.detailTextLabel.text = player.fightingCapacityStr;
50     return cell;
51 }
52 
53 @end

运行效果

cell 定制

1 - 在故事面板中将 cell 的 Style 改为 Custom，高度置 150，你会发现并没什么作用。这是因为没有把 TableView 考虑进去的问题，很容易造成 UI 布局错乱，所以调整出的高度往往是无效的。但是你可以设置 TableView 的高度，cell 尺寸勾选 Automatic，这样的话 cell 的高度会随着 TableView 高度的变化而变化

2 - 从 Library 中拖出两个 Label，并按如下样式安插到单元格里。把 Label 的 Highlighted 颜色置白色，那样的话当单元格被选中的时候会看起来更好看一些，命名分别为 Name、FCValue；之后添加一个 ImageView 用来展示图像

3 - 传值：使用 tag 进行传值，在属性控制器里将 Name 的 tag 置 101；FCValue 的 tag 置 102；ImageView 的 tag 置 103。在 WarriorsViewController.m 中配置代码

 1 #import "WarriorsViewController.h"
 2 #import "Warrior.h"
 3 @implementation WarriorsViewController{
 4     NSMutableArray *_warriorsArray;
 5 }
 6 
 7 - (void)viewDidLoad {
 8     [super viewDidLoad];
 9     // 创建数组
10     _warriorsArray = [NSMutableArray arrayWithCapacity:0];
11     
12     // 制造数据
13     Warrior *player1 = [[Warrior alloc] init];
14     player1.nameStr = @"カカロット";
15     player1.fightingCapacityStr = [NSString stringWithFormat:@"戦力：%d",FC_Base];
16     player1.rating = 1;
17     [_warriorsArray addObject:player1];
18     
19     player1 = [[Warrior alloc] init];
20     player1.nameStr = @"セクシー";
21     player1.fightingCapacityStr= [NSString stringWithFormat:@"戦力：%d",FC_Base];
22     player1.rating = 2;
23     [_warriorsArray addObject:player1];
24     
25     player1 = [[Warrior alloc] init];
26     player1.nameStr = @"ベジータ";
27     player1.fightingCapacityStr = [NSString stringWithFormat:@"戦力：%d",FC_Base];
28     player1.rating = 3;
29     [_warriorsArray addObject:player1];
30 }
31 
32 #pragma mark - Table view data source
33 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
34 
35     return 1;
36 }
37 
38 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
39 
40     return _warriorsArray.count;
41 }
42 
43 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
44 
45     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"WarriorCell" forIndexPath:indexPath];
46 
47     Warrior *player = [_warriorsArray objectAtIndex:indexPath.row];
48     
49     UILabel *nameLabel = (UILabel *)[cell viewWithTag:101];
50     nameLabel.text = player.nameStr;
51     UILabel *fcValueLabel = (UILabel *)[cell viewWithTag:102];
52     fcValueLabel.text = player.fightingCapacityStr;
53     UIImageView * ratingImageView = (UIImageView *)[cell viewWithTag:103];
54     ratingImageView.layer.masksToBounds = YES;// 置个圆角，好个看些
55     ratingImageView.layer.cornerRadius = 3.2;
56     ratingImageView.image = [self imageForRating:player.rating];
57     return cell;
58 }
59 
60 // 选取图片
61 - (UIImage *)imageForRating:(int)rating{
62 
63     switch (rating){
64         case 1: return [UIImage imageNamed:@"11.png"];
65         case 2: return [UIImage imageNamed:@"22.png"];
66         case 3: return [UIImage imageNamed:@"33.png"];
67         case 4: return [UIImage imageNamed:@"44.png"];
68         case 5: return [UIImage imageNamed:@"55.png"];
69     }
70     return nil;
71 }
72 
73 @end