web-dev-qa-db-ja.com

UITableViewの「バウンス領域」の明るい灰色の背景

MusicやContantsなどのAppleのiPhoneアプリは、UITableViewの検索バーを使用します。検索バーが下に移動するように下にスクロールすると、スクロールビューのコンテンツの上の空のスペースは明るい灰色の背景色になります（スクリーンショットを参照）。

Screenshot of Contacts app showing light gray background

（検索バーの上部にわずかに暗いEdgeラインがあることに注意してください。これはデフォルトのUISearchBarにはありませんが、サブクラス化がそれを処理する必要があります。）

UITableViewの背景色を設定しようとしましたが、行にも影響します。誰もこの効果を達成する方法を知っていますか？ drawRectの実装をオーバーライドする必要がありますか、それとも組み込みの方法がありますか？

iphoneuitableviewuikituisearchbar
49
T .

IOS 7の時点では、TableViewの背景ビューを変更することでこれを調整できます。

[self.tableView setBackgroundView:view];

ビューの背景色を親ビューの色と同じにします。

19
HusseinB

透明度を設定すると、パフォーマンスが低下します。必要なのは、検索バーの上にある灰色の領域ですが、リストの最後を超えてまだ白いはずです。

代わりに、コンテンツの上にあるサブビューをUITableViewに追加できます。

CGRect frame = self.list.bounds;
frame.Origin.y = -frame.size.height;
UIView* grayView = [[UIView alloc] initWithFrame:frame];
grayView.backgroundColor = [UIColor grayColor];
[self.listView addSubview:grayView];
[grayView release];

UISearchBarをサブクラス化せずに、必要に応じてビューに派手なものを追加することができます。

38
PeyloW

これは私のお気に入りのトリックの1つです。

UIView *topview = [[[UIView alloc] initWithFrame:CGRectMake(0,-480,320,480)] autorelease];
topview.backgroundColor = [UIColor colorWithRed:226.0/255.0 green:231.0/255.0 blue:238.0/255.0 alpha:1];

[self.tableView addSubview:topview];

基本的に、画面サイズの大きなビューを作成し、コンテンツ領域の「上」に配置します。それを超えてスクロールすることはできません。

また、320x480ピクセルのUIViewのメモリへの影響について心配する必要はありません。CALayerには意味のあるコンテンツがないため、大きなメモリを消費しません。

注：「受け入れられた」回答が非常に単純な場合に、この回答が関連するのはなぜですか？テーブルビューにbackgroundViewを設定しないのはなぜですか？元の質問に示されている連絡先アプリの場合、テーブルビューの「上」の領域にdifferent背景色（明るい青）テーブルビューの「下」の領域（白）より。この手法を使用すると、テーブルビューの上下に2つの異なる色を使用できますが、これは単純な背景では実現できません。

EDIT 1/2018：トムがコメントで指摘したように、この答えはかなり古く、すべてのiOSデバイスの画面サイズが同じであると仮定しています）。ここで提示する概念はまだ機能しますが、UIScreen.main.boundsを使用してactual画面サイズを把握する必要があります。自動レイアウトのもの（提案を歓迎）。別の回答のようにtableView.boundsを使用することはお勧めしません。通常viewDidLoadでは、ビューのサイズは必ずしもコントローラーがサイズを変更した後のサイズになるとは限らないためです。時々、それらは0x0として始まります！

29
Nick Farina

HusseinBの提案 を拡張するには：

Swift 3

let bgView = UIView()
bgView.backgroundColor = UIColor.white
self.tableView.backgroundView = bgView

目的C

UIView *bgView = [UIView new];
bgView.backgroundColor = [UIColor whiteColor];
[self.tableView setBackgroundView:bgView];
18
budidino

このコードはSwift fot UITableViewで動作します：

var frame = self.tableView.bounds
frame.Origin.y = -frame.size.height
frame.size.height = frame.size.height
frame.size.width = UIScreen.mainScreen().bounds.size.width
let blueView = UIView(frame: frame)
blueView.backgroundColor = UIColor.headerBlueColor()
self.tableView.addSubview(blueView)
8
Danny

Swift（iOS9でテスト済み）

    let backView = UIView(frame: self.tableView.bounds)
    backView.backgroundColor = UIColor.clearColor() // or whatever color
    self.tableView.backgroundView = backView
7
user3903523

自分でこの問題に遭遇し、解決策を見つけました。

原因

Spark Inspector を使用して、Table Viewのレイアウトを調べました-これは本当に役立ちました。

つまり、このシナリオでは、UITableViewには3つのサブビューがあります。

  1. UITableViewWrapperView
  2. UIView-backgroundColorが明るい灰色に設定されている場合
  3. UISearchBar

テーブルビューのコンテンツを下にスワイプすると、2番目のサブビューの高さが動的に増加し、UITableViewWrapperViewとUITableViewフレームの原点の間のスペースが埋められます。

解決

backgroundColorまたはbackgroundViewプロパティを設定しても、2番目のサブビューには影響しません。次のように、2番目のビューを見つけて色を変更する必要があります。

