UITableViewCellの背景色をカスタマイズする方法は?


188

UITableView内のすべてのUITableViewCellsの背景(および境界線も)をカスタマイズしたいと思います。これまでのところ、これをカスタマイズすることはできなかったので、デフォルトの白い背景のセルがたくさんあります。

iPhone SDKでこれを行う方法はありますか?

回答:


193

セルのcontentViewのbackgroundColorを自分の色に設定する必要があります。アクセサリ(開閉用の矢印など)を使用している場合、白で表示されるため、それらのカスタムバージョンをロールする必要がある場合があります。


108
例:myCell.contentView.backgroundColor = [UIColor greenColor];
JoBu1324 2009

1
vlado.grigorovの答えはより柔軟です-William Dennissの答えを参照してください
JoBu1324

3
UITableViewCellAccessoryCheckmarkたとえば、自分のをロールバックする方法に関するリンクはありますか?ありがとう。
Dan Rosenstark、2011

6
それを見るために、時にはあなたは、設定する必要がありますcell.textLabel.backgroundColor = [UIColor clearColor];
エヴァンモラン

205

これは、この問題を解決するために出会った最も効率的な方法です。willDisplayCellデリゲートメソッドを使用します(これは、cell.textLabel.textやcell.detailTextLabel.textを使用するときに、テキストラベルの背景の白色も処理します。 ):

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { ... }

このデリゲートメソッドが呼び出されると、次のように、セルの色はテーブルビューではなくセルを介して制御されます。

- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath { ... }

したがって、セルデリゲートメソッドの本文内で、次のコードをセルの代替色に追加するか、関数呼び出しを使用して、テーブルのすべてのセルを同じ色にします。

if (indexPath.row % 2)
{
    [cell setBackgroundColor:[UIColor colorWithRed:.8 green:.8 blue:1 alpha:1]];
}
else [cell setBackgroundColor:[UIColor clearColor]];

このソリューションは私の状況でうまくいきました...


これは、よりクリーンなソリューションです。他のほとんどのソリューションでは、UITableViewCellをサブクラス化する必要があります。vlado.grigorovのソリューションは私にとっては機能しません。
Ronnie Liew、2010年

確かに、これは私が見たさまざまなWWDCプレゼンテーションによるとApple自身が推奨する方法です。
マイクウェラー

ニース-リストの一番上に新しい行を追加する必要がある場合を除きます。このメソッドは、すべての追加を同じ色にします。更新では修正されますが、不必要な時間がかかります。昨日判明した...
JOM 2010

Core Dataを使用する場合を除いて、これはうまく機能するようです。NSFetchedResultsControllerを介して追加された新しいセルは、willDisplayCellを正しく呼び出していないようです。私はそれを機能させるのに途方に
暮れてい

Swift 2.0で背景色を設定するための同等の行:cell.backgroundColor = UIColor.clearColor
kbpontius

104

OS 3.0はwillDisplayCellメソッドでセルの背景色を設定するだけなので、これは本当に簡単です。cellForRowAtIndexPathに色を設定しないでください。

これは、プレーンスタイルとグループスタイルの両方で機能します。

コード:

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

PS:willDisplayCellのドキュメントの抜粋:

「テーブルビューは、セルを使用して行を描画する直前にこのメッセージをデリゲートに送信します。これにより、デリゲートがセルオブジェクトを表示する前にカスタマイズできるようになります。このメソッドにより、デリゲートは前に設定した状態ベースのプロパティをオーバーライドできます。選択や背景色などのテーブルビュー。デリゲートが戻った後、テーブルビューはアルファとフレームのプロパティのみを設定し、その後、行をスライドインまたはスライドアウトするときにのみアニメーション化します。

colionelからのこの投稿でこの情報を見つけました。ありがとう!


3
開示があれば何もする必要がないので、これは正解としてマークする必要があります。
指標

1
テーブルビューの背景とは異なるセルの背景色が必要な場合、これは機能しません。
Chris

グループセルの場合は、cellForRowに設定できます
Sharen Eayrs '29 / 11/29

