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