UI 一一 UITableView多组和单组数据展示案例

多组数据展示

项目需求： 
通过tableView展示一组汽车数据，需要有汽车的名字，汽车的logo，并且有头部标题索引。 
项目效果: 



项目整体思路： 
（1）首先通过storyboard创建一个UITableView视图并且和控制器建立联系。 
（2）导入用到的素材图片和plist文件。 
（3）建立ZYCar的数据模型 
（4）建立ZYCarGroup数据模型 
（5）进行相应的字典转模型操作 
（6）在控制器中遵守数据源协议，设置数据源对象，实现数据源方法。

代码实现过程：

ZYCar模型

@interface ZYCar : NSObject

/** 图标的名字 */
@property (nonatomic, copy) NSString *icon;

/** 车的名字 */
@property (nonatomic, copy) NSString *name;

// 提供快速创建车模型的方法
//+ (instancetype)carWithName : (NSString *)name icon :(NSString *)icon;

+ (instancetype)carWithDict : (NSDictionary *)dict;

@end

@implementation ZYCar

//+ (instancetype)carWithName:(NSString *)name icon:(NSString *)icon
//{
// // 创建车对象
// ZYCar *car = [[self alloc] init];
// car.name = name;
// car.icon = icon;
//
// return car;
//}

+ (instancetype)carWithDict:(NSDictionary *)dict
{
//创建车对象
ZYCar *car = [[ZYCar alloc] init];
car.name = dict[@"name"];
car.icon = dict[@"icon"];

return car;
}

@end


ZYCarGroup模型
@interface ZYCarGroup : NSObject

/** 头部标题 */
@property (nonatomic, copy) NSString *header;

/** 尾部标题 */
@property (nonatomic, copy) NSString *footer;

/** 每一组所有的车 (车模型)*/
@property(nonatomic,strong)NSArray * cars;

+ (instancetype)carGroupWithDict :(NSDictionary *)dict;

@end

#import "ZYCar.h"

@implementation ZYCarGroup

+ (instancetype)carGroupWithDict:(NSDictionary *)dict
{
ZYCarGroup *group = [[self alloc] init];
group.header = dict[@"header"];
group.footer = dict[@"footer"];

// 因为cars这个属性中装的都是字典.我们希望把这些字典转换为模型.

NSMutableArray *temp = [NSMutableArray array];
// 取出cars中的字典
for (NSDictionary *carDict in dict[@"cars"]) {
// 把字典转换为模型
ZYCar *car = [ZYCar carWithDict : carDict];
// 把所有的车模型都放到temp数组中
[temp addObject:car];
}
group.cars = temp;

return group;
}

@end


ViewController.h文件

#import "ViewController.h"
#import "ZYCarGroup.h"
#import "ZYCar.h"

@interface ViewController () <UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;

/** 所有的组模型(所有的车)  */
@property (nonatomic,strong) NSArray *carGroups;

@end

@implementation ViewController
/********************************************************
1> plist解析:
以后遇到像这种复杂的plist,一层一层的往下解析.
最终的目的就是将所有的字典转成模型.
如果plist中字典在一个数组中,将来转出来的模型也放在一个数组中.
也就是将字典数组转成模型数组.

2> plist的好处:方便管理数据
*******************************************************/
// 懒加载
- (NSArray *)carGroups
{
if (_carGroups == nil) {

//1. 加载plist文件
NSString *path = [[NSBundle mainBundle] pathForResource:@"cars" ofType:@"plist"];
NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];

//2. 字典数组转为模型数组
// 创建一个模型数组
NSMutableArray *tempArray = [NSMutableArray array];
//2.1 取出所有的字典
for (NSDictionary *carGroupdict in dictArray) {
ZYCarGroup *group = [ZYCarGroup carGroupWithDict :carGroupdict];
[tempArray addObject:group];    //把模型添加到这个数组中
}
self.carGroups = tempArray;

}
return  _carGroups;
}

- (void)viewDidLoad {
[super viewDidLoad];

// 设置数据源
self.tableView.dataSource = self;

}

#pragma mark - UITableViewDataSource

/** 有多少组数据 */
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return self.carGroups.count;
}

