iOS开发——UI进阶篇（一）UITableView，索引条，汽车数据展示案例

一、什么是UITableView

---

在iOS中，要实现展示列表数据，最常用的做法就是使用UITableView
UITableView继承自UIScrollView，因此支持垂直滚动，而且性能极佳

UITableView的两种样式
UITableViewStylePlain
UITableViewStyleGrouped

二、如何展示数据

---

 

UITableView需要一个数据源(dataSource)来显示数据

UITableView会向数据源查询一共有多少行数据以及每一行显示什么数据等

没有设置数据源的UITableView只是个空壳

凡是遵守UITableViewDataSource协议的OC对象，都可以是UITableView的数据源

tableView展示数据的过程
调用数据源的下面方法得知一共有多少组数据
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;

调用数据源的下面方法得知每一组有多少行数据
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

调用数据源的下面方法得知每一行显示什么内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

三、Cell简介

---

UITableView的每一行都是一个UITableViewCell，通过dataSource的tableView:cellForRowAtIndexPath:方法来初始化每一行

UITableViewCell内部有个默认的子视图:contentView，contentView是UITableViewCell所显示内容的父视图，可显示一些辅助指示视图

辅助指示视图的作用是显示一个表示动作的图标，可以通过设置UITableViewCell的accessoryType来显示，默认是UITableViewCellAccessoryNone(不显示辅助指示视图)，其他值如下:
UITableViewCellAccessoryDisclosureIndicator
UITableViewCellAccessoryDetailButton
UITableViewCellAccessoryDetailDisclosureButton
UITableViewCellAccessoryCheckmark

还可以通过cell的accessoryView属性来自定义辅助指示视图（比如往右边放一个开关）

四、UITableViewCell的contentView

---

contentView下默认有3个子视图
其中2个是UILabel(通过UITableViewCell的textLabel和detailTextLabel属性访问)
第3个是UIImageView(通过UITableViewCell的imageView属性访问)
UITableViewCell还有一个UITableViewCellStyle属性，用于决定使用contentView的哪些子视图，以及这些子视图在contentView中的位置
UITableViewCellStyleDefault
UITableViewCellStyleSubtitle
UITableViewCellStyleValue1
UITableViewCellStyleValue2

五、Cell的重用原理

---

iOS设备的内存有限，如果用UITableView显示成千上万条数据，就需要成千上万个UITableViewCell对象的话，那将会耗尽iOS设备的内存。要解决该问题，需要重用UITableViewCell对象

重用原理：当滚动列表时，部分UITableViewCell会移出窗口，UITableView会将窗口外的UITableViewCell放入一个对象池中，等待重用。当UITableView要求dataSource返回UITableViewCell时，dataSource会先查看这个对象池，如果池中有未使用的UITableViewCell，dataSource会用新的数据配置这个UITableViewCell，然后返回给UITableView，重新显示到窗口中，从而避免创建新对象

还有一个非常重要的问题：有时候需要自定义UITableViewCell(用一个子类继承UITableViewCell)，而且每一行用的不一定是同一种UITableViewCell，所以一个UITableView可能拥有不同类型的UITableViewCell，对象池中也会有很多不同类型的UITableViewCell，那么UITableView在重用UITableViewCell时可能会得到错误类型的UITableViewCell

解决方案：UITableViewCell有个NSString *reuseIdentifier属性，可以在初始化UITableViewCell的时候传入一个特定的字符串标识来设置reuseIdentifier(一般用UITableViewCell的类名)。当UITableView要求dataSource返回UITableViewCell时，先通过一个字符串标识到对象池中查找对应类型的UITableViewCell对象，如果有，就重用，如果没有，就传入这个字符串标识来初始化一个UITableViewCell对象

Cell的重用代码
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 1.定义一个cell的标识
static NSString *ID = @”czcell";

// 2.从缓存池中取出cell
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

// 3.如果缓存池中没有cell
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
}

六、通过代码自定义cell(cell的高度不一致)

---

