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