用xib创建TableViewCell，熟悉MVC模型

Sian

1、效果展示



2、设计说明

2.0 准备相关展示数据，编写成plist文件
2.1 删除之前的控制器，新建一个类SATableViewController，继承UITableViewController；（MVC中的Contrller）
2.2 创建一个xib，设计一个UITableViewCell的基本样式；

2.3 创建一个类SACarCell，该类用来加载xib，并给xib中各控件赋值；（MVC中的View）
2.4 创建一个类SACar，该类用来创建数据模型；（MVC中的Model）
2.5 控制器操作：2.5.1 通过数组加载plist文件中的数据，再用模型将数据格式化；
2.5.2 实现DataSource协议的两个方法：表格行数，表格Cell内容
2.6 模型操作：
2.6.1 创建数据的各个属性；
2.6.2 实现一个类方法，将plist文件中的数据转换成模型数据；
2.7 视图操作：
2.7.1 类方法加载xib文件中的基本视图
2.7.2 xib中的各个view抽象成属性
2.7.3 将模型抽象成视图的一条属性
2.7.4 重写模型属性的set方法，让视图结合模型将数据自动展示；

3、关键代码
3.1 SACar.h

1. //
2. //  SACar.h
3. //  XibCell
4. //
5. //  Created by yusian on 14-4-9.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <Foundation/Foundation.h>
10. @interface SACar : NSObject
12. @property (nonatomic, copy) NSString *icon;
13. @property (nonatomic, copy) NSString *title;
14. @property (nonatomic, copy) NSString *source;
15. @property (nonatomic, copy) NSString *price;
17. - (id)initWithDict:(NSDictionary *)dict;
18. + (id)carWithDict:(NSDictionary *)dict;
20. @end

复制代码

3.2 SACar.m

1. //
2. //  SACar.m
3. //  XibCell
4. //
5. //  Created by yusian on 14-4-9.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SACar.h"
11. @implementation SACar
12. - (id)initWithDict:(NSDictionary *)dict
13. {
14.     if (self = [super init]) {
15.         self.icon = dict[@"Icon"];
16.         self.title = dict[@"Title"];
17.         self.source = dict[@"Source"];
18.         self.price = dict[@"Price"];
19.     }
20.     return self;
21. }
23. + (id)carWithDict:(NSDictionary *)dict
24. {
25.     return [[self alloc] initWithDict:dict];
26. }
27. @end

复制代码

3.3 SACarCell.h

1. //
2. //  SACarCell.h
3. //  XibCell
4. //
5. //  Created by yusian on 14-4-9.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <UIKit/UIKit.h>
10. @class SACar;
12. @interface SACarCell : UITableViewCell
14. @property (nonatomic, weak) IBOutlet UILabel *titleLable;
15. @property (nonatomic, weak) IBOutlet UILabel *priceLable;
16. @property (nonatomic, weak) IBOutlet UILabel *sourceLable;
17. @property (nonatomic, weak) IBOutlet UIImageView *iconView;
19. @property (nonatomic, strong) SACar *car;
21. + (id)carCell;
23. + (NSString *)ID;
25. @end

复制代码

3.4 SACarCell.m

1. //
2. //  SACarCell.m
3. //  XibCell
4. //
5. //  Created by yusian on 14-4-9.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SACarCell.h"
10. #import "SACAr.h"
12. @implementation SACarCell
14. + (id)carCell
15. {
16.     return [[NSBundle mainBundle] loadNibNamed:@"Cell" owner:nil options:nil][0];
17. //    UINib *nib = [UINib nibWithNibName:@"Cell" bundle:nil];
18. //    return [nib instantiateWithOwner:nil options:nil][0];
19. }
21. - (void)setCar:(SACar *)car
22. {
23.     _car = car;
24.     _iconView.image = [UIImage imageNamed:car.icon];
25.     _priceLable.text = car.price;
26.     _sourceLable.text = [NSString stringWithFormat:@"来源:%@", car.source];
27.     _titleLable.text = car.title;
28. }
30. + (NSString *)ID;
31. {   
32.     return @"ID";
33. }
35. @end

复制代码

3.5 SATableViewController.h

1. //
2. //  SATableViewController.h
3. //  XibCell
4. //
5. //  Created by yusian on 14-4-4.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <UIKit/UIKit.h>
10. #import "SACar.h"
11. #import "SACarCell.h"
13. @interface SATableViewController : UITableViewController
15. @end

复制代码

3.6 SATableViewController.m

1. //
2. //  SATableViewController.m
3. //  XibCell
4. //
5. //  Created by yusian on 14-4-4.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SATableViewController.h"
11. @interface SATableViewController ()
12. {
13.     NSMutableArray *_cars;
14. }
16. @end
18. @implementation SATableViewController
20. #pragma mark - View加载后调用
21. - (void)viewDidLoad
22. {
23.     [super viewDidLoad];
24.    
25.     self.tableView.rowHeight = 80;  // 如果每行固定高度可用该属性设置cell高度
26.    
27.     NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Data.plist" ofType:nil]];    // 将plist文件数据加载到数组
28.    
29.     _cars = [NSMutableArray array]; // 初始化用来存储模型数据的数组
30.    
31.     for (NSDictionary *dict in array) {
32.         [_cars addObject:[SACar carWithDict:dict]];
33.     }   // 将模型数据加载到数组当中
34.    
35. }
37. #pragma mark - Table view data source
39. // 返回表格行数
40. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
41. {
42.     return [_cars count];   // 数组长度即为表格行数
43. }
45. // 返回表格各行中内容
46. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
47. {
48.     // 回收标记的cell，遵循封装的原则，将ID写进视图的类方法来实现
49.     SACarCell *cell = [tableView dequeueReusableCellWithIdentifier:[SACarCell ID]];
50.    
51.     if (nil == cell) {
52.         cell = [SACarCell carCell];     // 调用视图的类方法创建一个cell
53.     }
54.    
55.     cell.car = _cars[indexPath.row];    // 将cell对应的模型取出展示到视图中
56.    
57.     return cell;
58. }
60. @end

复制代码

4、源代码下载：

游客，本帖隐藏的内容需要积分高于 1 才可浏览，您当前积分为 0