改變 UITableView 外觀的方法

  

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 的文章，查閱其他有關表格的設定方式。