Fond gris clair dans la zone de rebond d’un UITableView

Les applications iPhone d’Apple telles que Music et Contants utilisent une barre de recherche dans un UITableView. Lorsque vous faites défiler la liste pour que la barre de recherche se déplace vers le bas, l’espace vide au-dessus du contenu de la vue de défilement a une couleur d’arrière-plan gris clair (voir capture d’écran).

Capture d'écran de l'application Contacts montrant un fond gris clair

(Notez que la barre de recherche a une ligne de bord légèrement plus sombre en haut. Ceci n’est pas là pour la barre UISearchBar par défaut, mais le sous-classement devrait en tenir compte.)

J’ai essayé de définir la couleur d’arrière-plan de UITableView, mais cela affecte aussi les lignes. Est-ce que quelqu’un sait comment atteindre cet effet? Dois-je remplacer l’outil drawRect: ou existe-t-il une méthode intégrée?

À partir d’iOS 7, vous pouvez bricoler cela en modifiant la vue d’arrière-plan de la tableview.

[self.tableView setBackgroundView:view]; 

rendre la couleur d’arrière-plan de la vue identique à la couleur de votre vue parent.

Le réglage des transparences est mauvais pour les performances. Ce que vous voulez, c’est la zone grise au-dessus de la barre de recherche, mais elle devrait quand même être blanche au-delà de la fin de la liste.

Vous pouvez append une sous-vue à votre UITableView -dessus du contenu.

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

Vous pouvez append plus de choses fantaisistes à la vue si vous le souhaitez, par exemple un fondu ou une ligne de séparation sans sous- UISearchBar .

C’est l’un de mes trucs préférés.

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

Fondamentalement, vous créez une grande vue de la taille de l’écran et en la plaçant “au-dessus” de la zone de contenu. Vous ne pourrez jamais le faire défiler.

Et ne vous inquiétez pas de l’impact mémoire d’un UIView de 320×480 pixels, il ne consumra pas de mémoire significative car le CALayer n’a pas de contenu significatif.

NOTE: Pourquoi cette réponse est-elle pertinente lorsque la réponse “acceptée” est tellement plus simple? Pourquoi ne pas simplement définir le backgroundView sur la table? C’est parce que, dans le cas de l’application Contacts, comme indiqué dans la question d’origine, la zone “ci-dessus” de la vue de table a une couleur d’arrière-plan différente (bleu clair) que la zone “inférieure” de la vue tableau (blanche). Cette technique vous permet d’avoir deux couleurs différentes au-dessus et au-dessous de la vue de table, ce qui ne peut pas être accompli par un simple arrière-plan.

EDIT 1/2018: Comme Tom l’a souligné dans les commentaires, cette réponse est assez ancienne et suppose que tous les appareils iOS ont la même taille d’écran (cela semble fou, mais c’était le cas en 2009 quand j’ai répondu à cette question). Le concept que je vous présente ici fonctionne quand même, mais vous devriez utiliser UIScreen.main.bounds pour déterminer la taille réelle de l’ écran, ou vous pourriez vous lancer dans de la mise en page automatique (suggestions bienvenues). Je ne recommande pas d’utiliser tableView.bounds comme dans une autre réponse, car dans viewDidLoad la taille de vos vues n’est pas nécessairement la taille qu’elles deviendront après leur redimensionnement. Parfois, ils commencent comme 0x0!

Pour prolonger la suggestion de HusseinB :

Swift 3

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

Objectif c

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

In Swift (testé sur iOS9)

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

Ce code fonctionne dans 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) 

Je n’ai trouvé qu’un moyen de le faire. Vous devez définir le backgroundColor de UITableView pour qu’il soit transparent, définir le backgroundColor de contentView de la cellule sur la couleur que vous voulez que les cellules soient, puis vous devez absolument faire apparaître la couleur gris clair derrière UITableView. La dernière étape que vous pouvez faire en définissant soit le backgroundColour de l’UIWindow, soit tout ce qui contient ou votre tableViewController.

Donc, en supposant que vous ayez un contrôleur de vue dérivé de UITableViewController, insérez ces lignes dans la méthode – (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]; 

Puis dans la partie de tableView: cellForRowAtIndexPath: qui crée de nouvelles cellules, append: –

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

