iOS-個(gè)人整理17 - UITableView表視圖

一、UITableView
UITableView，也就是表視圖，可以算是app中最重要的視圖了，隨處可見，中間這一圈就是，有一種列表的形勢，但應(yīng)用比較豐富，可以加圖片，每行的高度也可自定

UITableView繼承于UIScrollView，備其的滾動屬性
UITableView通過分區(qū)和行來劃分，每個(gè)分區(qū)為section，每行為row，編號都從0開始，系統(tǒng)專門提供了一個(gè)類NSIndexPath來整合section和row

從最基本最必要的說起吧
表視圖的初始化

//Grouped屬性，在滾動時(shí)分區(qū)頭部一起移動 UITableView *myTableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStyleGrouped]; //添加到父視圖<pre name="code" class="objc"> [self.view addSubview: myTableView];

設(shè)置兩個(gè)代理

myTableView.delegate = self;//負(fù)責(zé)外觀 myTableView.dataSource = self;//負(fù)責(zé)數(shù)據(jù)

導(dǎo)入代理需要的兩個(gè)協(xié)議

@interface RootViewController ()<UITableViewDelegate,UITableViewDataSource>

實(shí)現(xiàn)必須實(shí)現(xiàn)的兩個(gè)協(xié)議方法：
第一個(gè)，返回表視圖每個(gè)分區(qū)的行數(shù)

//返回每個(gè)分區(qū)下的單元格個(gè)數(shù)，必須實(shí)現(xiàn)-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return 10;}

第二個(gè)，單元格的內(nèi)容填充，這里有兩種方法，注冊的方法和直接創(chuàng)建的方法
這里有一個(gè)單元格重用機(jī)制的概念，大概的意思就是，屏幕顯示多少cell，系統(tǒng)就提供多少內(nèi)存，滾動出屏幕的cell就讓自己的cell，給新滾動到屏幕上的cell使用

//定制每個(gè)單元格,indexPath:當(dāng)前定位的單元格位置,它有兩個(gè)屬性:indexPath.section,indexPath.row
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ 
//cell重用機(jī)制 
//定義重用標(biāo)示符 
static NSString* cellId = @"CELL"; 
//每次需要使用單元格的是，先根據(jù)重用標(biāo)識符從重用隊(duì)列中獲取單元格，如果隊(duì)列中沒有，再進(jìn)行初始化新的單元格 
//每次都會先創(chuàng)建一屏幕的cell，當(dāng)有cell出屏幕，就會根據(jù)重用標(biāo)識符添加到對應(yīng)的重用隊(duì)列中，當(dāng)屏幕外的cell要進(jìn)入屏幕，先從隊(duì)列中獲取，如果沒有，則初始化cell 
//當(dāng)重用cell時(shí)，需要對上面的控件程序賦值 
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId]; 
//如果從重用隊(duì)列中未獲取cell，也就是Cell為空 
    if (!cell) { cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellId]; 
//系統(tǒng)提供的控件要配合不同的樣式來使用 
    cell.detailTextLabel.text = @"detail詳細(xì)內(nèi)容";
           } 
//選中效果 cell.selectionStyle = UITableViewCellSelectionStyleNone; 
//輔助視圖的樣式,右側(cè)會有一個(gè)小圖標(biāo) 
cell.accessoryType = UITableViewCellAccessoryCheckmark; 
//設(shè)置左側(cè)圖片 
cell.imageView.image = [UIImage imageNamed:@"b33"]; cell.textLabel.text = @"文字內(nèi)容顯示";  
//為相應(yīng)位置返回定制好的單元格 
return cell;
}

//注冊單元格之后的寫法，不用判斷cell是否存在，不用初始化，直接使用//需要在viewdidLoad中寫下面這行注冊代碼//注冊單元格, //第一個(gè)參數(shù)為所使用的單元格類型 
//第二個(gè)參數(shù)為單元格的重用標(biāo)示符 
[myTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"CELL"];
//但是無法修改cell的樣式,只能使用default樣式 
//-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
//{
// UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CELL" forIndexPath:indexPath];
// cell.detailTextLabel.text = @"asdas";
// cell.textLabel.text = @"1111";
// return cell;
//}

cell自帶的imageVIew會隨圖片大小進(jìn)行變化，下面的代碼會修改圖片的大小

