Styliser UITableViewCells avec des plans arrière dégradés
J'ai cherché des moyens d'améliorer l'attractivité globale de mes applications iPhone. La majorité des fonctionnalités se trouvent dans UITableView. Je pense pouvoir commencer par ajouter des dégradés subtils à UITableViewCells, car cela semble améliorer considérablement la convivialité de l'application. La sélection des polices/tailles appropriées aide également beaucoup. Ma question pour ce forum est la suivante: quelle est la meilleure stratégie d’ajout de dégradés à UITableViewCells? Utilisez-vous Core Graphics/Quartz? Utilisez-vous une image de 1x1 pixel et étendez-vous? La capture d'écran suivante de l'application iPhone de Tumblr m'intéresse: http://dl-client.getdropbox.com/u/57676/screenshots/tumblr.jpg
Quelqu'un a-t-il de bons exemples sur la manière de faire ressortir votre UITableViewCell?
Et pour des raisons de performances, vaut-il mieux utiliser une image ou dessiner avec Quartz? Si Quartz, j'aimerais voir des exemples de codes indiquant comment les gens dessinent les gradients dans les cellules.
Merci.
Je travaille pour Tumblr, et même si je n'ai pas écrit l'application iPhone ( il l'a fait ), j'ai la source et je peux vous dire comment faire.
Dans -tableView:cellForRowAtIndexPath:
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"postCellBackground.png"]];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"postCellBackgroundSelected.png"]];
C'est assez simple: des images PNG dans un UIImageView en tant que vues d'arrière-plan de la cellule.
Les deux images sont des dégradés verticaux 1x61 qu'UIKit s'étire automatiquement horizontalement pour s'adapter à la largeur de la cellule.
Depuis le kit de développement logiciel (SDK) iPhone 3.0, il existe un solution beaucoup plus simple, qui repose sur le nouveau CAGradientLayer et ne nécessite pas de sous-classement ni d'images .
La réponse de Marco fonctionne très bien pour les cellules de vue tableau simples et les cellules de vue groupée situées au milieu de la vue, coins arrondis. Pour résoudre ce problème, vous pouvez définir la couleur d'arrière-plan de la cellule sur UIColor colorWithPatternImage , par exemple:
cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Gradient.png"]];
Je pense que le moyen le plus simple, et de loin, de gérer UITableView avec une cellule personnalisée consiste à utiliser Interface Builder. Cela rend le travail de conception d'interface utilisateur beaucoup plus facile que de le faire en noyau pur. Voici un excellent tutoriel (avec une vidéo!) Sur la façon de le faire. Hautement recommandé. Je n'utilise aucune autre méthode de codage UITableView depuis que j'ai suivi cette méthode.
Cela dit, ajouter un dégradé à votre cellule sera extrêmement facile. Utilisez simplement InterfaceBuilder pour ajouter une image contenant votre dégradé à la vue Cellule et vous avez terminé. Vous n'aurez pas à vous soucier de Quartz, et vous obtiendrez des résultats similaires sur le plan des performances car les composants de CocoaTouch sont très bien optimisés pour effectuer des tâches simples, telles que l'affichage d'une image.
UITableViewCell prend en charge des vues distinctes pour leur arrière-plan et leur arrière-plan sélectionné. Il est donc logique d'utiliser ces propriétés. Pour ce faire, vous devrez de toute façon créer une image de la taille de votre cellule (UIImageView n’étirera pas l’image), de sorte que vous pourrez également la créer une fois sur un ordinateur de bureau et enregistrer le fichier. cycles sur le téléphone qu'il faudrait dépenser pour étirer une image ou la rendre dynamique. Toutefois, si vous souhaitez autoriser l'utilisateur à modifier les couleurs du dégradé, vous devrez quand même le créer une fois de manière dynamique.
J'utiliserais Quartz 2D pour cela, mais la configuration d'images dans Photoshop est également parfaitement valide.
En ce qui concerne les performances, si vous réutilisez des cellules par type, je ne pense pas que ce soit un problème - mais si vous trouvez cela un goulot d'étranglement, vous pouvez dessiner une fois un contexte bitmap, obtenir une image de celle-ci et l'utiliser. partout - une sorte de solution hybride.
La réponse de Mirko est une bonne alternative si vous ne souhaitez pas utiliser une image. Cependant, il est préférable d'ajouter le dégradé à backgroundView plutôt qu'à UITableViewcell. De cette façon, vous ne perdrez pas les effets de surbrillance lors de la sélection de la cellule.