Skip to content

UITableViewCell の背景を画像にする

2010.12.02

UITableViewCell の背景を画像にする場合、UITableViewCell の backgroundView プロパティに UIImageView をセットします。しかし、これだけでは問題が発生してしまうことがあります。

今回は、その問題を乗り越えて、UITableViewCell の背景を画像にする方法を紹介します。

Cells with custom backgroundView


以下のコードは、UITableView の dataSource オブジェクトが UITableViewCell を返すところです。UITableViewCell の背景を画像にしたいので、backgroundView プロパティに UIImageView をセットしています。

- (UITableViewCell *)tableView:(UITableView *)tableView
    cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Assure cell
    UITableViewCell *cell;
    cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
    if (!cell) {
        // Make cell
        cell = [[UITableViewCell alloc]
            initWithStyle:UITableViewCellStyleSubtitle
            reuseIdentifier:@"Cell"];
        [cell autorelease];
        
        // Set backgroundView
        UIImageView *imageView;
        UIImage *image;
        image = [UIImage imageNamed:@"cell_bg.png"];
        imageView = [[UIImageView alloc] initWithImage:image];
        [imageView autorelease];
        cell.backgroundView = imageView;
        
        // Set text color
        cell.textLabel.textColor = [UIColor whiteColor];
    }
    
    // Set text
    cell.textLabel.text = @"Text Label";
    
    // Set detail text
    cell.detailTextLabel.text
        = @"Detail text label. Detail text label.";
    
    return cell;
}

しかし、これだけでは下図のような見た目になってしまうことがあります。ラベルの背景が白くなってしまっています。

<図1: ラベルの背景が白くなってしまっている様子>
Wrong cells with custom backgroundView

これを避けるために、焦って上記のメソッド内にラベルの背景色を透明にするコードを書き足しても、結果は変わりありません。セルが表示されるまでの間に、何者かによってラベルの背景色を白にされてしまうのです。

犯人は、UITableView と UITableViewCell です。UITableView はセルが表示されるまでの間にセルの背景色を自身の背景色と同じ色にします。するとセルは、その色をラベルの背景色にも適用します。背景が透明なビューがたくさん重なると描画パフォーマンスが落ちるので、それを避けるための「気遣い」なのでしょうが、しかし今回の場合ありがた迷惑です。

この問題を解決する方法はふたつ。
ひとつは、UITableView の背景色を透明にしておくこと。これで、セルとラベルの背景色を決定付ける色が透明ということになるので、ラベルの背景色が透明になってくれます。
もうひとつは、UITableView の delegate で tableView: willDisplayCell: forRowAtIndexPath: を実装すること。このデリゲートメソッドは、セルが表示される直前に呼ばれるメソッドなので、ここでラベルの背景色を透明にしてやります。ふたつのラベルの背景色を透明にするのが面倒であれば、セルの背景色を透明にしてやりましょう。そうすれば、セルがラベルの背景色を透明にしてくれます。

- (void)tableView:(UITableView *)tableView
    willDisplayCell:(UITableViewCell *)cell
    forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.backgroundColor = [UIColor clearColor];
}

<図2: ラベルの背景が透明になった様子>
Cells with custom backgroundView

コード上でラベルの背景色を設定してもいつの間にか違う色に変わるという現象は、開発者を混乱に陥れてしまいます。この現象に遭遇したときは、パニックにならずに、この記事のことを思い出してください。

Advertisements

From → Develop

Leave a Comment

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