Fond gris clair dans la "zone de rebond" d'un UITableView
Les applications iPhone d'Apple telles que Musique et Contants utilisent une barre de recherche dans UITableView. Lorsque vous faites défiler l'écran vers le bas 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 présente une couleur d'arrière-plan gris clair (voir capture d'écran).
(Notez que la barre de recherche a une ligne Edge légèrement plus sombre en haut. Ceci n'est pas là pour la barre UISearchBar par défaut, mais le sous-classement devrait s'en charger.)
J'ai essayé de définir la couleur d'arrière-plan de UITableView, mais cela affecte également les lignes. Est-ce que quelqu'un sait comment obtenir cet effet? Est-ce que je vais devoir passer outre à implémenter drawRect: ou y a-t-il une méthode intégrée?
Depuis iOS 7, vous pouvez modifier cela en changeant la vue d'arrière-plan de la table.
[self.tableView setBackgroundView:view];
faites en sorte que la couleur d'arrière-plan de la vue soit la même que celle de votre vue parent.
Le réglage des transparents est mauvais pour la performance. Ce que vous voulez, c'est la zone grise au-dessus de la barre de recherche, mais elle doit rester blanche au-delà de la fin de la liste.
Vous pouvez ajouter une sous-vue à votre UITableView qui vit au-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 ajouter des éléments plus sophistiqués à la vue si vous le souhaitez, par exemple un fondu ou une ligne de séparation sans sous-classement 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];
En gros, vous créez une grande vue de la taille de l’écran et vous la placez au-dessus de la zone de contenu. Vous ne pourrez jamais faire défiler au-delà.
Et ne vous inquiétez pas de l'impact mémoire d'un disque UIView de 320 x 480 pixels, il ne consommera pas de mémoire importante, car CALayer n'a pas de contenu significatif.
NOTE: Pourquoi cette réponse est-elle pertinente quand la réponse "acceptée" est tellement plus simple? Pourquoi ne pas simplement définir la backgroundView sur la vue de table? C'est parce que, dans le cas de l'application Contacts, comme indiqué dans la question initiale, la zone "au-dessus" de la vue tabulaire présente une couleur d'arrière-plan différente (bleu clair) par rapport à la zone "située en dessous" de la vue tabulaire (blanc). . Cette technique vous permet d’avoir deux couleurs différentes au-dessus et en dessous de la vue du tableau, 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 lorsque j'ai répondu à cette question). Le concept que je présente ici fonctionne toujours, mais vous devriez utiliser UIScreen.main.bounds pour déterminer la taille de l'écran réelle, ou vous pourriez vous lancer dans une mise en page automatique sophistiquée (suggestions bienvenues). Je ne recommande pas d'utiliser tableView.bounds comme dans une autre réponse, car généralement dans viewDidLoad, la taille de vos vues ne correspond pas nécessairement à la taille qu'elles auront après le redimensionnement par le contrôleur. Parfois, ils commencent par 0x0!
Pour prolonger 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];
Dans 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 viens de rencontrer ce problème moi-même et j'ai trouvé une solution.
Cause
J'ai utilisé Spark Inspector pour examiner la disposition de la vue tableau - ce qui m'a vraiment aidé.
Le problème est que, dans ce scénario, UITableView a 3 sous-vues:
UITableViewWrapperViewUIView- AvecbackgroundColordéfini sur une couleur gris clairUISearchBar
Pendant que vous glissez le contenu de la table vers le bas, la hauteur de la deuxième sous-vue augmente de façon dynamique pour remplir l'espace entre le cadre UITableViewWrapperView et le cadre UITableView.
Solution
La définition de la propriété backgroundColor ou backgroundView n'affectera pas la deuxième sous-vue . Ce que vous devez faire est de trouver la deuxième vue et de changer sa couleur, comme suit:
if (_tableView.subviews.count > 1) {
_tableView.subviews[1].backgroundColor = THE_TARGET_COLOR;
}
Dans mon cas, j'avais besoin que toutes les vues soient blanches; j'ai donc utilisé ce qui suit, ce qui est moins sujet aux modifications futures de la hiérarchie des vues UITableView par Apple:
for (UIView *subview in _tableView.subviews) {
subview.backgroundColor = [UIColor whiteColor];
}
J'ai seulement trouvé un moyen de faire ça. Vous devez définir la couleur d'arrière-plan de UITableView sur transparent, définir la couleur d'arrière-plan de contentView de la cellule sur la couleur que vous souhaitez pour les cellules réelles, puis il est essentiel que la couleur gris clair apparaisse derrière UITableView. Vous pouvez effectuer cette dernière étape en définissant la couleur de fond de la fenêtre UIWindow, de son contenu ou de 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];
Ensuite, dans la partie de tableView: cellForRowAtIndexPath: qui crée de nouvelles cellules, ajoutez: -
// set an opaque background for the cells
cell.contentView.backgroundColor = [UIColor whiteColor];
Je vais vous donner le meilleur moyen de le faire.
Tout d’abord, définissez la couleur d’arrière-plan de la vue tableau sur celle de votre choix dans le générateur d’interface.
Puis répondez à la méthode UITableView delegate tableView:willDisplayCell:ForIndexPath: like this
- (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 où que vous soyez), définissez la couleur d'arrière-plan tableView sur une couleur claire comme ceci:
self.tableView.backgroundColor = [UIColor clearColor];
puis réglez la couleur superview sur blanc
self.tableView.superview.backgroundColor = [UIColor whiteColor];
SOLUTION LA PLUS FACILE
Le moyen le plus simple de créer différentes couleurs dans la partie inférieure et supérieure d'une zone de rebond d'une vue table consiste à définir la clé tableHeaderBackgroundColor de la vue table. De cette façon, vous définissez la couleur supérieure. Je ne suis pas sûr, mais peut-être qu'il y a une autre clé pour le pied de page, jetez un coup d'oeil. Si vous ne trouvez rien, il vous suffit de définir l'arrière-plan de la vue tableau avec la couleur que vous souhaitez afficher en bas. Ci-dessus, vous pouvez voir un exemple de code:
self.table.setValue(UIColor.blue , forKey: "tableHeaderBackgroundColor")
J'espère que ça vous aidera. Si oui, informez les autres à propos de cette solution de facilité en donnant une réponse positive :)
Je ne pense pas que vous souhaitiez remplacer drawRect. Ce que vous voyez le plus probablement est la couleur d'arrière-plan d'une autre vue ou de la fenêtre, qui se trouve "derrière" (c'est-à-dire un aperçu de) la vue sous forme de tableau. Il existe généralement une couche assez complexe d'UIViews dans les widgets d'interface utilisateur d'Apple. Explorez la hiérarchie des vues dans GDB, examinez [myView superview] puis [someSuperView Subviews] et essayez de manipuler leurs couleurs BG dans le débogueur pour voir si vous pouvez trouver laquelle. Cependant, si vous implémentez un correctif de cette manière, sachez qu'il pourrait ne pas être compatible à l'avenir.
Vous pouvez également essayer de définir la couleur de glycémie de l'une des vues situées derrière la vue de table dans Interface Builder (ou de la fenêtre elle-même).
Si vous utilisez une tableviewcell, vous pouvez définir l’arrière-plan de la vue sur blanc opaque. Puis utiliser
self.tableView.backgroundColor = [UIColor grayColor];
dans la vue a chargé la méthode.
J'ai suivi le conseil proposé par Peylow, pour un UITableView, en ajoutant simplement une sous-vue. Mon seul changement par rapport au code a été de saisir une couleur un peu plus proche de celle utilisée dans les applications Apple. De plus, je l'ai un peu plus proche de l'apparence d'Apple consistant à avoir une ligne au-dessus de la barre UISearch en réduisant le repère Origin y du cadre:
frame.Origin.y = -frame.size.height - 1
Je suis sûr que c'est [UITableView backgroundColor] . Vous avez des lignes affectées, car celles-ci ont backgroundColor == clear (ou semi-transparent) . Donc, si vous voulez que les lignes soient non transparentes, toutes fonctionnera bien. Ce sera la solution.
Pour ceux qui se demandent comment faire de même pour la zone de rebond inférieur:
Ajoutez d’abord une sous-vue avec la couleur d’arrière-plan souhaitée à la vue d’arrière-plan de votre vue tableau:
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 de 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;
}