iOS開發UI篇—UITableview控件簡單介紹

iOS開發UI篇—UITableview控件簡單介紹

1、基本介紹

在衆多移動應⽤用中,能看到各式各樣的表格數據 。

在iOS中,要實現表格數據展現,最經常使用的作法就是使用UITableView，UITableView繼承自UIScrollView,所以支持垂直滾動,⽽且性能極佳 。

UITableview有分組和不分組兩種樣式，能夠在storyboard或者是用代碼設置。

2、數據展現

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;

3、代碼示例

（1）能基本展現的「垃圾」代碼

#import "NJViewController.h"

@interface NJViewController ()<UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end

@implementation NJViewController

- (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）讓代碼的數據獨立

新建一個模型

#import <Foundation/Foundation.h>

@interface NJCarGroup : NSObject
/**
* 標題
*/
@property (nonatomic, copy) NSString *title;
/**
* 描述
*/
@property (nonatomic, copy) NSString *desc;
/**
* 當前組全部行的數據
*/
@property (nonatomic, strong) NSArray *cars;

@end

#import "NJViewController.h"
#import "NJCarGroup.h"

@interface NJViewController ()<UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;
/**
* 保存全部組的數據(其中每一元素都是一個模型對象)
*/
@property (nonatomic, strong) NSArray *carGroups;
@end

@implementation NJViewController

#pragma mark - 懶加載
- (NSArray *)carGroups
{
if (_carGroups == nil) {
// 1.建立模型
NJCarGroup *cg1 = [[NJCarGroup alloc] init];
cg1.title = @"德系品牌";
cg1.desc = @"高端大氣上檔次";
cg1.cars = @[@"奧迪", @"寶馬"];

NJCarGroup *cg2 = [[NJCarGroup alloc] init];
cg2.title = @"日韓品牌";
cg2.desc = @"還不錯";
cg2.cars = @[@"本田", @"豐田", @"小田田"];

NJCarGroup *cg3 = [[NJCarGroup 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.取出對應的組模型
NJCarGroup *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取出對應組的模型
NJCarGroup *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.取出對應的組模型
NJCarGroup *g = self.carGroups[section];
return g.title;
}
/**
* 第section組底部顯示什麼標題
*
*/
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
// return @"標題";
// 1.取出對應的組模型
NJCarGroup *g = self.carGroups[section];
return g.desc;
}
@end

實現效果：

提示：請自行體會把數據獨立出來單獨處理，做爲數據模型的好處。另外，把什麼抽成一個模型，必定要弄清楚。

4、補充點

contentView下默認有3個⼦視圖

第2個是UILabel(經過UITableViewCell的textLabel和detailTextLabel屬性訪問)

第3個是UIImageView(經過UITableViewCell的imageView屬性訪問) 

 UITableViewCell還有⼀個UITableViewCellStyle屬性,⽤於決定使用contentView的哪些子視圖,以及這些子視圖在contentView中的位置