用xib创建TableViewCell，熟悉MVC模型

Leave a reply

1、效果展示

iOS 模拟器屏幕快照“2014年4月9日 下午7.30.26”

2、设计说明

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

QQ20140409-1@2x

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//
//  SACar.h
//  XibCell
//
//  Created by yusian on 14-4-9.
//  Copyright (c) 2014年 yusian. All rights reserved.
//
 
#import <Foundation/Foundation.h>
@interface SACar : NSObject
 
@property (nonatomic, copy) NSString *icon;
@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *source;
@property (nonatomic, copy) NSString *price;
 
- (id)initWithDict:(NSDictionary *)dict;
+ (id)carWithDict:(NSDictionary *)dict;
 
@end

3.2 SACar.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//
//  SACar.m
//  XibCell
//
//  Created by yusian on 14-4-9.
//  Copyright (c) 2014年 yusian. All rights reserved.
//
 
#import "SACar.h"
 
@implementation SACar
- (id)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        self.icon = dict[@"Icon"];
        self.title = dict[@"Title"];
        self.source = dict[@"Source"];
        self.price = dict[@"Price"];
    }
    return self;
}
 
+ (id)carWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}
@end

3.3 SACarCell.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//
//  SACarCell.h
//  XibCell
//
//  Created by yusian on 14-4-9.
//  Copyright (c) 2014年 yusian. All rights reserved.
//
 
#import <UIKit/UIKit.h>
@class SACar;
 
@interface SACarCell : UITableViewCell
 
@property (nonatomic, weak) IBOutlet UILabel *titleLable;
@property (nonatomic, weak) IBOutlet UILabel *priceLable;
@property (nonatomic, weak) IBOutlet UILabel *sourceLable;
@property (nonatomic, weak) IBOutlet UIImageView *iconView;
 
@property (nonatomic, strong) SACar *car;
 
+ (id)carCell;
 
+ (NSString *)ID;
 
@end

3.4 SACarCell.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//
//  SACarCell.m
//  XibCell
//
//  Created by yusian on 14-4-9.
//  Copyright (c) 2014年 yusian. All rights reserved.
//
 
#import "SACarCell.h"
#import "SACAr.h"
 
@implementation SACarCell
 
+ (id)carCell
{
    return [[NSBundle mainBundle] loadNibNamed:@"Cell" owner:nil options:nil][0];
//    UINib *nib = [UINib nibWithNibName:@"Cell" bundle:nil];
//    return [nib instantiateWithOwner:nil options:nil][0];
}
 
- (void)setCar:(SACar *)car
{
    _car = car;
    _iconView.image = [UIImage imageNamed:car.icon];
    _priceLable.text = car.price;
    _sourceLable.text = [NSString stringWithFormat:@"来源:%@", car.source];
    _titleLable.text = car.title;
}
 
+ (NSString *)ID;
{   
    return @"ID";
}
 
@end

3.5 SATableViewController.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//
//  SATableViewController.h
//  XibCell
//
//  Created by yusian on 14-4-4.
//  Copyright (c) 2014年 yusian. All rights reserved.
//
 
#import <UIKit/UIKit.h>
#import "SACar.h"
#import "SACarCell.h"
 
@interface SATableViewController : UITableViewController
 
@end

3.6 SATableViewController.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

//
//  SATableViewController.m
//  XibCell
//
//  Created by yusian on 14-4-4.
//  Copyright (c) 2014年 yusian. All rights reserved.
//
 
#import "SATableViewController.h"
 
@interface SATableViewController ()
{
    NSMutableArray *_cars;
}
 
@end
 
@implementation SATableViewController
 
#pragma mark - View加载后调用
- (void)viewDidLoad
{
    [super viewDidLoad];
 
    self.tableView.rowHeight = 80;  // 如果每行固定高度可用该属性设置cell高度
 
    NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Data.plist" ofType:nil]];    // 将plist文件数据加载到数组
 
    _cars = [NSMutableArray array]; // 初始化用来存储模型数据的数组
 
    for (NSDictionary *dict in array) {
        [_cars addObject:[SACar carWithDict:dict]];
    }   // 将模型数据加载到数组当中
 
}
 
#pragma mark - Table view data source
 
// 返回表格行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [_cars count];   // 数组长度即为表格行数
}
 
// 返回表格各行中内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 回收标记的cell，遵循封装的原则，将ID写进视图的类方法来实现
    SACarCell *cell = [tableView dequeueReusableCellWithIdentifier:[SACarCell ID]];
 
    if (nil == cell) {
        cell = [SACarCell carCell];     // 调用视图的类方法创建一个cell
    }
 
    cell.car = _cars[indexPath.row];    // 将cell对应的模型取出展示到视图中
 
    return cell;
}
 
@end

4、源代码下载：http://pan.baidu.com/s/1mgp0hpY 密码: tm29

Leave a Reply