Skip to content

UITableViewCell の背景色を変える

2010.12.05

前回の記事「UITableViewCell の背景を画像にする」では、UITableViewCell とそれに乗った UILabel の背景色が意図せずに変わってしまう現象を紹介しました。
UITableViewCell の背景色を任意の色にしたい場合も、同じ原因で意図した色にならない問題に遭遇することがあります。

今回は、前回のおさらいをしながら、セルの背景色が交互に替わるテーブルビューを作りたいと思います。

Striped Table View - Landscape


以下のコードは、UITableView の dataSource オブジェクトが UITableViewCell を返すところです。

- (UITableViewCell *)tableView:(UITableView *)tableView
    cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Assure cell
    UITableViewCell *cell;
    cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
    if (!cell) {
        // Make cell
        cell = [[UITableViewCell alloc]
            initWithStyle:UITableViewCellStyleValue1
            reuseIdentifier:@"Cell"];
        [cell autorelease];
    }
    
    // For even
    if (indexPath.row % 2 == 0) {
        cell.textLabel.text = @"Color for even cell is";
        cell.detailTextLabel.text = @"white";
        cell.backgroundColor = [UIColor whiteColor];
            // does not work
    }
    // For odd
    else {
        cell.textLabel.text = @"Color for odd cell is";
        cell.detailTextLabel.text = @"blue";
        cell.backgroundColor = [UIColor colorWithHue:0.61
            saturation:0.09
            brightness:0.99
            alpha:1.0];     // does not work
    }

    return cell;
}

上のコードでは、セルの背景色を変えるために cell.backgroundColor を変えていますが、意図した見た目になりません。

<図1: セルの背景色が変わっていない様子>
Non Striped Table View - Landscape

この問題の原因は、セルが表示されるまでの間に、UITableView がセルの背景色を自身の背景色と同じ色に設定してしまうからです。

この問題を解決する方法は、UITableView の delegate で、tableView: willDisplayCell: forRowAtIndexPath: を実装することです。このデリゲートメソッドは、セルが表示される直前に呼ばれるメソッドなので、ここでセルの背景色を設定してやります。UITableViewCell のリファレンスも、「セルの背景色を変えたいのなら、tableView: cellForRowAtIndexPath: データソースメソッドではなく、tableView: willDisplayCell: forRowAtIndexPath: デリゲートメソッドの中でやらなければならない」と言っています。

- (void)tableView:(UITableView *)tableView
    willDisplayCell:(UITableViewCell *)cell
    forRowAtIndexPath:(NSIndexPath *)indexPath
{
    // For even
    if (indexPath.row % 2 == 0) {
        cell.backgroundColor = [UIColor whiteColor];
    }
    // For odd
    else {
        cell.backgroundColor = [UIColor colorWithHue:0.61
            saturation:0.09
            brightness:0.99
            alpha:1.0];
    }
}

これで無事、セルの背景色が変わるようになります。

<図2: セルの背景色が変わるようになった様子>
Striped Table View - Landscape

Advertisements

From → Develop

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s