Share this:

說好的，這次寫iOS的技術文章，雖然我也沒有用iOS的cocoa touch framework多久。哈哈!

注：本文假定各位有一些objective-c語法基礎。
注2：本文部份圖片來源自Apple Developer文檔，最傳神的說XD。

言歸正傳，這次的主題是 UITableView ─ 很常用的present資料的component。

UITableView 的 Style 預設有兩種：Plain 及 Grouped。

Plain:

Grouped:

裝在 UITableView 裡面的元素是 UITableViewCell。

Cell的結構圖：

而 UITableViewCell 預設有4種樣式 Style：

UITableViewCellStyleDefault：預設使用這種，若左側ImageView沒圖的話，只有一行字(textLable.text)。

UITableViewCellStyleValue1：左側為textLable.text並且左對齊，右側為detailTextLable.text並且右對齊。

UITableViewCellStyleValue2：左側為detailTextLable.text，右側為textLable.text並且左對齊。

UITableViewCellStyleSubtitle：跟UITableViewCellStyleDefault大致相同，detailTextLable.text出現在textLable.text下方。

textLable和detailTextLable都包含在contentView裡面。

那麼先上點code snippet代碼來說明要如何使用：

- (void)dealloc
{
     [itemsArray release];
     [super dealloc];
}

- (void)viewDidLoad
{
   [super viewDidLoad];

   //初始化資料陣列，待會使用
   NSMutableArray *itemsArray = [[NSArray alloc] initWithObjects:@"row 1",@"row 2",@"row 3",nil];

}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{

    // Return the number of sections.
    // 告訴tableView總共有多少個section需要顯示
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{

    // Return the number of rows in the section.
    // 告訴tableView一個section裡要顯示多少行
    return [itemsArray count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //cell的標飾符
    static NSString *CellIdentifier = @"cellIdentifier";

    //指定tableView可以重用cell，增加性能，不用每次都alloc新的cell object
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    //如果cell不存在，從預設的UITableViewCell Class裡alloc一個Cell object，應用Default樣式，你可以修改為其他樣式
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }

    // Configure the cell...

    //每一行row進來都判定一下，分別依次選用不同的圖片
    switch (indexPath.row) {
        case 0:
        {
            cell.imageView.image = [UIImage imageNamed:@"image0.png"];
        }
            break;
        case 1:
        {
            cell.imageView.image = [UIImage imageNamed:@"image1.png"];
        }
            break;
        case 2:
        {
            cell.imageView.image = [UIImage imageNamed:@"image2.png"];
        }
            break;
        default:
        {
            cell.imageView.image = [UIImage imageNamed:@"default.png"];
        }
            break;
    }

    //其他相同的屬性一併設定
    cell.textLabel.text = [itemsArray objectAtIndex:indexPath.row];
    [cell setAccessoryType:UITableViewCellAccessoryDisclosureIndicator];

    //設字體、顏色、背景色什麼的
    cell.textLabel.backgroundColor = [UIColor clearColor];
    cell.detailTextLabel.backgroundColor = [UIColor clearColor];
    cell.textLabel.textColor = [UIColor colorWithRed:54.0/255.0 green:161.0/255.0 blue:219.0/255.0 alpha:1];
    cell.detailTextLabel.textColor = [UIColor colorWithRed:135.0/255.0 green:135.0/255.0 blue:135.0/255.0 alpha:1];

    //設定textLabel的最大允許行數，超過的話會在尾未以...表示
    cell.textLabel.numberOfLines = 2;

    return cell;
}

//這個是非必要的，如果你想修改每一行Cell的高度，特別是有多行時會超出原有Cell的高度！
-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 85.0;
}

Cell 在alloc後便不能再更改某些component的frame了，例如是ImageView，textLable及detailTextLable等。

如果比較進階一點的，想修改或者增加更多的component進去Cell裡面，有兩種方法(大同小異)：
第一種是在cellForRowAtIndexPath delegate method裡alloc cell時在contentView裡面addSubView。

第二種是需要繼承Cell作一個Custom Cell 的Class，並可以使用layoutSubview等方法來修改component的frame呢。

References:
A Closer Look at Table-View Cells
Standard Styles for Table-View Cells
About Table Views in iOS-Based Applications