CGSize size = CGSizeMake(30, 40); 
UIImage *image = [UIImage imageNamed:@"mv_book_icon"]; 
//調(diào)整image的大小 UIGraphicsBeginImageContextWithOptions(size, NO,0.0); 
CGRect imageRect=CGRectMake(0.0, 0.0, size.width, size.height); 
[image drawInRect:imageRect]; 
//設(shè)置圖片  
cell.imageView.image=UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext();

寫了上面這些必須內(nèi)容，就可以在界面上顯示出表視圖，能運(yùn)行就不會有什么錯(cuò)誤
大概是下面的樣子，內(nèi)容的圖片和text可以自己改
因?yàn)槟M器的分辨率不夠，cell之間的分割線可能看不清


表視圖的問題很多的，還有很多屬性還是先上代碼，慢慢理解
下面的完整代碼添加了一些新內(nèi)容：

TableView顯示相關(guān)的屬性：

 //行高 
myTableView.rowHeight = 70; 
//分割線 
myTableView.separatorColor = [UIColor blueColor]; 
myTableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine; 
//置頂視圖 
myTableView.tableHeaderView = [[UIView alloc]init]; 
//置底視圖 
myTableView.tableFooterView = [[UIView alloc]init]; 
//section標(biāo)題的顏色 
myTableView.sectionIndexColor = [UIColor redColor];

UITableViewCell的屬性

 //選中效果 
cell.selectionStyle = UITableViewCellSelectionStyleBlue; 
//輔助視圖的樣式 
cell.accessoryType = UITableViewCellAccessoryCheckmark; 
//設(shè)置左側(cè)圖片 
cell.imageView.image = [UIImage imageNamed:@"ck.jpg"]; 
//標(biāo)題視圖 
cell.textLabel.text = [NSString stringWithFormat:@"第%ld個(gè)cell，%ld個(gè)section",indexPath.row,indexPath.section]; 
//副標(biāo)題視圖 
cell.detailTextLabel.text = @"副標(biāo)題";

對row和section進(jìn)行操作

//插入一行row
 [self.myViewTable insertRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationLeft];  
//刪除一行row//    
[self.myViewTable deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationTop];  
//刪除一行row//   
 [self.myViewTable deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationTop]; 
//插入和刪除section    
NSIndexSet *section = [NSIndexSet indexSetWithIndex:1];    
[self.myViewTable insertSections:section withRowAnimation:UITableViewRowAnimationFade];    
[self.myViewTable deleteSections:section withRowAnimation:UITableViewRowAnimationTop];  
//滾動到最后一行   
 [self.myViewTable scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];  
//滾動table到最底部 //當(dāng)前內(nèi)容已經(jīng)超過一屏 
if (_myTableView.contentSize.height >= _myTableView.bounds.size.height)
 {    
[self.myTableView setContentOffset: CGPointMake(0, self.myTableView.contentSize.height -self.myTableView.bounds.size.height)animated:YES];    
}

通過相關(guān)的代理方法來實(shí)現(xiàn)的：
設(shè)置指定位置cell的高度

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

添加右側(cè)邊欄的索引條

