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中每次显示都要进行创建和销毁大大的影响了性能.