Hellgrauen Hintergrund in „Bounce-Bereich“ einen UITableView

Question

Apples iPhone-Anwendungen wie Musik und Inhalte auch verwenden, um eine Suchleiste in einer UITableView. Wenn Sie nach unten scrollen, so dass die Suchleiste nach unten bewegt, der leere Raum über den Inhalt des Scroll-Ansicht hat einen hellgrauen Hintergrundfarbe (siehe Screenshot).

(Beachten Sie, dass die Suchleiste eine etwas dunklere Randlinie an seinem oberen Ende hat. Dies ist für die Standard-UISearchBar nicht da ist, aber Subklassifizieren sollte sich darum kümmern.)

Ich habe versucht, die Hintergrundfarbe der UITableView Einstellung, aber das wirkt sich auf die Zeilen als auch. Wer weiß, wie diese Wirkung zu erzielen? Werde ich außer Kraft setzen müssen drawRect implementieren: oder gibt es in Art und Weise über einen eingebauten

?

Answer 1

Wie von iOS 7, können Sie dies basteln, indem die Tableview Hintergrund Ansicht zu ändern.

[self.tableView setBackgroundView:view];

macht die Hintergrundfarbe der Ansicht die gleichen wie Ihre übergeordnete Ansicht Farbe.

Answer 2

Folien Einstellung ist schlecht für die Leistung. Was Sie wollen, ist der graue Bereich oberhalb der Suchleiste, aber es sollte noch über das Ende der Liste weiß sein.

Sie können eine Subview zu Ihrem UITableView hinzufügen, die stattdessen über den Inhalt lebt.

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];

Sie können mehr fancy stuff zu der Ansicht, wenn Sie möchten, vielleicht ein fade, oder eine Trennlinie ohne UISearchBar Subklassen.

Answer 3

Dies ist eines meiner Lieblingstricks.

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];

Im Grunde sind erstellen Sie eine große Ansicht, die die Größe des Bildschirms und es „über“ den Inhaltsbereich platzieren. Sie werden nie daran vorbei, um nach oben können.

Und keine Sorge über die Speicher Auswirkungen eines UIView, die 320x480 Pixel ist, wird es keinen signifikanten Speicher verbrauchen, weil die CALayer keinen sinnvollen Inhalt hat.

Hinweis: Warum ist diese Antwort dann relevant, wenn die "akzeptiert" Antwort ist so viel einfacher? Warum setzt nicht nur die backgroundView auf dem Tisch Ansicht? Es ist, weil im Fall der Kontakte-Anwendung wie in der ursprünglichen Frage gezeigt, der Bereich „oben“ die Tabellenansicht, die ein andere Hintergrundfarbe (hellblau) als der Bereich „unterhalb“ die Tabellenansicht hat (Weiß). Diese Technik ermöglicht es Ihnen, über und unter der Tabellenansicht zwei verschiedene Farben zu haben, die durch einen einfachen Hintergrund erreicht nicht werden.

EDIT 1/2018: Wie Tom in den Kommentaren darauf hingewiesen, ist diese Antwort schon recht alt und geht davon aus, dass alle iOS-Geräte die gleiche Bildschirmgröße haben (scheinen verrückt, aber es war der Fall im Jahr 2009, wenn ich antwortete, dies). Das Konzept, das ich hier noch vorhanden funktioniert, aber man sollte UIScreen.main.bounds verwenden, um herauszufinden, die ist Bildschirmgröße, oder Sie können in einem ausgefallenen Auto Layout Zeug (Vorschläge willkommen). Ich empfehle, nicht tableView.bounds wie in einer anderen Antwort verwenden, weil in der Regel in viewDidLoad die Größe Ihrer Ansichten nicht unbedingt die Größe, die sie werden werden, nachdem die Controller sie ändert die Größe. Manchmal beginnen sie als 0x0 aus!

Answer 4

Zur Erweiterung auf HusseinB Vorschlag :

Swift 3

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

Objective C

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

Answer 5

Dieser Code funktioniert in 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)

Answer 6

Swift (getestet auf iOS9)

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

Answer 7

Ich habe festgestellt, nur einen Weg, dies zu tun. Sie haben die Backgroundcolor des UITableView setzen transparent zu sein, stellen Sie die Backgroundcolor der content der Zelle zu, was Farbe Sie die tatsächlichen Zellen sein wollen, dann entscheidend, müssen Sie die hellgraue Farbe bekommen hinter dem UITableView erscheinen. Dieser letzte Schritt, den Sie können entweder tun, um die backgroundColour der UIWindow Einstellung, oder was auch immer enthält, oder Ihre Tableviewcontroller.

Also, vorausgesetzt, Sie einen View-Controller haben, die von UITableViewController abgeleitet ist, legen Sie diese Zeilen in die - (void) viewDidLoad Methode: -

// 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];

Dann innerhalb des Teils von Tableview: cellForRowAtIndexPath: die neuen Zellen erzeugt, fügen: -

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

Answer 8

