iOS开发UI篇—UITableview控件简单介绍
一、基本介绍
在众多移动应⽤用中,能看到各式各样的表格数据 。
在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView，UITableView继承自UIScrollView,因此支持垂直滚动,⽽且性能极佳 。
UITableview有分组和不分组两种样式，可以在storyboard或者是用代码设置。
二、数据展示
UITableView需要⼀一个数据源(dataSource)来显示数据
UITableView会向数据源查询一共有多少行数据以及每⼀行显示什么数据等
没有设置数据源的UITableView只是个空壳
凡是遵守UITableViewDataSource协议的OC对象,都可以是UITableView的数据源
展示数据的过程：
（1）调用数据源的下面⽅法得知⼀一共有多少组数据
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;
（2）调用数据源的下面⽅法得知每一组有多少行数据
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
（3）调⽤数据源的下⾯⽅法得知每⼀⾏显示什么内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
三、代码示例
（1）能基本展示的“垃圾”代码
1 #import "NJViewController.h" 2 3 @interface NJViewController ()<UITableViewDataSource> 4 @property (weak, nonatomic) IBOutlet UITableView *tableView; 5 6 @end 7 8 @implementation NJViewController 9 10 - (void)viewDidLoad 11 { 12 [super viewDidLoad]; 13 // 设置tableView的数据源 14 self.tableView.dataSource = self; 15 16 } 17 18 #pragma mark - UITableViewDataSource 19 /** 20 * 1.告诉tableview一共有多少组 21 */ 22 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 23 { 24 NSLog(@"numberOfSectionsInTableView"); 25 return 2; 26 } 27 /** 28 * 2.第section组有多少行 29 */ 30 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 31 { 32 NSLog(@"numberOfRowsInSection %d", section); 33 if (0 == section) { 34 // 第0组有多少行 35 return 2; 36 }else 37 { 38 // 第1组有多少行 39 return 3; 40 } 41 } 42 /** 43 * 3.告知系统每一行显示什么内容 44 */ 45 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 46 { 47 NSLog(@"cellForRowAtIndexPath %d %d", indexPath.section, indexPath.row); 48 // indexPath.section; // 第几组 49 // indexPath.row; // 第几行 50 // 1.创建cell 51 UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil]; 52 53 // 2.设置数据 54 // cell.textLabel.text = @"汽车"; 55 // 判断是第几组的第几行 56 if (0 == indexPath.section) { // 第0组 57 if (0 == indexPath.row) // 第0组第0行 58 { 59 cell.textLabel.text = @"奥迪"; 60 }else if (1 == indexPath.row) // 第0组第1行 61 { 62 cell.textLabel.text = @"宝马"; 63 } 64 65 }else if (1 == indexPath.section) // 第1组 66 { 67 if (0 == indexPath.row) { // 第0组第0行 68 cell.textLabel.text = @"本田"; 69 }else if (1 == indexPath.row) // 第0组第1行 70 { 71 cell.textLabel.text = @"丰田"; 72 }else if (2 == indexPath.row) // 第0组第2行 73 { 74 cell.textLabel.text = @"马自达"; 75 } 76 } 77 78 // 3.返回要显示的控件 79 return cell; 80 81 } 82 /** 83 * 第section组头部显示什么标题 84 * 85 */ 86 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section 87 { 88 // return @"标题"; 89 if (0 == section) { 90 return @"德系品牌"; 91 }else 92 { 93 return @"日韩品牌"; 94 } 95 } 96 /** 97 * 第section组底部显示什么标题 98 * 99 */ 100 - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section 101 { 102 if (0 == section) { 103 return @"高端大气上档次"; 104 }else 105 { 106 return @"还不错"; 107 } 108 } 109 @end
实现效果：
（2）让代码的数据独立
新建一个模型
1 #import <Foundation/Foundation.h> 2 3 @interface NJCarGroup : NSObject 4 /** 5 * 标题 6 */ 7 @property (nonatomic, copy) NSString *title; 8 /** 9 * 描述 10 */ 11 @property (nonatomic, copy) NSString *desc; 12 /** 13 * 当前组所有行的数据 14 */ 15 @property (nonatomic, strong) NSArray *cars; 16 17 @end
1 #import "NJViewController.h" 2 #import "NJCarGroup.h" 3 4 @interface NJViewController ()<UITableViewDataSource> 5 @property (weak, nonatomic) IBOutlet UITableView *tableView; 6 /** 7 * 保存所有组的数据(其中每一元素都是一个模型对象) 8 */ 9 @property (nonatomic, strong) NSArray *carGroups; 10 @end 11 12 13 @implementation NJViewController 14 15 16 #pragma mark - 懒加载 17 - (NSArray *)carGroups 18 { 19 if (_carGroups == nil) { 20 // 1.创建模型 21 NJCarGroup *cg1 = [[NJCarGroup alloc] init]; 22 cg1.title = @"德系品牌"; 23 cg1.desc = @"高端大气上档次"; 24 cg1.cars = @[@"奥迪", @"宝马"]; 25 26 NJCarGroup *cg2 = [[NJCarGroup alloc] init]; 27 cg2.title = @"日韩品牌"; 28 cg2.desc = @"还不错"; 29 cg2.cars = @[@"本田", @"丰田", @"小田田"]; 30 31 NJCarGroup *cg3 = [[NJCarGroup alloc] init]; 32 cg3.title = @"欧美品牌"; 33 cg3.desc = @"价格昂贵"; 34 cg3.cars = @[@"劳斯莱斯", @"布加迪", @"小米"]; 35 // 2.将模型添加到数组中 36 _carGroups = @[cg1, cg2, cg3]; 37 } 38 // 3.返回数组 39 return _carGroups; 40 } 41 42 - (void)viewDidLoad 43 { 44 [super viewDidLoad]; 45 // 设置tableView的数据源 46 self.tableView.dataSource = self; 47 48 } 49 50 #pragma mark - UITableViewDataSource 51 /** 52 * 1.告诉tableview一共有多少组 53 */ 54 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 55 { 56 NSLog(@"numberOfSectionsInTableView"); 57 return self.carGroups.count; 58 } 59 /** 60 * 2.第section组有多少行 61 */ 62 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 63 { 64 NSLog(@"numberOfRowsInSection %d", section); 65 // 1.取出对应的组模型 66 NJCarGroup *g = self.carGroups[section]; 67 // 2.返回对应组的行数 68 return g.cars.count; 69 } 70 /** 71 * 3.告知系统每一行显示什么内容 72 */ 73 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 74 { 75 NSLog(@"cellForRowAtIndexPath %d %d", indexPath.section, indexPath.row); 76 // indexPath.section; // 第几组 77 // indexPath.row; // 第几行 78 // 1.创建cell 79 UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil]; 80 81 // 2.设置数据 82 // cell.textLabel.text = @"嗨喽"; 83 // 2.1取出对应组的模型 84 NJCarGroup *g = self.carGroups[indexPath.section]; 85 // 2.2取出对应行的数据 86 NSString *name = g.cars[indexPath.row]; 87 // 2.3设置cell要显示的数据 88 cell.textLabel.text = name; 89 // 3.返回要显示的控件 90 return cell; 91 92 } 93 /** 94 * 第section组头部显示什么标题 95 * 96 */ 97 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section 98 { 99 // return @"标题"; 100 // 1.取出对应的组模型 101 NJCarGroup *g = self.carGroups[section]; 102 return g.title; 103 } 104 /** 105 * 第section组底部显示什么标题 106 * 107 */ 108 - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section 109 { 110 // return @"标题"; 111 // 1.取出对应的组模型 112 NJCarGroup *g = self.carGroups[section]; 113 return g.desc; 114 } 115 @end
实现效果：
提示：请自行体会把数据独立出来单独处理，作为数据模型的好处。另外，把什么抽成一个模型，一定要弄清楚。
四、补充点
contentView下默认有3个⼦视图
第2个是UILabel(通过UITableViewCell的textLabel和detailTextLabel属性访问)
第3个是UIImageView(通过UITableViewCell的imageView属性访问)
UITableViewCell还有⼀个UITableViewCellStyle属性,⽤于决定使用contentView的哪些子视图,以及这些子视图在contentView中的位置