/** 每一组中有多少行 */
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
// 取出第section组的组模型
ZYCarGroup *group = self.carGroups[section];
return group.cars.count;
}

/** 每一行显示的内容 */
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 1.设置一个重用标识
static NSString *ID = @"wine";
UITableViewCell *cell= [tableView dequeueReusableCellWithIdentifier:ID];

if (cell == nil) {
cell = [[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
// 设置cell右边的指示样式
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
}

// 根据indexPath.secton这组的组模型
ZYCarGroup *group = self.carGroups[indexPath.section];
// 根据indexPath.row对应的车模型
ZYCar *car = group.cars[indexPath.row];

// 设置数据
cell.textLabel.text = car.name;
cell.imageView.image = [UIImage imageNamed:car.icon];

return cell;
}

/**
告诉tableView每一组的头部标题
*/
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
ZYCarGroup *group = self.carGroups[section];
return group.header;
}

/**
告诉tableView每一组的尾部标题
*/
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
ZYCarGroup *group = self.carGroups[section];
return group.footer;
}

@end

单组数据展示

单组数据相比多组数据更容易些，在字典转模型时可以直接用KVC的方式快速进行转化,其他步骤和多组数据展示一样。

项目需求： 
完成类似团购的tableView页面的展示，要求在页面上有图片，描述，价格等。 

项目效果图: 



实现思路： 
（1）首先通过storyboard创建一个UITableView视图并且和控制器建立联系。 
（2）导入用到的素材图片和plist文件。 
（3）建立ZYWine的数据模型 
（4）进行相应的字典转模型操作 
（5）在控制器中遵守数据源协议，设置数据源对象，实现数据源方法。

代码实现过程：

ZYWine文件

@interface ZYWine : NSObject

/** 名称 */
@property (nonatomic, copy) NSString *name;

/** 图标名 */
@property (nonatomic, copy) NSString *image;

/** 价格 */
@property (nonatomic, copy) NSString *money;

+ (instancetype)wineWithDict : (NSDictionary *)dict;

@end

@implementation ZYWine

+ (instancetype)wineWithDict:(NSDictionary *)dict
{
ZYWine *wine = [[ZYWine alloc] init];
[wine setValuesForKeysWithDictionary:dict];

// 设置数据
wine.image = dict[@"image"];
wine.name = dict[@"name"];
wine.money = dict[@"money"];

return wine;
}

@end

ViewController.h

#import "ViewController.h"
#import "ZYWine.h"

@interface ViewController () <UITableViewDataSource>

/** 所有酒的模型数组 */
@property (nonatomic,strong) NSArray *wineArray;

@end

@implementation ViewController

- (NSArray *)wineArray
{
if (_wineArray == nil) {
// 加载plist文件
NSString *path = [[NSBundle mainBundle] pathForResource:@"wine" ofType:@"plist"];
NSArray *array = [NSArray arrayWithContentsOfFile: path];

// 把数组中的字典转换为酒模型
NSMutableArray *tempArray = [NSMutableArray array];
for (NSDictionary *wineDict in array) {
ZYWine *wineMoel = [ZYWine wineWithDict:wineDict];
// 把所有的酒模型装到可变数组中
[tempArray addObject:wineMoel];

}
self.wineArray = tempArray;
}
return _wineArray;
}

- (void)viewDidLoad {
[super viewDidLoad];

}

#pragma -mark UITableViewDataSource
// 有多少组数据
// 如果不实现默认就是一组
//- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
//{
//    return 1;
//}

// section == 0
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.wineArray.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];

cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

// 取出indexPath 对应的酒模型
ZYWine *wine = self.wineArray[indexPath.row];

//设置数据
cell.textLabel.text = wine.name;
cell.imageView.image = [UIImage imageNamed:wine.image];
cell.detailTextLabel.text = [NSString stringWithFormat:@"¥%@",wine.money];
cell.detailTextLabel.textColor = [UIColor orangeColor];
return cell;
}

@end

完成了以上代码就实现了单组数据的展示，但是性能比较差，在UITableViewCell中每次显示都要进行创建和销毁大大的影响了性能.