-(NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView

設(shè)置頁眉的高度

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section

設(shè)置分區(qū)標(biāo)題

-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

添加點(diǎn)擊cell的方法
點(diǎn)擊cell會觸發(fā)方法

-(void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath

這里有點(diǎn)重要東西,我們可以根據(jù)cell得到IndexPath，也可以根據(jù)IndexPath得到cell
同時(shí)也可以根據(jù)點(diǎn)擊的cell得到cell的IndexPath，有時(shí)我們需要在點(diǎn)擊cell的代理方法外得知這個(gè)點(diǎn)擊的是哪個(gè)cell

  //根據(jù)IndexPath得到cell   
 CustomTableViewCell *cell = [_myTableView cellForRowAtIndexPath:indexPath];    
//根據(jù)cell得到IndexPath   
 NSIndexPath *indexPath2 = [_myTableView indexPathForCell:cell];        
//根據(jù)點(diǎn)擊得到cell的IndexPath    
NSIndexPath *indexPath3 = [_myTableView indexPathForSelectedRow];

完整的代碼以及效果

#import "RootViewController.h"@interface RootViewController ()<UITableViewDelegate,UITableViewDataSource>@property (nonatomic,assign)int index;
//標(biāo)記創(chuàng)建單元格的個(gè)數(shù)
@end
@implementation RootViewController
- (void)viewDidLoad {
 [super viewDidLoad]; 
//初始化 
self.index = 0; 
self.navigationItem.title = @"表視圖學(xué)習(xí)"; self.navigationController.navigationBar.barTintColor = [UIColor colorWithRed:200/255.0 green:233/255.0 blue:160/255.0 alpha:1]; 
//表視圖的初始化 
//Grouped，分區(qū)頭部一起移動 
UITableView *myTableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStyleGrouped]; 
[self.view addSubview: myTableView]; 
//tabView屬性 //分割線 
myTableView.separatorColor = [UIColor colorWithRed:200/255.0 green:233/255.0 blue:160/255.0 alpha:1]; myTableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine; 
myTableView.rowHeight = 100; 
//置頂視圖// myTableView.tableFooterView = (一個(gè)石頭) 
//表視圖所有的方法都需要代理方法 
//表視圖的代理方法有兩個(gè) 
//一個(gè)偏重于外觀 
//一個(gè)偏重于數(shù)據(jù) 
myTableView.delegate = self; 
myTableView.dataSource = self; 
//注冊單元格, 
//第一個(gè)參數(shù)為所使用的單元格類型
 //第二個(gè)參數(shù)為單元格的重用標(biāo)示符
 [myTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"CELL"]; }
#pragma mark -- 表視圖的代理方法
//定制每個(gè)單元格,indexPath:當(dāng)前定位的單元格位置,它有兩個(gè)屬性:indexPath.section,indexPath.row
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{ 
//cell重用機(jī)制 
//定義重用標(biāo)示符 
static NSString* cellId = @"CELL"; 
//每次需要使用單元格的是，先根據(jù)重用標(biāo)識符從重用隊(duì)列中獲取單元格，如果隊(duì)列中沒有，再進(jìn)行初始化新的單元格 
//每次都會先創(chuàng)建一屏幕的cell，當(dāng)有cell出屏幕，就會根據(jù)重用標(biāo)識符添加到對應(yīng)的重用隊(duì)列中，當(dāng)屏幕外的cell要進(jìn)入屏幕，先從隊(duì)列中獲取，如果沒有，則初始化cell 
//當(dāng)重用cell時(shí)，需要對上面的控件程序賦值 
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId]; 
//如果從重用隊(duì)列中未獲取cell，也就是Cell為空 
if (!cell) { cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellId]; 
//系統(tǒng)提供的控件要配合不同的樣式來使用 
cell.detailTextLabel.text = [NSString stringWithFormat:@"創(chuàng)建的第%d個(gè)單元格",self.index++]; } 
//選中效果 
cell.selectionStyle = UITableViewCellSelectionStyleBlue; 
//輔助視圖的樣式 
cell.accessoryType = UITableViewCellAccessoryCheckmark; 
//設(shè)置左側(cè)圖片 
cell.imageView.image = [UIImage imageNamed:@"b33"]; cell.textLabel.text = [NSString stringWithFormat:@"第%ld個(gè)cell，%ld個(gè)section",indexPath.row,indexPath.section]; 
//為相應(yīng)位置返回定制好的單元格 return cell;}
//注冊單元格之后的寫法，不用判斷cell是否存在，不用初始化，直接使用
//但是無法修改cell的樣式,只能使用default樣式 //-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath//{// UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CELL" forIndexPath:indexPath];// cell.detailTextLabel.text = @"asdas";//// cell.textLabel.text = @"1111";// return cell;// //}//設(shè)置對應(yīng)位置的cell的高度-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ //不同分區(qū)的寬度不同 //使得奇數(shù)cell的高度為50，偶數(shù)為100 if (indexPath.row%2 == 0 && indexPath.section %2 == 0) { return 100; } else{ return 50; }}//設(shè)置頁眉的高度-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{ return 22;}
//索引條
-(NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView{ return [NSArray arrayWithObjects:@"A",@"B",@"C", nil];}
//點(diǎn)擊cell之后執(zhí)行的代理方法
//delect
-(void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath{ NSLog(@"點(diǎn)擊了%ld分區(qū)下的%ld行的cell",indexPath.section,indexPath.row);}
//添加分區(qū)標(biāo)題
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{ return @"分區(qū)標(biāo)題";}
//返回每個(gè)分區(qū)下的單元格個(gè)數(shù)，必須實(shí)現(xiàn)
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return 2;}
//返回分區(qū)的個(gè)數(shù),可選實(shí)現(xiàn)，不實(shí)現(xiàn)則默認(rèn)只有一個(gè)分區(qū)
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ return 10;}
@end

效果如下


內(nèi)容有點(diǎn)多，下篇進(jìn)行單元格的編輯和表視圖控制器

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容