58

これまでに見つけた最良のアプローチは、セルの背景ビューを設定し、セルサブビューの背景をクリアすることです。もちろん、これはインデックス付きスタイルのみのテーブルで、アクセサリの有無に関係なく見栄えがします。

以下は、セルの背景が黄色にパントされたサンプルです。

UIView* backgroundView = [ [ [ UIView alloc ] initWithFrame:CGRectZero ] autorelease ];
backgroundView.backgroundColor = [ UIColor yellowColor ];
cell.backgroundView = backgroundView;
for ( UIView* view in cell.contentView.subviews ) 
{
    view.backgroundColor = [ UIColor clearColor ];
}

1
これを行う場合は、不透明プロパティも必ずNOに設定してください。
リリーバラード

11
透明なセルコントロールを使用することは、お勧めできません。スクロールのパフォーマンスは大きく影響を受けるため、Appleは常に不透明なコントロールを使用するように言っています。
マイクウェラー

3
iOS 4.2以降では、ループが不要になったようです。
フランクシュミット2011年

非常に素晴らしい。アクセサリビューを使用する場合に最適です。
RyanG 2012年

19

これをUITableViewデリゲートクラスファイル(.m)に置くだけです。

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell  forRowAtIndexPath:(NSIndexPath *)indexPath 
{
    UIColor *color = ((indexPath.row % 2) == 0) ? [UIColor colorWithRed:255.0/255 green:255.0/255 blue:145.0/255 alpha:1] : [UIColor clearColor];
    cell.backgroundColor = color;
}

7

Sebaと同意し、rowForIndexPathデリゲートメソッドで交互の行の色を設定しようとしましたが、3.2と4.2の間で一貫性のない結果が得られていました。以下は私にとってはうまくいきました。

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {

    if ((indexPath.row % 2) == 1) {
        cell.backgroundColor = UIColorFromRGB(0xEDEDED);
        cell.textLabel.backgroundColor = UIColorFromRGB(0xEDEDED);
        cell.selectionStyle = UITableViewCellSelectionStyleGray;
    }
    else
    {
        cell.backgroundColor = [UIColor whiteColor];
        cell.selectionStyle = UITableViewCellSelectionStyleGray;
    }

}

1
willDisplayCellで設定すると違いが生じる理由はまだわかりません。それを実装するかどうかにかかわらず、とにかく呼び出されますか?
Sharen Eayrs 2012年

6

すべての異なるソリューションを試した後、次の方法が最もエレガントな方法です。次のデリゲートメソッドで色を変更します。

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

4

vlado.grigorovにはいくつかの良いアドバイスがあります。最善の方法は、backgroundViewを作成して色を付け、それ以外のすべてをclearColorに設定することです。また、私はその方法が色を正しくクリアする唯一の方法だと思います(彼のサンプルを試してください-しかし、「yellowColor」の代わりに「clearColor」を設定してください)、これは私がやろうとしていたことです。


このアプローチの利点は、インターフェイスビルダーでデザイン時のプロパティの色を維持できることです。開発者とのやり取りを必要とする設計上の問題が1つ少なくなります。
ホイットニーランド2011

1
cell.backgroundView = [[[UIView alloc] initWithFrame:cell.bounds] autorelease]; cell.backgroundView.backgroundColor = [UIColor redColor];
ブライアン

3

テーブルビューセルの背景のカスタマイズは、最終的には「オールオアナッシング」アプローチになります。コンテンツセルの背景に使用する色や画像を、見た目が悪くないように変更することは非常に困難です。

その理由は、セルが実際にはビューの幅にまたがっているためです。丸みを帯びた角は描画スタイルの一部であり、コンテンツビューはこの領域にあります。

コンテンツセルの色を変更すると、隅に白いビットが表示されます。セル全体の色を変更すると、ビューの幅全体にわたる色のブロックができます。

セルを確実にカスタマイズすることはできますが、最初に考えるほど簡単ではありません。


