Evoluation

The Blog of a Software Engineer

9

avr

2012

Redéfinir le design d’un UINavigationBar

Lorsque l’on développe une application iPhone ou iPad, bien souvent on veut pouvoir la mettre à notre image, et l’un des éléments que l’on cherche à modifier en premier est l’objet UINavigationBar.

Avant, j’utilisais une manière peu sécurisée pour y arriver : je créais une catégorie sur l’objet UINavigationBar que je plaçais dans mon fichier AppDelegate afin qu’il soit pris en compte par tous les objets UINavigationBar de mon application. Ca fonctionnait bien dans le simulateur, mais pas toujours sur un iDevice.

@implementation UINavigationBar (MyNavigationBar)

- (void)drawRect:(CGRect)rect {
    UIImage *myBackgroundImage = [UIImage imageNamed:@"navBar.png"];
    [myBackgroundImage drawInRect:rect];
}

@end

Les best-practices

Récemment, je suis tombé sur une vidéo d’Apple réalisée à la WWDC 2011 intitulé Improving The Stability Of Your Apps (*), qui explique justement que le hack que j’utilisais est incorrect et qu’il existe deux manières justes de le faire.

Hériter de l’objet UINavigationBar

La première solution est de créer une classe héritant de l’objet UINavigationBar en surchargeant la méthode drawRect :

@implementation MyNavigationBar

- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"navBar.png"];
    [image drawInRect:rect];
}

@end

Puis dans le(s) fichier(s) .xib où vous voulez modifier l’apparence de la barre de navigation, sélectionnez l’objet graphique UINavigationBar en question et cliquez sur l’onglet Identity Inspector dans la colonne de droite. Sous l’onglet Customer Class, renseignez le champ Class par le nom de notre nouvelle classe, soit : MyNavigationBar.

L’avantage de cette solution est qu’elle fonctionne avec iOS 4.

Utiliser la fonction d’iOS 5

Avec l’arrivée d’iOS 5, Apple a finalement décidé d’intégrer nativement la possibilité de customiser l’objet UINavigationBar très simplement.

Cela se fait à l’aide de la méthode setBackgroundImage:forBarMetrics de l’objet UINavigationBar. Pour son fonctionnement, je vous renvoie à la documentation d’Apple, cela n’étant pas le but de cet article.

L’héritage d’un objet UINavigationBar en pratique

L’héritage de l’objet UINavigationBar fonctionne bien et est très simple à mettre en oeuvre, surtout si vous ajoutez vous-même un objet graphique UINavigationBar dans votre fichier .xib.

Mais qu’en est-il lorsque vous voulez utiliser cette méthode avec un UISplitViewController par exemple ? Car dans ce cas-là la barre de navigation n’est pas visible graphiquement.

Il existe une petite astuce toute simple pour réussir à mettre en place ce système dans le fichier .xib. Il suffit simplement d’étirer la barre de gauche qui contient le File’s owner, le First Responder et vos différentes vues, afin de voir apparaître l’arborescence de vos objets graphiques.

Dépliez alors votre objet UISplitViewController autant de fois que possible pour finalement faire apparaître l’objet UINavigationBar à l’intérieur de celui-ci. Il suffit ensuite de modifier sa propriété Class dans la colonne Identity Inspector comme indiqué plus haut dans l’article.

Compilez, et admirez ! ;-)

* Beaucoup de vidéos sont maintenant disponible à n’importe quel utilisateur ayant un compte Apple Developer, payant ou non.