web-dev-qa-db-fra.com

Style de barre de navigation personnalisé - iOS

Duplicata possible:
Comment ajouter une image d'arrière-plan sur la barre de navigation de l'iphone?

iOS - Comment le NY Times a-t-il fait ce style de barre de navigation supérieure personnalisée?

Et d'ailleurs, celui du bas?

ny-times

objective-ccocoa-touchiosuinavigationbar
53
phil swenson

EDIT: Ceci est obsolète; pour iOS5, il y a beaucoup meilleure réponse ci-dessous , par @Jenox.

Un style entièrement personnalisé pour les barres de navigation est étonnamment difficile. Le meilleur article que je connaisse est celui de Sebastian Celis: http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/

Cela ne remplace pas drawRect, et comprend une bonne explication pourquoi c'est une bonne chose. Notez également que vous n'avez pas à suivre son tutoriel. Vous pouvez télécharger le code complet ici: https://github.com/scelis/ExampleNavBarBackground

31
ludwigschubert

Cependant, la solution de @ ludwigschubert ne fonctionne pas sur iOS 5. La substitution de -drawRect:, car il n'est même pas appelé.
Depuis iOS 5, une barre de navigation se compose d'un UINavigationBarBackground et d'un UINavigationItemView. Il existe deux autres façons de le faire fonctionner.

  1. Insérez votre vue d'image personnalisée à index 1 au lieu de 0. Cela la fait apparaître au-dessus de l'image d'arrière-plan native tout en restant sous les boutons.

  2. Utilisez le protocole iOS 5 IAppearance. Vous pouvez soit définir l'image d'arrière-plan pour tous

[[UINavigationBar appearance] setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

ou pour une seule barre de navigation:

[navigationController.navigationBar setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

Assurez-vous de fournir deux images (UIBarMetricsDefault & UIBarMetricsLandscapePhone) lors du développement d'une application iPhone pour le portrait et le paysage.

143
Christian Schnorr

Juste pour ajouter à la réponse donnée par @Jenox, si vous souhaitez prendre en charge les appareils iOS 4.xx et iOS 5.xx (c'est-à-dire que votre cible de déploiement est 4.xx), vous devez être prudent lorsque vous appelez le proxy d'apparence en vérifier lors de l'exécution si le sélecteur "apparence" est présent ou non.

Vous pouvez le faire en:

//Customize the look of the UINavBar for iOS5 devices
if ([[UINavigationBar class]respondsToSelector:@selector(appearance)]) {
    [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"NavigationBar.png"] forBarMetrics:UIBarMetricsDefault];
}

Vous devez également quitter la solution de contournement iOS 4.xx que vous avez peut-être implémentée. Si vous avez implémenté la solution de contournement "drawRect" pour les appareils iOS 4.xx, comme mentionné par @ludwigschubert, vous devez laisser cela dans:

@implementation UINavigationBar (BackgroundImage)
//This overridden implementation will patch up the NavBar with a custom Image instead of the title
- (void)drawRect:(CGRect)rect {
     UIImage *image = [UIImage imageNamed: @"NavigationBar.png"];
     [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

Cela donnera à la NavBar la même apparence sur les appareils iOS 4 et iOS 5.

24
bhavinb

Copiez ceci dans viewDidLoad. Il vérifiera iOS 5 et utilisera la méthode préférée, sinon il ajoutera une sous-vue à la barre de navigation pour les versions iOS <5.0. Cela fonctionnera à condition que votre image d'arrière-plan personnalisée ne comporte pas de transparents.

float version = [[[UIDevice currentDevice] systemVersion] floatValue];
NSLog(@"%f",version);
UIImage *backgroundImage = [UIImage imageNamed:@"myBackgroundImage.png"];
if (version >= 5.0) {
    [self.navigationController.navigationBar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];
}
else
{
    [self.navigationController.navigationBar insertSubview:[[[UIImageView alloc] initWithImage:backgroundImage] autorelease] atIndex:1];
}
4
chazzwozzer

Vous pouvez simplement créer une catégorie et créer une méthode personnalisée pour ajouter la vue que vous souhaitez - images, boutons, curseurs. Par exemple, voici le code que j'utilise - il ajoute une image d'arrière-plan personnalisée, backButton et Label.

@interface UINavigationBar (NavigationBar)
-(void)setBarForCard;
@end


@implementation UINavigationBar (NavigationBar)

-(void)setBarForCard
{

    UIImageView *aTabBarBackground = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"BarImage"]];
    aTabBarBackground.frame = CGRectMake(0,0,self.frame.size.width,44);
    [self addSubview:aTabBarBackground];
    [self sendSubviewToBack:aTabBarBackground];
    [aTabBarBackground release];

    UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    backBtn.frame =CGRectMake(10, 8, 60, 30);
    [backBtn addTarget:self action:@selector(back:)forControlEvents:UIControlEventTouchUpInside];
    [backBtn setImage:[UIImage imageNamed: @"Back"] forState:UIControlStateNormal];
    [self addSubview:backBtn];

    UILabel *calendar = [[UILabel alloc]init];
    calendar.frame = CGRectMake(105, 13, 109, 21);
    calendar.text = @"Calendar"
    calendar.textColor = [UIColor whiteColor];
    calendar.textAlignment = UITextAlignmentCenter;
    calendar.shadowColor = [UIColor grayColor];
    calendar.shadowOffset = CGSizeMake(0, -1);
    calendar.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:20];
    calendar.backgroundColor = [UIColor clearColor];    
    [self addSubview:calendar];


}

Et puis, dans n'importe quel contrôleur de vue, vous pouvez modifier votre barre de navigation en appelant [self.navigationController.navigationBar setBarForCard];

Cela fonctionne à la fois dans IOS 4 et IOS 5

2
Nikita Pestrov

C'est un meilleur moyen pour iOS 5

if ([self.navigationController.navigationBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)] ) {
 UIImage *image = [UIImage imageNamed:@"navBarImg.png"];
 [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}
1
iOS Monster

vous pouvez changer la teinte de la barre de navigation pour changer sa couleur et vous pouvez également utiliser une image dans la vue de la barre de navigation. Pour la barre inférieure, je pense qu'ils utilisent une vue avec trois boutons personnalisés.

0
saadnib