if (_tableView.subviews.count > 1) {
    _tableView.subviews[1].backgroundColor = THE_TARGET_COLOR;
}

私の場合、すべてのビューを白にする必要があったため、次の方法を使用しました。これにより、AppleによるUITableViewビュー階層の将来の変更が少なくなります。

for (UIView *subview in _tableView.subviews) {
    subview.backgroundColor = [UIColor whiteColor];
}
4
Tom Susel

最も簡単なソリューション

テーブルビューのバウンス領域の下部と上部に異なる色を作成する最も簡単な方法は、テーブルビューのキーtableHeaderBackgroundColorを設定することです。この方法で、上部の色を設定します。よくわかりませんが、フッターに別のキーがあるかもしれません。見てください。何も見つからない場合は、Table Viewの背景を下に表示したい色に設定するだけです。上の例のコードを見ることができます：

self.table.setValue(UIColor.blue , forKey: "tableHeaderBackgroundColor")

お役に立てば幸いです。はいの場合、他の人に答えを断念するこの簡単な方法を知らせてください:)

4
Alcivanio

これを行う方法は1つしかありません。 UITableViewのbackgroundColorを透明に設定し、セルのcontentViewのbackgroundColorを実際のセルの色に設定する必要があります。そして、UITableViewの背後にライトグレーの色を表示する必要があります。 UIWindowのbackgroundColourを設定するか、tableViewControllerに含まれているものを設定することにより、最後のステップを実行できます。

したがって、UITableViewControllerから派生したView Controllerがあると仮定して、これらの行を-（void）viewDidLoadメソッドに挿入します。

// sets the background of the table to be transparent
self.tableView.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.0];
// assuming we are inside a navigation or tab controller, set the background
self.parentViewController.view.backgroundColor = [UIColor lightGrayColor];

次に、新しいセルを作成するtableView：cellForRowAtIndexPath：の一部に、以下を追加します-

// set an opaque background for the cells 
cell.contentView.backgroundColor = [UIColor whiteColor];
4
U62

これを行う最良の方法を提供します。
最初に、Table Viewの背景色をインターフェイスビルダーで必要な色に設定します。
次に、UITableViewデリゲートに応答しますtableView:willDisplayCell:ForIndexPath:このようなメソッド

- (void)tableView:(UITableView*)tableView willDisplayCell:(UITableViewCelll*)cell forIndexPath:(NSINdexPath*)indexPath
{
     [cell setBackgroundColor:[UIColor whiteColor]];
}


別の方法は次のとおりです。
ViewDidLoadメソッド（または任意の場所）で、tableViewバックグラウンドカラーを次のようにクリアカラーに設定します。

self.tableView.backgroundColor = [UIColor clearColor];

そして、スーパービューの色を白に設定します

self.tableView.superview.backgroundColor = [UIColor whiteColor];
3
Basheer_CAD

DrawRectをオーバーライドしたいとは思わない。ほとんどの場合、表示されているのは、テーブルビューの「背後」にある（つまりスーパービューである）別のビューまたはウィンドウの背景色です。通常、AppleのUIウィジェットには、かなり複雑なUIViewのレイヤーがあります。 GDBでビュー階層を探索し、[myView superview]を見てから[someSuperView subviews]を見て、デバッガーでBGカラーを操作して、どのカラーが見つかるかを確認してください。ただし、この方法で修正を実装する場合は、将来の互換性がない可能性があることに注意してください。

Interface Builderのtableviewの背後にあるビューの1つ（またはウィンドウ自体）のBGカラーを設定することもできます。

1
Simon Woodside

Tableviewcellを使用している場合、ビューの背景を不透明な白に設定できます。次に使用する

self.tableView.backgroundColor = [UIColor grayColor];

ビューでメソッドをロードしました。

0
Jonah

サブテーブルを追加するだけで、Peylowが概説したUITableViewのヒントに従いました。コードからの私の唯一の変更は、Appleアプリで使用されている色に少し近い色を取得することでした。さらに、フレームの原点のy座標を1ピクセルずつ：

frame.Origin.y = -frame.size.height - 1
0
petert

それが[UITableView backgroundColor]であると確信しています。行にはbackgroundColor == clear（または半透明）があるため、行に影響があります。したがって、行を非透過にすると、すべてが正常に機能します。これが解決策になります。

0
tt.Kilew

ボトムバウンスエリアに同じことをする方法を知りたい人のために：

まず、目的の背景色のサブビューをテーブルビューの背景ビューに追加します。

self.bottomView = [[UIView alloc] initWithFrame:CGRectOffset(self.tableView.frame, 0, self.tableView.frame.size.height)];
self.bottomView.backgroundColor = whateverColorYouLike;

[self.tableView.backgroundView addSubview:self.bottomView];

そして、テーブルビューのデリゲートで：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGRect frame = self.bottomView.frame;
    frame.Origin.y = self.tableView.contentSize.height - self.tableView.contentOffset.y;
    self.bottomView.frame = frame;
}
0
soheilpro