iOS開發之高階檢視—— UITableView(一)簡單例子
阿新 • • 發佈:2019-01-08
表檢視繼承自UIScrollView,這樣的繼承關係使得表檢視可以實現上、下滾動。
UITableView需要實現的兩個協議如下:
UITableViewDatasource:例項化表檢視時,必須採用該方法來實現資料來源的配置UITableViewDelegate:表檢視的委託方法,一般用於處理表檢視的基本樣式以及捕捉選中單元格選中事件
表檢視的結構:
表檢視由頭部、尾部檢視,中間有一連串的單元格檢視
表檢視的頭部由tableHeaderView屬性設定,尾部檢視通過tableFooterView屬性設定
分組表格由一系列的 分割槽 檢視組成,每一個分割槽又包含一個連續的單元格
每個分割槽檢視也由頭部檢視和尾部檢視,通過委託方法代理
cell的使用:
首先定義一個標示符
其次,檢查表檢視中是否存在閒置的單元格,如果有取出來,沒有則重新建立
例子一——簡單表格
ViewController.m
// // ViewController.m // UITableViewDemo // // Created by Apple on 16/5/24. // Copyright © 2016年 Apple. All rights reserved. // #import "ViewController.h" @interface ViewController () @end NSArray* cityList; @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; [self.view setBackgroundColor:[UIColor redColor]]; //建立一個數組,儲存需要顯示的資料 cityList = @[@"北京",@"上海",@"天津",@"廣州",@"深圳",@"杭州",@"長沙",@"郴州"]; //建立UITableView物件 UITableView* tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStyleGrouped]; UILabel* headerLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44.0)]; [headerLabel setText:@"城市列表"]; headerLabel.textColor = [UIColor blackColor]; headerLabel.backgroundColor = [UIColor cyanColor]; headerLabel.textAlignment = NSTextAlignmentCenter; //設定UITableView的頁首控制元件 [tableView setTableHeaderView:headerLabel]; UILabel* footerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 30)]; [footerLabel setText:@"以上城市房價太高"]; //設定UITableView頁尾控制元件 [tableView setTableFooterView:footerLabel]; //設定行cell高(預設44px) [tableView setRowHeight:50]; //設定分割線顏色 [tableView setSeparatorColor:[UIColor redColor]]; //設定分割線風格 /** * UITableViewCellSeparatorStyleNone 不使用分割線 UITableViewCellSeparatorStyleSingleLine 使用分割線 UITableViewCellSeparatorStyleSingleLineEtched 在有組的情況使用分割線 */ [tableView setSeparatorStyle:UITableViewCellSeparatorStyleSingleLine]; // 設定UITableView的背景顏色 [tableView setBackgroundColor:[UIColor lightGrayColor]]; // 設定資料來源代理,必須實現協議UITableViewDataSource中的相關方法 tableView.delegate = self; tableView.dataSource = self; [self.view addSubview:tableView]; } #pragma mark -UITableViewDataSource // 返回表格分割槽數,預設返回1 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } // 返回每組頭標題名稱 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section { return @"分割槽開始"; } // 返回每組尾部說明 -(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{ return @"分割槽結束"; } // @required // 提供tableView中的分割槽中的資料的數量 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return [cityList count]; } // 為表格行定義一個靜態字串作為可重用識別符號,在UITableView的cell快取池當中所有的cell的標示符都是剛定義的cellID,因為重用時無所謂獲取哪一個cell,只要是cell就可以 static NSString* cellID = @"cellID"; // @required // 返回每行的單元格,提供 tableView 中顯示的資料 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ // 根據cellID從可重用表格行的佇列中取出可重用的一個表格行UITableViewCell物件 UITableViewCell* tableViewCell = [tableView dequeueReusableCellWithIdentifier:cellID]; // 如果取出的表格行為nil if (tableViewCell == nil) { //建立一個UITableViewCell物件,並繫結到cellID tableViewCell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:cellID]; } // 將單元格的邊框設定為圓角 tableViewCell.layer.cornerRadius = 12; tableViewCell.layer.masksToBounds = YES; //UITableView聲明瞭一個NSIndexPath的類別,主要用 來標識當前cell的在tableView中的位置,該類別有section和row兩個屬性,section標識當前cell處於第幾個section中,row代表在該section中的第幾行。 // 從IndexPath引數獲取當前行的行號 NSUInteger rowNo = indexPath.row; // 取出cityList中索引為rowNo的元素作為UITableViewCell的文字標題 tableViewCell.textLabel.text = [cityList objectAtIndex:rowNo]; // 設定UITableViewCell的詳細內容 tableViewCell.detailTextLabel.text = [NSString stringWithFormat:@"市區"]; // 設定UITableViewCell的左邊的圖示 tableViewCell.imageView.image = [UIImage imageNamed:@"1.jpg"]; // 設定UITableViewCell附加按鈕的樣式 tableViewCell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; //返回設定好資料的cell給UITableView物件 return tableViewCell; } @end
效果圖如下:
例子二————分組展現
ViewController.m
// // ViewController.m // UITableViewSectionsApp // // Created by Apple on 16/5/24. // Copyright © 2016年 Apple. All rights reserved. // #import "ViewController.h" @interface ViewController () @end NSArray* Heroes; NSArray* Liqings; NSArray* Kazikes; NSArray* Rivens; @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // 分割槽資料 Heroes = @[@"李青",@"卡茲克",@"瑞文"]; Liqings = @[@"李青1",@"李青2"]; Kazikes = @[@"卡茲克"]; Rivens = @[@"瑞文1",@"瑞文2",@"瑞文3"]; // 建立UITableView UITableView* tableView = [[UITableView alloc]initWithFrame:[UIScreen mainScreen].applicationFrame style:UITableViewStyleGrouped]; UILabel* headerLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 320, 30)]; [headerLabel setText:@"三大英雄"]; //設定UITable頭資訊 [tableView setTableHeaderView:headerLabel]; UILabel* footerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 30)]; [footerLabel setText:@"等你來戰"]; //設定UITable尾部資訊 [tableView setTableFooterView:footerLabel]; [tableView setBackgroundColor:[UIColor cyanColor]]; // 新增UITableView [self.view addSubview:tableView]; // 設定資料來源代理,必須實現協議UITableViewDataSource中的相關方法 tableView.dataSource = self; } //返回 tableView上的分割槽數量,本例為3 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ return [Heroes count]; } // 返回分割槽的title(分割槽是從 0 開始的) - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{ // 根據分割槽的獲取對應的名稱 return Heroes[section]; } // 返回tableView中的分割槽中的資料的數量 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ // 根據分割槽,獲取分割槽中對應要顯示的資料長度 if(section == 0){ return [Liqings count]; }else if(section == 1){ return [Kazikes count]; }else{ return [Rivens count]; } } // 可重用識別符號 static NSString* cellID = @"cellID"; // 將提供 tableView 中顯示的資料 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ // 根據cellID獲取可重用的UITableViewCell物件 UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:cellID]; if(!cell){ //建立一個UITableViewCell物件,並繫結到cellID cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID]; } // 根據分割槽設定UITableViewCell顯示的資料 if(indexPath.section == 0){ cell.textLabel.text = Liqings[indexPath.row]; // 設定UITableViewCell的左邊的圖示 cell.imageView.image = [UIImage imageNamed:@"l1.jpg"]; }else if(indexPath.section == 1){ cell.textLabel.text = Kazikes[indexPath.row]; cell.imageView.image = [UIImage imageNamed:@"k1.jpg"]; }else{ cell.textLabel.text = Rivens[indexPath.row]; cell.imageView.image = [UIImage imageNamed:@"r1.jpg"]; } // 設定列的按鈕型別 cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; // 返回設定好資料的cell給UITableView物件 return cell; } @end
效果圖如下: