it-swarm.com.de

Hellgrauer Hintergrund im "Bounce-Bereich" einer UITableView

Apples iPhone-Apps wie Music und Contants verwenden eine Suchleiste in einer UITableView. Wenn Sie nach unten scrollen, damit sich die Suchleiste nach unten bewegt, hat der leere Bereich über dem Inhalt der Bildlaufansicht eine hellgraue Hintergrundfarbe (siehe Abbildung).

Screenshot of Contacts app showing light gray background

(Beachten Sie, dass die Suchleiste oben eine etwas dunklere Edge-Linie hat. Dies ist nicht für die Standard-UISearchBar vorgesehen, dies sollte jedoch durch Unterklassen geregelt werden.)

Ich habe versucht, die Hintergrundfarbe der UITableView einzustellen, aber das wirkt sich auch auf die Zeilen aus. Weiß jemand, wie man diesen Effekt erzielen kann? Muss ich die Implementierung von drawRect überschreiben? Oder gibt es einen integrierten Weg?

46
T .

Ab iOS 7 können Sie dies ändern, indem Sie die Hintergrundansicht der Tabellenansicht ändern.

[self.tableView setBackgroundView:view];

stellen Sie die Hintergrundfarbe der Ansicht mit der Farbe der übergeordneten Ansicht ein.

18
HusseinB

Das Einstellen von Transparentfolien ist schlecht für die Leistung. Was Sie möchten, ist der graue Bereich über der Suchleiste, der jedoch immer über dem Ende der Liste weiß sein sollte.

Sie können Ihrer UITableView eine Unteransicht hinzufügen, die sich stattdessen über dem Inhalt befindet.

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

Wenn Sie möchten, können Sie der Ansicht mehr schickes Material hinzufügen, vielleicht eine Überblendung oder eine Trennlinie, ohne UISearchBar.

38
PeyloW

Dies ist einer 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];

Grundsätzlich erstellen Sie eine große Ansicht in der Größe des Bildschirms und platzieren diese "über" dem Inhaltsbereich. Sie werden niemals in der Lage sein, daran vorbei zu scrollen.

Machen Sie sich keine Sorgen über die Auswirkungen eines UIView mit einer Auflösung von 320x480 Pixeln. Es wird keinen bedeutenden Speicherplatz beanspruchen, da der CALayer keinen sinnvollen Inhalt hat.

HINWEIS: Warum ist diese Antwort relevant, wenn die "akzeptierte" Antwort so viel einfacher ist? Warum setzen Sie nicht einfach die Variable backgroundView in der Tabellenansicht? Dies liegt daran, dass bei der Kontakte-App, wie in der ursprünglichen Frage gezeigt, der Bereich "über" der Tabellenansicht eine andere Hintergrundfarbe (hellblau) hat als der Bereich "unter" der Tabellenansicht (weiß). . Diese Technik ermöglicht es Ihnen, zwei verschiedene Farben über und unter der Tabellenansicht zu haben, was durch einen einfachen Hintergrund nicht erreicht werden kann.

EDIT 1/2018: Wie Tom in den Kommentaren hervorgehoben hat, ist diese Antwort ziemlich alt und geht davon aus, dass alle iOS-Geräte die gleiche Bildschirmgröße haben (scheint verrückt zu sein, aber es war 2009 der Fall, als ich darauf antwortete). Das Konzept, das ich hier vorstelle, funktioniert immer noch, aber Sie sollten UIScreen.main.bounds verwenden, um die Bildschirmgröße von actual herauszufinden, oder Sie könnten in ein paar ausgefallene Auto-Layout-Elemente geraten (Vorschläge sind willkommen). Ich empfehle nicht, tableView.bounds wie in einer anderen Antwort zu verwenden, da in viewDidLoad normalerweise die Größe Ihrer Ansichten nicht unbedingt die Größe ist, die sie nach der Größenänderung des Controllers annehmen. Manchmal fangen sie mit 0x0 an!

27
Nick Farina

Erweiterung auf HusseinBs Vorschlag :

Swift 3

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

Ziel c

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

In Swift (getestet auf iOS9)

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

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)
7
Danny

Ich bin gerade auf dieses Problem gestoßen und habe eine Lösung gefunden.

Ursache

Ich habe Spark Inspector verwendet, um das Layout der Tabellenansicht zu untersuchen - was wirklich geholfen hat.

Die Sache ist, dass in diesem Szenario die UITableView 3 Unteransichten hat:

  1. UITableViewWrapperView
  2. UIView - Wenn backgroundColor auf hellgraue Farbe eingestellt ist 
  3. UISearchBar

Während Sie den Inhalt der Tabellenansicht nach unten streichen, nimmt die Höhe der zweiten Unteransicht dynamisch zu, um den Abstand zwischen der UITableViewWrapperView- und der UITableView-Quelle zu füllen.

Lösung

