Ajouter une couleur de fond à un UIButton

de | 2 septembre 2011

Couleur de fond dans UIButton

Les UIButton sont des composants du SDK iOS (UIKit) difficiles à cerner. Il n’est, par exemple, pas simple de leur donner une couleur de fond ! Alors pour ceux qui débutent en programmation iPhone et iPad et souhaite une application qui gère cette fonctionnalité cet article pourra vous aider.

En effet, par défaut un UIButton est du type « Rounded Rect ». Ce type de bouton ne permet pas de gérer de couleur de fond en tant que telle, mais il faut utiliser des images pour définir une couleur de fond. Ceci peut être ennuyeux si de nombreuses couleurs sont à définir.

Pour remédier à ce problème nous pouvons utiliser le framework QuartzCore (fourni avec le SDK iOS d’Apple) pour tracer directement la couleur de fond d’un bouton. Pour cela il faudra que votre bouton soit du type « Custom ». Si vous avez ajouté votre UIButton depuis Interface Builder, il faudra alors modifier ses propriétés.

UIButton de type Custom dans Interface Builder

UIButton de type Custom dans Interface Builder

UIButton avec Quartzcore

Vous remarquerez que lorsque vous passez votre UIButton en type « Custom », il perd automatiquement sa couleur de fond, son contour et ses angles arrondis. Ceci est normal et nous allons devoir retracer ces éléments à l’aide du framework QuartzCore.

UIButton : couleur de fond avec QuartzCore

UIButton : couleur de fond avec QuartzCore

Nous allons tout d’abord commencer par tracer le contour bouton avec cette instruction :
[[bouton layer] setBorderWidth:1.0f];

Comme vous le voyez on travaille directement sur la « layer » (soit la couche graphique) avec QuartzCore.

Ensuite on continue avec l’arrondi du contour du bouton :
[[bouton layer] setCornerRadius:8.0f];
[[bouton layer] setMasksToBounds:YES];

Et on fini par la couleur de fond :

[[bouton layer] setBackgroundColor:[[UIColor blueColor] CGColor]];

Comme discuté dans l’article pensez à ajouter le framework Quartzcore à votre projet et à indiquer en header que vous l’utilisez à l’aide de cette instruction :
#import

Allez encore plus loin avec les UIButton

Si vous connaissez un peu QuartzCore vous connaissez le potentiel de ce framework. Il vous sera alors possible de tracer un peu tout et n’importe quoi !

Ainsi, il peut être intéressant de tracer un dégradé comme couleur de fond d’un UIButton en utilisant CAGradientLayer ou encore tenter de jouer avec les arrondis des boutons.

Quoi qu’il en soit, il existe quand même un problème à une utilisation intensive de ce système. Ainsi, si vous utilisez ces méthodes pour tracer de nombreux boutons, vous pourrez vous retrouver avec quelques ralentissements dans votre application (ces ralentissements surviennent essentiellement lors des transitions des navigation controller – qui sont désactivables).

Si ce point vous ennuie, vous pourrez toujours utiliser des UIButton de type « Rounded Rect » et créer des images pour chaque fond de couleur que vous devez afficher. Votre application devrait être nettement plus rapide ainsi.

Comme vous l’avez constaté à travers nos différents articles, la programmation d’application iPhone et iPad réserve quelques surprises. Ainsi, vous pouvez nous poser vos questions en commentaire de cet article ou nous contacter directement si vous souhaiter nous faire développer une application iPhone ou iPad (voir les deux !).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.