Je viens de rencontrer ce problème moi-même et j’ai trouvé une solution.

Cause

J’ai utilisé l’ inspecteur Spark pour examiner la disposition de la vue de table, ce qui a vraiment aidé.

En d’autres termes, dans ce scénario, UITableView a 3 sous-vues:

  1. UITableViewWrapperView
  2. UIView – Avec backgroundColor sur gris clair
  3. UISearchBar

Pendant que vous balayez le contenu de la tableview vers le bas, la deuxième hauteur de la sous-vue augmente dynamicment pour remplir l’espace entre UITableViewWrapperView et l’origine du cadre UITableView .

Solution

La définition de la propriété backgroundColor ou backgroundView n’affecte pas la deuxième sous-vue. Ce que vous devez faire est de trouver la deuxième vue et de changer sa couleur, comme ceci:

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

Dans mon cas, il fallait que toutes les vues soient blanches, donc j’ai utilisé ce qui suit, qui est moins sujet aux modifications futures de la hiérarchie de la vue UITableView par Apple:

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

Je vais vous donner le meilleur moyen de le faire.
Définissez d’abord la couleur d’arrière-plan de la vue de table sur celle que vous souhaitez dans le générateur d’interface.
Répondez ensuite au délégué tableView:willDisplayCell:ForIndexPath: méthode comme celle-ci

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

Une autre méthode est:
dans la méthode ViewDidLoad (ou n’importe où), définissez la couleur d’arrière-plan de tableView sur une couleur claire comme ceci:

 self.tableView.backgroundColor = [UIColor clearColor]; 

puis définissez la couleur superview sur blanc

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

SOLUTION FACILE

La méthode la plus simple pour créer différentes couleurs en bas et en haut d’une zone de rebond d’une vue de table consiste à définir la clé tableHeaderBackgroundColor de la vue de table. De cette façon, vous définissez la couleur supérieure. Je ne suis pas sûr, mais peut-être y a-t-il une autre clé pour le pied de page, regardez. Si vous ne trouvez rien, il vous suffit de définir l’arrière-plan de la vue de tableau avec la couleur que vous souhaitez afficher en bas. Vous pouvez voir ci-dessus un exemple de code:

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

J’espère que cela vous aidera. Si oui, informez les autres de cette manière simple de donner une réponse 🙂

Je ne pense pas que vous voulez remplacer drawRect. Ce que vous voyez est probablement la couleur d’arrière-plan d’une autre vue ou de la fenêtre, qui se trouve “derrière” (c’est-à-dire une vue d’ensemble) de la vue de table. Il y a généralement une couche assez complexe d’UIViews dans les widgets de l’interface utilisateur d’Apple. Explorez la hiérarchie des vues dans GDB, regardez [myView superview] puis [someSuperView subviews] et essayez de manipuler leurs couleurs BG dans le débogueur pour voir si vous pouvez en trouver une. Cependant, si vous implémentez un correctif de cette façon, soyez averti qu’il ne sera peut-être pas compatible avec le futur.

Vous pouvez également essayer de définir la couleur BG d’une des vues derrière la tableview dans Interface Builder (ou la fenêtre elle-même).

Si vous utilisez une tableviewcell, vous pouvez définir l’arrière-plan de la vue comme étant blanc opaque. Puis utilisez

 self.tableView.backgroundColor = [UIColor grayColor]; 

dans la vue a été la méthode de chargement.

Je suis sûr que c’est [UITableView backgroundColor]. Vous avez affecté les lignes, car les lignes ont backgroundColor == clear (ou semi-transparent). Donc, si vous faites des lignes non transparentes, tout fonctionnera bien. Ce sera la solution.

J’ai suivi le conseil décrit par Peylow, pour un UITableView, en ajoutant simplement une sous-vue. Mon seul changement par rapport au code était de saisir une couleur un peu plus proche de celle utilisée dans les applications Apple, et je me suis rapproché de l’apparence d’Apple d’avoir une ligne au-dessus de la barre UISearch en réduisant d’un pixel la coordonnée y d’origine:

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

Pour quiconque se demande comment faire de même pour la zone de rebond inférieure:

Ajoutez d’abord une sous-vue avec la couleur d’arrière-plan souhaitée à la vue d’arrière-plan de votre vue de table:

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

Et puis dans le délégué de votre vue table:

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