Das Festlegen der backgroundColor- oder backgroundView-Eigenschaft wirkt sich nicht auf die zweite Unteransicht aus Sie müssen die zweite Ansicht suchen und ihre Farbe ändern, z.

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

In meinem Fall brauchte ich alle Ansichten, um weiß zu sein, daher habe ich Folgendes verwendet, was weniger anfällig für zukünftige Änderungen der UITableView-Ansichtshierarchie durch Apple ist:

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

Ich habe nur einen Weg gefunden, dies zu tun. Sie müssen die backgroundColor der UITableView transparent einstellen, die backgroundColor der contentView der Zelle auf die gewünschte Farbe der Zellen setzen und dann die hellgraue Farbe hinter der UITableView anzeigen. Diesen letzten Schritt können Sie entweder durch Setzen der backgroundColour des UIWindow oder dessen Inhalt oder Ihres tableViewControllers vornehmen.

Wenn Sie also einen View-Controller haben, der von UITableViewController abgeleitet ist, fügen Sie diese Zeilen in die - (void) viewDidLoad-Methode ein: -

// 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 im Teil von tableView: cellForRowAtIndexPath: der neue Zellen erstellt, fügen Sie hinzu: -

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

Ich gebe Ihnen den besten Weg, dies zu tun.
Legen Sie zunächst die Hintergrundfarbe der Tabellenansicht auf die im Interface Builder gewünschte Farbe fest.
.__ Antworten Sie dann auf die UITableView-Delegierte tableView:willDisplayCell:ForIndexPath:-Methode

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


Eine andere Methode ist:
In der ViewDidLoad-Methode (oder an einem beliebigen Ort) setzen Sie die tableView-Hintergrundfarbe so, dass die Farbe so gelöscht wird:

self.tableView.backgroundColor = [UIColor clearColor];

und setzen Sie dann die Superviewfarbe auf Weiß

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

EINFACHSTE LÖSUNG

Die einfachste Möglichkeit, verschiedene Farben im unteren und oberen Bereich eines Absprungbereichs einer Tabellenansicht zu erstellen, besteht darin, den Schlüssel tableHeaderBackgroundColor der Tabellenansicht einzustellen. Auf diese Weise stellen Sie die obere Farbe ein. Ich bin mir nicht sicher, aber vielleicht gibt es einen weiteren Schlüssel für die Fußzeile. Wenn Sie nichts finden, müssen Sie nur den Hintergrund der Tabellenansicht mit der Farbe einstellen, die Sie unten anzeigen möchten. Oben sehen Sie einen Beispielcode: 

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

Ich hoffe es hilft dir. Wenn ja, lassen Sie andere Leute wissen, wie einfach es ist, die Antwort aufzugeben :)

2
Alcivanio

Ich denke nicht, dass Sie drawRect überschreiben wollen. Am wahrscheinlichsten sehen Sie die Hintergrundfarbe einer anderen Ansicht oder des Fensters, das "hinter" (d. H. Einer Übersicht der Tabellenansicht) liegt. In den UI-Widgets von Apple gibt es normalerweise recht komplexe Ebenen von UIViews. Sehen Sie sich die Ansichtshierarchie in GDB an, sehen Sie sich [myView Superview] und dann [someSuperView-Subansichten] an, und ändern Sie die Hintergrundfarben Ihres Debuggers, um zu sehen, ob Sie welche finden. Wenn Sie einen Fix auf diese Weise implementieren, seien Sie jedoch gewarnt, dass er möglicherweise nicht zukünftig kompatibel ist.

Sie können auch versuchen, die Hintergrundfarbe einer der Ansichten hinter der TableView in Interface Builder (oder des Fensters selbst) festzulegen.

1
Simon Woodside

Wenn Sie eine tableviewcell verwenden, können Sie den Hintergrund der Ansicht auf deckend weiß setzen. Dann benutze

self.tableView.backgroundColor = [UIColor grayColor];

in der Ansicht hat Methode geladen.

0
Jonah

Ich folgte dem von Peylow skizzierten Tipp für eine UITableView, indem ich einfach eine Unteransicht hinzufügte. Meine einzige Änderung gegenüber dem Code bestand darin, eine Farbe ein wenig näher an die in Apple-Apps verwendete Farbe heranzuführen. Außerdem habe ich Apples Aussehen, eine Linie über der UISearchbar zu haben, etwas näher gebracht, indem der Frame-Ursprung und die Koordinate um ein Pixel reduziert wurden:

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

Ich bin sicher, das ist [UITableView backgroundColor] . Sie haben Zeilen beeinflusst, da Zeilen backgroundColor == clear (oder semi-transparent) ..__ haben wird gut funktionieren. Dies wird eine Lösung sein.

0
tt.Kilew

Für alle, die sich fragen, wie sie das Gleiche für den unteren Sprungbereich machen sollen

Fügen Sie der Hintergrundansicht Ihrer Tabellenansicht zunächst eine Unteransicht mit der gewünschten Hintergrundfarbe hinzu:

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 im Delegat Ihrer Tabellenansicht:

- (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