1
これは間違いなくグループ化されたテーブルのセルに当てはまりますが、プレーンテーブルはそれほど心配する必要はありません。アクセサリのない飾り気のないセルは問題なく表示されます。
ベン・ゴットリーブ

ベン-良い点。私は主にグループ化されたテーブルを使用しますが、プレーンテーブルでこれらの問題が発生することはありません。
Andrew Grant、

3

ビューを作成し、これをセルの背景ビューとして設定します

UIView *lab = [[UIView alloc] initWithFrame:cell.frame];
            [lab setBackgroundColor:[UIColor grayColor]];
            cell.backgroundView = lab;
            [lab release];

3

N.Berendtの答えを拡張するには-実際のセルデータオブジェクトの一部の状態に基づいてセルの色を設定する場合、テーブルセルの残りの情報を構成するときに、これは通常、 cellForRowAtIndexPathメソッドでは、willDisplayCellメソッドをオーバーライドしてコンテンツビューの背景色からセルの背景色を設定することでこれを行うことができます。これにより、開示ボタンの背景などの問題が回避されますが、cellForRowAtIndexPathメソッドで色を制御できます。他のすべてのセルのカスタマイズを行う場所。

したがって、このメソッドをテーブルビューデリゲートに追加すると、次のようになります。

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

次に、cellForRowAtIndexPathメソッドで次のことができます。

if (myCellDataObject.hasSomeStateThatMeansItShouldShowAsBlue) {
    cell.contentView.backgroundColor = [UIColor blueColor];
}

これにより、willDisplayCellメソッドでデータオブジェクトを再度取得する必要がなくなり、テーブルセルの調整/カスタマイズを行う2つの場所が節約されます。すべてのカスタマイズはcellForRowAtIndexPathメソッドで行うことができます。


3

Photoshopまたはgimpで背景として使用する画像を作成し、myimageという名前を付けます。次に、このメソッドをtableViewControllerクラスに追加します。

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    UIImage *cellImage = [UIImage imageNamed:@"myimage.png"];//myimage is a 20x50 px with  gradient  color created with gimp
    UIImageView *cellView = [[UIImageView alloc] initWithImage:cellImage];
    cellView.contentMode = UIContentViewModeScaleToFill;
    cell.backgroundView = cellView;
    //set the background label to clear
    cell.titleLabel.backgroundColor= [UIColor clearColor];
}

これは、属性インスペクターでUITableViewをカスタムに設定した場合にも機能します。


2

私の解決策は、次のコードをcellForRowAtIndexPathイベントに追加することです。

UIView *solidColor = [cell viewWithTag:100];
if (!solidColor) {

    solidColor = [[UIView alloc] initWithFrame:cell.bounds];
    solidColor.tag = 100; //Big tag to access the view afterwards
    [cell addSubview:solidColor];
    [cell sendSubviewToBack:solidColor];
    [solidColor release];
}
solidColor.backgroundColor = [UIColor colorWithRed:254.0/255.0
                                             green:233.0/255.0
                                              blue:233.0/255.0
                                             alpha:1.0];

どのような状況でも機能し、開示ボタンがあっても、cellWillShowイベントよりもcellForRowAtIndexPathのセルの色の状態をロジックで処理する方が適切だと思います。


1

UITableViewCellをサブクラス化し、これを実装に追加します。

-(void)layoutSubviews
{
    [super layoutSubviews];
    self.backgroundColor = [UIColor blueColor];
}

1
    UIView *bg = [[UIView alloc] initWithFrame:cell.frame];
    bg.backgroundColor = [UIColor colorWithRed:175.0/255.0 green:220.0/255.0 blue:186.0/255.0 alpha:1]; 
    cell.backgroundView = bg;
    [bg release];

1

これは最新のXcodeで動作します。

-(UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath {
    cell.backgroundColor = [UIColor grayColor];
}

0

これを試して:

- (void)tableView:(UITableView *)tableView1 willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    [cell setBackgroundColor:[UIColor clearColor]];
    tableView1.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: @"Cream.jpg"]];
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.