一、表視圖的介紹
1二跋、表視圖和其他視圖一樣战惊,它是iOS中最重要的試圖,很多應(yīng)用程序都會(huì)使用到扎即,表只是一個(gè)容器吞获,要想顯示內(nèi)容,必須提供信息谚鄙。
2各拷、表試圖里面可以放很多行信息,使用表視圖可以顯示一個(gè)單元格列表闷营,每個(gè)單元格列表都包含大量的信息烤黍,但仍然是一個(gè)整體。并且可以將表視圖劃分為多個(gè)區(qū)(section)傻盟,以遍從視覺(jué)上將信息分組速蕊。表視圖控制器是一種只能顯示表視圖的標(biāo)準(zhǔn)視圖控制器,可以在表視圖占據(jù)整個(gè)視圖時(shí)使用這種控制器莫杈。
3互例、表視圖的兩種風(fēng)格(或者說(shuō)外觀)
1)普通風(fēng)格(或者叫無(wú)格式,它不像分組表那樣在視覺(jué)上將各個(gè)區(qū)分開(kāi)筝闹,但通常帶可觸摸的索引(類(lèi)似于通訊錄)媳叨,有時(shí)又稱他們?yōu)樗饕恚?
UITableViewStylePlain(段里面較多數(shù)據(jù)可以保持段頭保持不動(dòng))
2)分組風(fēng)格(分組)
UITableViewStyleGrouped
3)UITableViewStylePlain和UITableViewStyleGrouped腥光。這兩者操作起來(lái)其實(shí)并沒(méi)有本質(zhì)區(qū)別,只是后者按分組樣式顯示前者按照普通樣式顯示而已糊秆。
二武福、表視圖的基本結(jié)構(gòu)
1、表視圖有表頭痘番、表尾捉片、中間一連串單元格試圖組成 (表頭,設(shè)置單元格視圖汞舱,表尾)
1)設(shè)置表頭 tableHeaderView (其實(shí)就是建一個(gè)label)
例如 :給tableView設(shè)置表頭
UILabel *headerLable = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 60)];
headerLable.textAlignment = NSTextAlignmentCenter;//表頭設(shè)置在中間
headerLable.text = @"五期聯(lián)系人";
headerLable.backgroundColor = [UIColor cyanColor];
tableView.tableHeaderView = headerLable;
2)設(shè)置單元格試圖(每個(gè)單元格都有獨(dú)特的標(biāo)示符伍纫,也成為重標(biāo)示符,(reuse)用于在編譯時(shí)引用單元格昂芜;配置表視圖時(shí)莹规,必須使用這些標(biāo)示符)
UITableViewCell,單元格也可以分段顯示泌神,每一段都可以通過(guò)代理設(shè)置段頭和段尾
3)設(shè)置表尾 tableFooterView
例如:給tableView設(shè)置表尾
UILabel *footterLable = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 60)];
footterLable.textAlignment = NSTextAlignmentCenter;
footterLable.text = @"未來(lái)由我創(chuàng)良漱,愛(ài)拼才會(huì)贏.";
footterLable.backgroundColor = [UIColor clearColor];
tableView.tableFooterView = footterLable;
- tableView的常用屬性和方法(每個(gè)屬性都有舉例)如果是建立的UITabelView 表達(dá)時(shí)用 它的對(duì)象加 屬性名字,如果是基于UITableViewController欢际,則運(yùn)用屬性直接用self.加屬性名字
1. 設(shè)置表視圖分割線風(fēng)格
@property(nonatomic) UITableViewCellSeparatorStyle separatorStyle;
例如:
self.tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
self.tableView.separatorColor = [UIColor cyanColor];
2. 設(shè)置表視圖分割線顏色母市,默認(rèn)標(biāo)準(zhǔn)灰色
@property(nonatomic,retain) UIColor *separatorColor;
例如:tableView.separatorColor = [UIColor redColor];
3.設(shè)置表視圖的頭部視圖
@property(nonatomic,retain) UIView *tableHeaderView;
例如:給tableView設(shè)置表頭
UILabel *headerLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 100)];
headerLabel.textAlignment = NSTextAlignmentCenter;
headerLabel.text = @"寧做雞頭不做鳳尾";
headerLabel.textColor = [UIColor whiteColor];
headerLabel.backgroundColor = [UIColor clearColor];
tableView.tableHeaderView = headerLabel;
4. 設(shè)置表視圖的尾部視圖
@property(nonatomic,retain) UIView *tableFooterView;
例如: 給tableView設(shè)置表尾
UILabel *footerLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 100)];
footerLabel.textAlignment = NSTextAlignmentCenter;
footerLabel.text = @"愛(ài)咋咋地";
footerLabel.textColor = [UIColor whiteColor];
footerLabel.backgroundColor = [UIColor clearColor];
tableView.tableFooterView = footerLabel;
5.設(shè)置表視圖單元格的行高
@property(nonatomic) CGFloat rowHeight;
例如:
tableView.rowHeight = 100;
6.設(shè)置表視圖背景
@property(nonatomic, readwrite, retain) UIView *backgroundView
例如:
tableView.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"apple.jpg"]];//后面是圖片名字
7.刷新表視圖單元格中數(shù)據(jù)
- (void)reloadData;
8.顯示指示條
showsVerticalScrollIndicator
9 設(shè)置表視圖section頭部行高
@property(nonatomic) CGFloat sectionHeaderHeight;
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 40;
}
10. 設(shè)置表視圖section尾部部行高
@property(nonatomic) CGFloat sectionFooterHeight
-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
return 40;
}
三、單元格的顯示
1损趋、單元格的位置表示
NSIndexPath:能表示當(dāng)前cell是tableView的第幾段第幾行
2患久、單元格的創(chuàng)建(必須有一個(gè)標(biāo)識(shí)符)
UITableViewCell * cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
cell的樣式
1)UITableViewCellStyleDefault
左側(cè)顯示textLabel,imageView顯示在最左邊
2)UITableViewCellStyleValue1
左側(cè)顯示textLabel舶沿、右側(cè)顯示detailTextLabel墙杯,imageView顯示在最左邊
3)UITableViewCellStyleValue2
左側(cè)依次顯示textLabel(默認(rèn)藍(lán)色)和detailTextLabel,imageView可選
4)UITableViewCellStyleSubtitle
左上方顯示textLabel括荡,左下方顯示detailTextLabel,imageView顯示在最左邊
cell的輔助圖標(biāo) accessoryType (accessory |?k?ses?ri| 輔助,附加的)
1) 不顯示任何圖標(biāo)
UITableViewCellAccessoryNone,
2) 跳轉(zhuǎn)指示圖標(biāo)
UITableViewCellAccessoryDisclosureIndicator
3) 內(nèi)容詳情圖標(biāo)和跳轉(zhuǎn)指示圖標(biāo)
UITableViewCellAccessoryDetailDisclosureButton
4) 勾選圖標(biāo)
UITableViewCellAccessoryCheckmark
5) 內(nèi)容詳情圖標(biāo)
UITableViewCellAccessoryDetailButton
5) 自定義輔助圖標(biāo)
accessoryView屬性
3溉旋、cell的常用屬性
1)設(shè)置cell的背景試圖
backgroundView
2)設(shè)置選中的cellbei的背景圖片
selectedBackgroundView
cell.selectedBackgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"tableCell"]];
3) 設(shè)置選中時(shí)的樣式
selectionStyle
4.UItableView表中的每一行都由一個(gè)UItableViewCell表示可以用一個(gè)圖像畸冲,一些文本,一個(gè)可選擇的輔助圖標(biāo)來(lái)配置每個(gè)UItableViewCell對(duì)象观腊,UItableViewCell為每個(gè)cell定義了如下的所示的屬性
1). textLable:Cell的主文本標(biāo)簽(一個(gè)UILable的對(duì)象)
2). detailTextLable :cell的二級(jí)文本標(biāo)簽邑闲,當(dāng)需要添加額外細(xì)節(jié)時(shí)(一個(gè)UILable對(duì)象)
3) . imageView :一個(gè)用來(lái)裝載圖片的圖片視圖
5.UItableView 必須實(shí)現(xiàn)的3個(gè)核心方法(段數(shù),行梧油,建立一個(gè)cell)
1).段的數(shù)量苫耸,返回表視圖劃分多少個(gè)分區(qū)(這個(gè)方法可以分段顯示或者單個(gè)列表顯示我們的數(shù)據(jù))不寫(xiě)代表一行
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
2).設(shè)置某段行的數(shù)量 //返回給定分區(qū)有多少行,分區(qū)編號(hào)從0開(kāi)始(不同的分段返回不同的行數(shù)可以用switch來(lái)做儡陨,如果是單個(gè)列表褪子,就返回單個(gè)想要的函數(shù)即可)
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
3).- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath//返回一個(gè)經(jīng)過(guò)正確配置的單元格對(duì)象量淌,用于顯示在表視圖的指定位置(通過(guò)我們索引的路徑section和row來(lái)確定)
四、代理方法(UITableViewDelegate)
1嫌褪、一般是處理表視圖基本樣式(單元格高度)以及捕捉選中單元格事件
2呀枢、常用代理方法(下面的返回值都是數(shù)字)
1)配置行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
2)設(shè)置section 頭部、尾部視圖的高度(段頭笼痛,段尾)
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section;
3)自定義section頭部裙秋、尾部視圖,注意:需要指定高度
1.- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;
例如:
//自定義段頭
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 50)];
NSString *title = dataArray[section][@"title"];
label.text = title;
label.backgroundColor = [UIColor redColor];
label.textAlignment = NSTextAlignmentCenter;//把自定義的段頭段位放到中間
return label;
}
//自定義段尾
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 50)];
NSString *title = dataArray[section][@"trail"];
label.text = title;
label.backgroundColor = [UIColor redColor];
label.textAlignment = NSTextAlignmentCenter;
return label;
}
4)用戶單擊單元格中輔助按鈕時(shí)缨伊,調(diào)用該方法
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath;
5)用戶單擊單元格摘刑,調(diào)用該方法(五六很像,大家要區(qū)分開(kāi))
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
6)取消選中單元格時(shí)刻坊,調(diào)用該方法
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(3_0);
7)設(shè)置單元格編輯樣式
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath;
8).創(chuàng)建lable時(shí)帶的一些屬性
//給label指定內(nèi)容
cell.textLabel.text = self.dataArray[indexPath.row];
//給label的內(nèi)容設(shè)置字體和大小
cell.textLabel.font = [UIFont fontWithName:self.dataArray[indexPath.row] size:20];
cell.textLabel.textColor = [UIColor whiteColor];
cell.backgroundColor = [UIColor clearColor];
9).懶加載
當(dāng)用到某一個(gè)對(duì)象的時(shí)候枷恕,才創(chuàng)建這個(gè)對(duì)象
- (NSArray *)dataArray
{
if (_dataArray == nil) {
_dataArray = [NSArray array];
}
return _dataArray;
}