- 版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。
一、基本介紹
在眾多移動(dòng)應(yīng)?用中,能看到各式各樣的表格數(shù)據(jù) 。
在iOS中,要實(shí)現(xiàn)表格數(shù)據(jù)展示,最常用的做法就是使用UITableView，UITableView繼承自UIScrollView,因此支持垂直滾動(dòng),?且性能極佳 。
UITableview有分組和不分組兩種樣式，可以在storyboard或者是用代碼或者是Xib設(shè)置。
二、數(shù)據(jù)展示
UITableView需要?一個(gè)數(shù)據(jù)源(dataSource)來(lái)顯示數(shù)據(jù)
UITableView會(huì)向數(shù)據(jù)源查詢一共有多少行數(shù)據(jù)以及每?行顯示什么數(shù)據(jù)等
沒(méi)有設(shè)置數(shù)據(jù)源的UITableView只是個(gè)空殼
凡是遵守UITableViewDataSource協(xié)議的OC對(duì)象,都可以是UITableView的數(shù)據(jù)源
展示數(shù)據(jù)的過(guò)程：
（1）調(diào)用數(shù)據(jù)源的下面?法得知?一共有多少組數(shù)據(jù)
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;
（2）調(diào)用數(shù)據(jù)源的下面?法得知每一組有多少行數(shù)據(jù)
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
（3）調(diào)?數(shù)據(jù)源的下??法得知每??顯示什么內(nèi)容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
三、代碼示例
- （1）能基本展示的“垃圾”代碼
#import "JBViewController.h"
@interface JBViewController ()<UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@end
@implementation JBViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 設(shè)置tableView的數(shù)據(jù)源
self.tableView.dataSource = self;
}
#pragma mark - UITableViewDataSource
/**
* 1.告訴tableview一共有多少組
*/
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
NSLog(@"numberOfSectionsInTableView");
return 2;
}
/**
* 2.第section組有多少行
*/
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
NSLog(@"numberOfRowsInSection %d", section);
if (0 == section) {
// 第0組有多少行
return 2;
}else
{
// 第1組有多少行
return 3;
}
}
/**
* 3.告知系統(tǒng)每一行顯示什么內(nèi)容
*/
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"cellForRowAtIndexPath %d %d", indexPath.section, indexPath.row);
// indexPath.section; // 第幾組
// indexPath.row; // 第幾行
// 1.創(chuàng)建cell
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
// 2.設(shè)置數(shù)據(jù)
// cell.textLabel.text = @"汽車(chē)";
// 判斷是第幾組的第幾行
if (0 == indexPath.section) { // 第0組
if (0 == indexPath.row) // 第0組第0行
{
cell.textLabel.text = @"奧迪";
}else if (1 == indexPath.row) // 第0組第1行
{
cell.textLabel.text = @"寶馬";
}
}else if (1 == indexPath.section) // 第1組
{
if (0 == indexPath.row) { // 第0組第0行
cell.textLabel.text = @"本田";
}else if (1 == indexPath.row) // 第0組第1行
{
cell.textLabel.text = @"豐田";
}else if (2 == indexPath.row) // 第0組第2行
{
cell.textLabel.text = @"馬自達(dá)";
}
}
// 3.返回要顯示的控件
return cell;
}
/**
* 第section組頭部顯示什么標(biāo)題
*
*/
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
// return @"標(biāo)題";
if (0 == section) {
return @"德系品牌";
}else
{
return @"日韓品牌";
}
}
/**
* 第section組底部顯示什么標(biāo)題
*
*/
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
if (0 == section) {
return @"高端大氣上檔次";
}else
{
return @"還不錯(cuò)";
}
}
@end```
- （2）讓代碼的數(shù)據(jù)獨(dú)立
新建一個(gè)模型:
```objc
#import <Foundation/Foundation.h>
@interface JBCarGroup : NSObject
/**
* 標(biāo)題
*/
@property (nonatomic, copy) NSString *title;
/**
* 描述
*/
@property (nonatomic, copy) NSString *desc;
/**
* 當(dāng)前組所有行的數(shù)據(jù)
*/
@property (nonatomic, strong) NSArray *cars;
@end```
```objc
#import "JBViewController.h"
#import "JBCarGroup.h"
@interface JBViewController ()<UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;
/**
* 保存所有組的數(shù)據(jù)(其中每一元素都是一個(gè)模型對(duì)象)
*/
@property (nonatomic, strong) NSArray *carGroups;
@end
@implementation JBViewController
#pragma mark - 懶加載
- (NSArray *)carGroups
{
if (_carGroups == nil) {
// 1.創(chuàng)建模型
JBCarGroup *cg1 = [[JBCarGroup alloc] init];
cg1.title = @"德系品牌";
cg1.desc = @"高端大氣上檔次";
cg1.cars = @[@"奧迪", @"寶馬"];
JBCarGroup *cg2 = [[JBCarGroup alloc] init];
cg2.title = @"日韓品牌";
cg2.desc = @"還不錯(cuò)";
cg2.cars = @[@"本田", @"豐田", @"小田田"];
JBCarGroup *cg3 = [[JBCarGroup alloc] init];
cg3.title = @"歐美品牌";
cg3.desc = @"價(jià)格昂貴";
cg3.cars = @[@"勞斯萊斯", @"布加迪", @"小米"];
// 2.將模型添加到數(shù)組中
_carGroups = @[cg1, cg2, cg3];
}
// 3.返回?cái)?shù)組
return _carGroups;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// 設(shè)置tableView的數(shù)據(jù)源
self.tableView.dataSource = self;
}
#pragma mark - UITableViewDataSource
/**
* 1.告訴tableview一共有多少組
*/
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
NSLog(@"numberOfSectionsInTableView");
return self.carGroups.count;
}
/**
* 2.第section組有多少行
*/
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
NSLog(@"numberOfRowsInSection %d", section);
// 1.取出對(duì)應(yīng)的組模型
JBCarGroup *g = self.carGroups[section];
// 2.返回對(duì)應(yīng)組的行數(shù)
return g.cars.count;
}
/**
* 3.告知系統(tǒng)每一行顯示什么內(nèi)容
*/
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"cellForRowAtIndexPath %d %d", indexPath.section, indexPath.row);
// indexPath.section; // 第幾組
// indexPath.row; // 第幾行
// 1.創(chuàng)建cell
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
// 2.設(shè)置數(shù)據(jù)
// cell.textLabel.text = @"嗨嘍";
// 2.1取出對(duì)應(yīng)組的模型
JBCarGroup *g = self.carGroups[indexPath.section];
// 2.2取出對(duì)應(yīng)行的數(shù)據(jù)
NSString *name = g.cars[indexPath.row];
// 2.3設(shè)置cell要顯示的數(shù)據(jù)
cell.textLabel.text = name;
// 3.返回要顯示的控件
return cell;
}
/**
* 第section組頭部顯示什么標(biāo)題
*
*/
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
// return @"標(biāo)題";
// 1.取出對(duì)應(yīng)的組模型
JBJCarGroup *g = self.carGroups[section];
return g.title;
}
/**
* 第section組底部顯示什么標(biāo)題
*
*/
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
// return @"標(biāo)題";
// 1.取出對(duì)應(yīng)的組模型
JBCarGroup *g = self.carGroups[section];
return g.desc;
}
@end```
- 實(shí)現(xiàn)效果：
>提示：請(qǐng)自行體會(huì)把數(shù)據(jù)獨(dú)立出來(lái)單獨(dú)處理，作為數(shù)據(jù)模型的好處。另外，把什么抽成一個(gè)模型，一定要弄清楚。
###四、補(bǔ)充點(diǎn)
> contentView下默認(rèn)有3個(gè)?視圖:
>第2個(gè)是UILabel(通過(guò)UITableViewCell的textLabel和detailTextLabel屬性訪問(wèn))
>第3個(gè)是UIImageView(通過(guò)UITableViewCell的imageView屬性訪問(wèn))
> UITableViewCell還有?個(gè)UITableViewCellStyle屬性,?于決定使用contentView的哪些子視圖,以及這些子視圖在contentView中的位置
