UITableView經典教程

UITableView 系列三 ：分類顯示和改變外觀 （實例）

博客分類：  Phone / IOS / Objective-C / Swift

 

1. 分類顯示 sections

 

 

在之前的文章UITableView 的資料設定方式一文中，已經示範如何在 UITableView 中設定所要顯示的資料，以及分別顯示這些資料的細節，但是如果資料比數太多時該怎麼辦？你可以參考本篇文章的做法，將資料做分類的處理，並且建立快速索引，讓使用者能以最短的時間找到所需要的資料。

資料分類的概念
動態表格的內容多半是存放在陣列當中方便資料的存取，如果你有好幾類不同比的資料，你可以將這些資料分別存放在不同的陣列裏，最後再使用一個 NSMutableArray 將這些存放不同資料的陣列包起來，之後我們只要針對這個 NSMutableArray 做操作即可。（以下是沿用之前文章的程式碼做修改）

//資料初始化
roleArray = [[NSArray alloc] initWithObjects:@"野蠻人", @"法師", @"弓箭手", @"盜賊", @"德魯伊", @"騎士", nil];
monsterArray = [[NSArray alloc] initWithObjects:@"哥布林戰士", @"哥布林護衛", @"哥布林軍官", @"哥布林王", @"黑暗德魯伊", @"狼人", @"傀儡護衛", @"傀儡領主", @"蜘蛛", @"蝙蝠", nil];

heroicaArray = [[NSMutableArray alloc] initWithObjects:roleArray, monsterArray, nil];

 
UITableView Sections 的設定
如果要將資料作分類顯示，可以使用以下的內建方法函式，並回傳一個 NSInteger，告訴 UITableViewController 你想將資料分成幾類。

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return [heroicaArray count];
}

 
程式碼到此就已經算是完成資料的分類，後續的動作就是要顯示這些分類好的資料，大致的程式碼都和之前的文章差不多，只是操作的物件不同，可以透過方法函式所得到的 section 參數，決定於目前是要處理那一類的資料。

//設定每一類的資料筆數
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return [[heroicaArray objectAtIndex:section] count];
}

//設定每一類的資料內容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

//製作可重復利用的表格欄位Cell
static NSString *CellIdentifier = @"CellIdentifier";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}

//設定欄位的內容與類型
cell.textLabel.text = [[heroicaArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
return cell;
}

  
分類標題與快速索引
分類的標題可以家在分類的開頭或是結尾，同樣是透過方法函式所得到的 section 參數，來確認目前所在的分類。

//設定分類開頭標題
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
switch (section) {
case 0:
return @"英雄角色";
break;

case 1:
return @"怪物角色";
break;

default:
return @"";
break;
}
}

//設定分類結尾標題
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section {
}

 

另外，建立類似電話簿的快速索引，則可以透過下列內建方法函式，回傳一個快速索引的陣列，陣列內容的順序，就是你分類的順序。

//建立快速索引
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {
NSArray *index = [[NSArray alloc] initWithObjects:@"英雄", @"怪物", @"武器", @"道具", @"戰利品", @"其他", nil];
return index;
}

 
比較好的做法
在上述分類標題與快速索引的部分，使用 switch 與靜態的數值來做設定，其實這不是很恰當的做法，尤其當你的資料筆數非常龐大的時候，比較好的建議是將這些資訊同樣放入陣列裏面，且動態存取它們，來完成設定標題與建立索引陣列。

另外要注意的是，雖然是好幾類不同的資料，但是他們最好還是能擁有相同的屬性，即使該屬性爲 nil。例如 A 類型的資料有顏色屬性，但是 B 類型沒有或是不需要，但是仍需爲 B 類型的資料保留顏色屬性，即使它們的值都是 nil，這樣的觀念有點類似於多型 Polymorphism，這樣不但可以減少程式碼的撰寫，對於表格內的資料也能保持一致性。

 

 

2. 改變外觀

 

 

UITableView 所製作出來的應用程式在使用上多半大同小異，它們之間最大的不同還是在表格的呈現方面，如何設計出具有獨特外觀的 UITableView，纔是令人頭痛的問題，通常是選擇製作一個全新的 UITableViewCell 來使用，但是你也可以採用比較簡單的做法，使用內建的方法函式來做些微的改變，方式如下。

Table View
整個 Table View 能改變的東西實在不多，多半都是更改背景，但是當你更改背景顏色之後就會發現 Cell 與 Cell 之間會多出一條白線 Separator，你可以參考下列程式碼改變它的顏色或是移除不顯示。

//改變Separator顏色
[self.tableView setSeparatorColor:[UIColor orangeColor]];

//移除Separator
[self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

 
Table View Cell
Table View Cell 本身就提供一些不同的類型可供選擇，如下圖，你可以藉由選擇不同的類型來改變文字在 Cell 中編排的方式。

 
Attributes 中的 Style 屬性

另外如果想要在 Cell 中增加其它元件時，可以使用 addSubview 的方法函式來添加新的元件，例如在下列程式碼中，除了設定左右的圖像之外，還自行新增了一個 UILabel 放在其中。

//設定文字背景爲透明
[cell.textLabel setBackgroundColor:[UIColor clearColor]];

//設定Cell中左邊的圖片
cell.imageView.image = [UIImage imageNamed:[[heroicaArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row + 1]];

//設定Cell中右邊的連結圖片
cell.accessoryView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"dice.png"]];

//增加UILabel
UILabel *subtitle = [[UILabel alloc] initWithFrame:CGRectMake(95.0, 45.0, 200.0, 20.0)];
[subtitle setTextColor:[UIColor colorWithHue:1.0 saturation:1.0 brightness:1.0 alpha:0.5]];
[subtitle setBackgroundColor:[UIColor clearColor]];
[subtitle setFont:[UIFont systemFontOfSize:12.0]];
[subtitle setText:@"還可以放註解唷"];

[cell addSubview:subtitle];

//設定背景
[cell setBackgroundView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"CellBG.png"]]];

 
Section
透過下列內建的方法函式，可以自行更改 Section 的標題內容。

//設定開頭的分類樣式
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *sectionView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)];
[sectionView setBackgroundColor:[UIColor brownColor]];

//增加UILabel
UILabel *text = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 18)];
[text setTextColor:[UIColor blackColor]];
[text setBackgroundColor:[UIColor clearColor]];
[text setText:[[heroicaArray objectAtIndex:section] objectAtIndex:0]];
[text setFont:[UIFont boldSystemFontOfSize:16.0]];

[sectionView addSubview:text];
return sectionView;
}

//設定結尾的分類樣式
-(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
}

 
Section Index
表格分類的快速索引雖然沒有內建的方法函式可供設定外觀使用，但是你仍然可以透過自制的索引介面並配合下列程式碼，將表格切換到所想要的分類上。

CGRect sectionRect = [self.tableView rectForSection:1];
[self.tableView scrollRectToVisible:sectionRect animated:YES];

 
備註
如果表格個對應的資料結構有任何問題，可以在「索引式搜索」中的「元件設定」分類裏找到所有有關 UITableView 的文章，查閱其他有關表格的設定方式。

 

 

來源：

http://furnacedigital.blogspot.com/2012/02/uitableview-sections.html

http://furnacedigital.blogspot.com/2012/02/uitableview_17.html