1.新建一个继承自UITableViewCell的类
2.重写initWithStyle:reuseIdentifier:方法
添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中)
进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体固定的图片)
3.提供2个模型
数据模型: 存放文字数据图片数据
frame模型: 存放数据模型所有子控件的framecell的高度
4.cell拥有一个frame模型(不要直接拥有数据模型)
5.重写frame模型属性的setter方法: 在这个方法中设置子控件的显示数据和frame
6.frame模型数据的初始化已经采取懒加载的方式(每一个cell对应的frame模型数据只加载一次)

七、利用UITableView展示汽车数据案例

---

#import <UIKit/UIKit.h>
@interface ViewController : UITableViewController
@end

/*************** ViewController**********************/
#import "ViewController.h"
#import "CarGroup.h"
#import "Car.h"

#define chgID @"chgCell"

@interface ViewController ()
@property (nonatomic, copy) NSArray *cargroups;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 设置右边索引文字的颜色
    self.tableView.sectionIndexColor = [UIColor redColor];
    
    // 设置右边索引文字的背景色
    self.tableView.sectionIndexBackgroundColor = [UIColor blackColor];
    
    // 注册带有“chgCell”标识的cell
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:chgID];

}

// 重写cargroups的get方法
- (NSArray *)cargroups
{
    if (nil == _cargroups) {
        // 加载cars.plist文件
        NSString *path = [[NSBundle mainBundle] pathForResource:@"cars" ofType:@"plist"];
        NSArray *carGroupsdictArray = [NSArray arrayWithContentsOfFile:path];
    
    
        // 创建模型数组
        NSMutableArray *carGroupsM = [NSMutableArray array];
        // 字典转模型 将模型装入数组_cargroups中
        for (NSDictionary *cardict in carGroupsdictArray) {
            CarGroup *carg = [CarGroup carGroupWithdict:cardict];
            [carGroupsM addObject:carg];
        }
        _cargroups = carGroupsM;
    }
    return _cargroups;
}

// 总共多少组
- (NSInteger)numberOfSectionsInTableView:(nonnull UITableView *)tableView
{
    return self.cargroups.count;
}

// 每组多少行
- (NSInteger)tableView:(nonnull UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.cargroups[section] cars].count;
}

 // 加载每一行的cell（cell要显示的内容）
- (UITableViewCell *)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{
    // 1、从缓存池获取cell
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:chgID];
    cell.backgroundColor = [UIColor yellowColor];
    // 2、如果没找到就创建一个新的cell
//    if (nil == cell) {
//        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
//    }
 
    CarGroup *carGroups = self.cargroups[indexPath.section];
    Car *car = carGroups.cars[indexPath.row];
    
    // 3、给cell赋值
    cell.textLabel.text = car.name;
    cell.imageView.image = [UIImage imageNamed:car.icon];
    
    return cell;
}

// 设置头部内容
- (NSString *)tableView:(nonnull UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    CarGroup *carGroups = self.cargroups[section];
    return carGroups.title;
}

// 设置索引条
- (nullable NSArray<NSString *> *)sectionIndexTitlesForTableView:(nonnull UITableView *)tableView
{
    return [self.cargroups valueForKeyPath:@"title"];
}

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

@end

/*************** CarGroup**********************/
#import <UIKit/UIKit.h>

@interface CarGroup : UIView

@property (nonatomic, copy) NSString *title;
@property (nonatomic, strong) NSArray *cars;

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

@end

#import "CarGroup.h"
#import "Car.h"
@implementation CarGroup

+ (instancetype)carGroupWithdict:(NSDictionary *)dict
{
    CarGroup *carg = [[CarGroup alloc] init];
    carg.title = dict[@"title"];
    
    NSMutableArray *arrM = [NSMutableArray array];
    for (NSDictionary *cardic in dict[@"cars"]) {
        Car *car = [Car carWithDict:cardic];
        [arrM addObject:car];
    }
    carg.cars = arrM;
    
    return carg;
}

@end


/*************** Car**********************/
#import <UIKit/UIKit.h>

@interface Car : UIView

@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *icon;

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

#import "Car.h"

@implementation Car


+ (instancetype)carWithDict:(NSDictionary *)dict
{
    Car *car = [[Car alloc] init];
    [car setValuesForKeysWithDictionary:dict];

    return car;
}
@end

总结：待更新。。。。