- 在iOS開發(fā)中UITableView可以說是使用最廣泛的控件地沮，我們平時使用的軟件中到處都可以看到它的影子，類似于微信、QQ即硼、新浪微博等軟件都有用到UITableView。
UITableView的創(chuàng)建
#import "ViewController.h"
// 定義一個宏作為cell的重用池
#define kTableViewCellReuse @"reuse"
@interface ViewController ()<UITableViewDelegate, UITableViewDataSource> // tableView的兩個協(xié)議
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 創(chuàng)建tableView, 并讓其與屏幕大小一樣
UITableView *tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStyleGrouped];
[self.view addSubview:tableView];
tableView.delegate = self;
tableView.dataSource = self;
// 注冊tableViewCell
[tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:kTableViewCellReuse];
}
#pragma mark - tableView的dataSource協(xié)議
// 使其具有五個分區(qū)
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 5;
}
// 每個分區(qū)里面含有五個cell
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 5;
}
// 在這個協(xié)議方法里面給cell賦值
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kTableViewCellReuse];
cell.textLabel.text = @"這是一個cell";
return cell;
}
tableView的創(chuàng)建需要設(shè)置兩個參數(shù), 一個是frame, 我們就不多說了, 還有一個是style, 這個style是個枚舉, 它總共有兩種style, 如下所示屡拨。
typedef NS_ENUM(NSInteger, UITableViewStyle) {
UITableViewStylePlain, // regular table view
UITableViewStyleGrouped // preferences style table view
};
下面兩張圖分別表示了UITableViewStylePlain和UITableViewStyleGrouped的顯示樣式
UITableViewStylePlain.png
UITableViewStyleGrouped.png
UITableView的頭視圖和尾視圖
// 創(chuàng)建頭視圖View
UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 100)];
headView.backgroundColor = [UIColor redColor];
// 創(chuàng)建尾視圖View
UIView *footView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 100)];
// 將兩個View分別放在頭視圖和尾視圖上
tableView.tableHeaderView = headView;
tableView.tableFooterView = footView;
效果圖如圖所示, 一般我們都是在頭視圖上添加輪播圖等...
紅色部分即為tableView的頭視圖
如圖的藍(lán)綠色即為tableView的尾視圖
UITableViewCellStyle
- UITableView中每行數(shù)據(jù)都是一個UITableViewCell只酥，在這個控件中為了顯示更多的信息，iOS已經(jīng)在其內(nèi)部設(shè)置好了多個子控件以供開發(fā)者使用呀狼。
- 如果我們查看UITableViewCell的頭文件就可以發(fā)現(xiàn)在其內(nèi)部有一個UIView控件（contentView裂允，作為其他元素的父視圖）、兩個UILable控件（textLabel哥艇、detailTextLabel）绝编、一個UIImage控件（imageView），分別用于容器、顯示內(nèi)容十饥、詳情和圖片窟勃。
- 這些控件不一定要使用, 因?yàn)槲覀兛梢宰远xtableViewCell來實(shí)現(xiàn)一些系統(tǒng)做不了的事情, 這些控件的布局屬性有UItableViewCellStyle進(jìn)行設(shè)置.比如以下代碼.
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:@"reuse"];
- 上面的代碼是UITableViewCell的初始化方法, 可以通過其設(shè)置UITableViewCellStyle, 它是一個枚舉值:
typedef NS_ENUM(NSInteger, UITableViewCellStyle) {
UITableViewCellStyleDefault, // 左側(cè)顯示textLabel（不顯示detailTextLabel），imageView可選（顯示在最左邊）
UITableViewCellStyleValue1, // 左側(cè)顯示textLabel逗堵、右側(cè)顯示detailTextLabel（默認(rèn)藍(lán)色）秉氧，imageView可選（顯示在最左邊）
UITableViewCellStyleValue2, // 左側(cè)依次顯示textLabel(默認(rèn)藍(lán)色)和detailTextLabel，imageView可選（顯示在最左邊）
UITableViewCellStyleSubtitle // 左上方顯示textLabel蜒秤，左下方顯示detailTextLabel（默認(rèn)灰色）,imageView可選（顯示在最左邊）
};
下面介紹幾個常用的tableView的協(xié)議方法
#pragma mark - 設(shè)置每行高度（每行高度可以不一樣, 通過判斷實(shí)現(xiàn)）
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 45;
}
#pragma mark - 設(shè)置尾部標(biāo)題內(nèi)容高度
-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
return 40;
}
#pragma mark - 返回每組頭標(biāo)題名稱
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
NSString *headTitle = [NSString stringWithFormat:@"第%ld個分區(qū)的頭視圖", section];
return headTitle;
}
#pragma mark - 返回每組尾部說明
-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
NSString *footTitle = [NSString stringWithFormat:@"第%ld個分區(qū)的尾視圖", section];
return footTitle;
}
#pragma mark - 返回每組標(biāo)題索引
-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView{
NSMutableArray *indexsArray = [[NSMutableArray alloc]init];
indexsArray = @[@"A", @"B", @"C", @"D", @"E"].mutableCopy;
return indexsArray;
}
#pragma mark - 設(shè)置分組頭視圖標(biāo)題內(nèi)容高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
// 通過section的不同可以設(shè)置每個頭視圖標(biāo)題的高度
if(section==0) {
return 50;
}
return 40;
}
#pragma mark - 設(shè)置每行(Row)的高度（每行高度可以不一樣）
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 45;
}
#pragma mark - 設(shè)置尾部說明內(nèi)容高度(每個尾視圖高度可以不同)
-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
return 40;
}
#pragma mark - tableView的點(diǎn)擊方法
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"點(diǎn)擊了第%ld分區(qū)的第%ld個cell", indexPath.section, indexPath.row);
}
設(shè)置每個分區(qū)頭視圖和尾視圖的View
#pragma mark - 返回每組尾視圖的View
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
UIView *footView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
footView.backgroundColor = [UIColor greenColor];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
label.text = @"這個是每個分區(qū)的尾視圖的label";
// 判斷當(dāng)?shù)谝粋€分區(qū)的時候, 顯示的是footView, 其它的是label
if (section == 0) {
return footView;
} else {
return label;
}
}
#pragma mark - 返回每組頭視圖的View
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
headView.backgroundColor = [UIColor blueColor];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
label.text = @"這個是每個分區(qū)的頭視圖的label";
// 判斷當(dāng)?shù)谝粋€分區(qū)的時候, 顯示的是headView, 其它的是label
if (section == 0) {
return headView;
} else {
return label;
}
}
下面我們看一下效果
tableView的頭視圖和尾視圖自定義view.gif
就寫到這里了, 希望有錯誤的大家指出, 互相學(xué)習(xí)互相進(jìn)步, 以后我還會對應(yīng)的寫一些關(guān)于UITableView的內(nèi)容, 歡迎大家一起討論學(xué)習(xí)汁咏。