Ich traf gerade dieses Problem selbst und fand eine Lösung.

Ursache

Ich habe Inspector Funken das Layout der Tabellenansicht zu prüfen -., Die wirklich geholfen

Das Ding ist, dass in diesem Szenario die UITableView hat 3 Subviews:

1. UITableViewWrapperView
2. UIView - Mit backgroundColor auf hellgraue Farbe gesetzt
3. UISearchBar

Während Sie den Inhalt nach unten Tableview Swipe, die zweiten subview Höhe dynamisch erhöht den Raum zwischen den UITableViewWrapperView und der UITableView Rahmen Herkunft zu füllen.

Lösung

die backgroundColor oder backgroundView Eigenschaft Einstellung wird die 2. subview nicht bewirken. Was Sie brauchen, ist die zweite Ansicht zu tun finden und seine Farbe ändern, etwa so:

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

In meinem Fall musste ich alle Ansichten weiß sein, so habe ich die folgenden, die auf künftige Änderungen der UITableView Ansicht Hierarchie von Apple weniger anfällig ist:

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

Answer 9

einfachste Lösung

Der einfachste Weg, verschiedene Farben im Boden und in der Spitze eines Prellen Bereich einer Tabellenansicht zu erstellen, ist der Schlüssel zu setzen tableHeaderBackgroundColor der Tabellenansicht. Auf diese Weise können Sie die Top-Farbe eingestellt. Ich bin nicht sicher, aber vielleicht gibt es einen anderen Schlüssel für die Fußzeile, einen Blick darauf werfen. Wenn Sie nichts finden, müssen Sie nur mit der Farbe des Hintergrunds der Tabellenansicht einstellen, die Sie im unten zeigen wollen. Oberhalb Sie ein Beispiel-Code sehen:

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

Hoffe, dass es Ihnen helfen. Wenn ja, lassen Sie andere Menschen wissen über diese einfache Möglichkeit, ein bis in die Antwort zu geben:)

Answer 10

Ich gibt Ihnen den besten Weg, dies zu tun.
Zuerst stellen Sie die Hintergrundfarbe der Tabellenansicht auf die, die Sie im Interface Builder wollen.
Dann reagieren auf die UITableView Delegierten tableView:willDisplayCell:ForIndexPath: Verfahren wie diese

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

Eine andere Methode ist:
in ViewDidLoad Methode setzen Sie den tableView Hintergrundfarbe (oder überall Sie mögen) Farbe wie diese zu löschen:

self.tableView.backgroundColor = [UIColor clearColor];

und dann die Super Farbe weiß

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

Answer 11

Ich glaube nicht, Sie drawRect außer Kraft setzen möchten. Wahrscheinlich, was Sie sehen, ist die Hintergrundfarbe einer anderen Ansicht oder das Fenster, die „hinter“ liegt (das heißt eine Überblicks von) der Tabellenansicht. Es gibt in der Regel eine ziemlich komplexe Schichten von UIViews in Apples UI-Widgets. Entdecken Sie die Ansicht Hierarchie in GDB, Blick auf [myView Super] und dann [someSuperView Subviews] und versuchen, ihre BG Farben im Debugger zu manipulieren, um zu sehen, wenn Sie feststellen können, welches es ist. Wenn Sie jedoch ein Update auf diese Weise implementieren, wird gewarnt, dass es nicht Zukunft kompatibel sein kann.

Sie können auch versuchen, die BG Farbe von einem der Ansichten hinter dem Tableview in Interface Builder (oder das Fenster selbst) zu setzen.

Answer 12

Wenn Sie eine tableviewcell verwenden, können Sie die Ansicht Hintergrund undurchsichtig weiß. Dann nutzen

self.tableView.backgroundColor = [UIColor grayColor];

in der Ansicht Load-Methode hat.

Answer 13

Ich bin sicher, dass das ist [UITableView Backgroundcolor]. Sie haben Zeilen betroffen, weil Reihen haben == Backgroundcolor klar (oder halbtransparent). Also, wenn Sie Zeilen nicht-trasparent machen werden, wird alles gut funktionieren. Dies wird Lösung.

Answer 14

Ich folgte die von Peylow skizzierte Spitze, für eine UITableView, indem einfach ein Subview hinzufügen. Meine einzige Änderung aus dem Code war eine Farbe ein wenig näher an dem einen in Apple-Anwendungen verwendet zu packen, und ich habe es ein bisschen näher an Apples Aussehen eine Linie oberhalb des UISearchBar aufweist, durch den Rahmen Ursprung Verringerung y um ein Pixel-Koordinate:

frame.origin.y = -frame.size.height - 1

Answer 15

Für jeden, der fragt sich, wie das gleiche für den Boden prallen Bereich zu tun:

Zuerst ein Subview mit Ihrer gewünschten Hintergrundfarbe zu Ihrem Tisch Ansicht der Hintergrund-Ansicht:

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];

Und dann in der Tabelle nach Ansicht der Delegierten:

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