UItableView的介绍

tableView的简单使用

• tableView是经常使用的到的一个UI控件
• 它是一个列表数据,iOS开发中最经常使用的,它继承与UIScrollView
• tableView有2种样式UITableViewStylePlain 默认和UITableViewStyleGrouped 分组 ,只能在初始化的时候设置

tableView常见属性

  //设置tableViewCell的高度
    self.tableView.rowHeight = 70;
    
    //设置tableViewCell的预估高度
    self.tableView.estimatedRowHeight = 50;
    
    //设置分组的头部高度
    self.tableView.sectionHeaderHeight = 40;
    
    //设置分组的尾部高度
    self.tableView.sectionFooterHeight = 30;

    // 分割线颜色 设置颜色为 clearColor就是隐藏分割线
    self.tableView.separatorColor = [UIColor redColor];

    // 隐藏分割线
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    // tableView有数据的时候才需要分割线
    // 开发小技巧:快速取消分割线
    
    //设置tableView的头部或者尾部视图 ,整张表的头部或者尾部 
    
     self.tableView.tableHeaderView = [[UIView alloc] init];
     
     self.tableView.tableFooterView = [[UIView alloc] init];
 

tableView显示数据

• 设置dataSource数据源
• 数据源要遵守UITableViewDataSource协议
• 数据源要实现协议中的某些方法

/**
 *  告诉tableView一共有多少组数据
 */
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

/**
 *  告诉tableView第section组有多少行
 */
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

/**
 *  告诉tableView第indexPath行显示怎样的cell
 */
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

/**
 *  告诉tableView第section组的头部标题
 */
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

/**
 *  告诉tableView第section组的尾部标题
 */
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section


/**
 *  告诉tableView侧边栏的标题数据
 */

- (nullable NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView{
    
    
    return @[@"第一个",@"第二个"];
}

// return list of section titles to display in section index view (e.g. "ABCD...Z#")
- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index{
    
    return 2;
}

展示多组数据

• 每一个分组是一个组模型,包括头部标题,尾部标题,cell上要展示的数据 模型
  • cell上的数据也是模型

组模型.png

• 注意:所有的tableView的显示都要一句模型数据,如果你想要做更改或者是删除等一般也是操作数据模型

实例

Snip20190325_2.png

• 组模型数据

/*
 组模型数据
 
 */

@interface CCGroupModel : NSObject

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

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

///数据模型 cell数据模型 存放car对象
@property (nonatomic, strong) NSArray *cars;

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

@end


//实现 .m文件

#import "CCGroupModel.h"

#import "CCCarModel.h"

@implementation CCGroupModel

+ (instancetype)groupWithDictionary:(NSDictionary *)dict {
    
    CCGroupModel *groupModel = [[self alloc] init];
    
    groupModel.header = dict[@"header"];
    groupModel.footer = dict[@"footer"];
    
    NSMutableArray *tamp = [NSMutableArray array];
    for (NSDictionary *dic in dict[@"cars"]) {
        
        CCCarModel *carModel = [CCCarModel carWithDictionary:dic];
        [tamp addObject:carModel];
    }
    
    groupModel.cars = tamp ;
    
    return groupModel;
}

@end

• 车模型数据

@interface CCCarModel : NSObject

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

///车标图片
@property (nonatomic, strong) NSString *icon;


+ (instancetype)carWithDictionary:(NSDictionary *)dic;

@end


#import "CCCarModel.h"

@implementation CCCarModel

+ (instancetype)carWithDictionary:(NSDictionary *)dic {
    CCCarModel *carModel = [[self alloc] init];
    carModel.name = dic[@"name"];
    carModel.icon = dic[@"icon"];
    
    return carModel;
}

@end

• 控制器

#import "ViewController.h"

#import "CCGroupModel.h"

#import "CCCarModel.h"

@interface ViewController ()<UITableViewDataSource>

@property (weak, nonatomic) IBOutlet UITableView *tableView;


@property (nonatomic, strong) NSArray *groupsData;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.tableView.dataSource = self;
    
    
}


//返回几个分组
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    
    
    return self.groupsData.count;
}

//每个分区返回多少个cell
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
    CCGroupModel *groupModel = self.groupsData[section];
    
    
    
    return groupModel.cars.count;
}


// 返回cell视图
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *Id = @"CELL";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:Id];
    if (cell == nil) {
        
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:Id];
    }
    
    CCGroupModel *groupModel = self.groupsData[indexPath.section];
    
    CCCarModel *carModel = groupModel.cars[indexPath.row];
    
    
    cell.textLabel.text = carModel.name;
    cell.imageView.image = [UIImage imageNamed:carModel.icon];
    
    return cell;
    
}


//返回分组的头部标题
- (nullable NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
   
    CCGroupModel *groupModel = self.groupsData[section];
    
    return groupModel.header;
    
    
}

//返回分组的尾部标题
- (nullable NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
    
    
    CCGroupModel *groupModel = self.groupsData[section];
    
    return groupModel.footer;
}




//加载数据模型
- (NSArray *)groupsData {
    if (!_groupsData) {
        
        NSString *path = [[NSBundle mainBundle] pathForResource:@"cars.plist" ofType:nil];
        
        NSArray *datas = [NSArray arrayWithContentsOfFile:path];
        
        NSMutableArray *temp = [NSMutableArray array];
        for (NSDictionary *dict in datas) {
            CCGroupModel *groupModel = [CCGroupModel groupWithDictionary:dict];
            [temp addObject:groupModel];
        }
        
        _groupsData = temp;
        
    }
    
    return _groupsData;
}

@end