Style de barre de navigation personnalisé - iOS

Question

Dupliquer possible:
Comment ajouter une image de fond sur la barre de navigation iphone?

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

Et d'ailleurs, celui du bas?

Merci...

Answer 1

@ludwigschubert la solution ne permet cependant pas de travail sur iOS 5. N'primordial -drawRect:, car il n'y a même pas appelé.
Comme d'iOS 5, une barre de navigation se composent d'un UINavigationBarBackground et UINavigationItemView. Il y a deux autres façons d'obtenir ce travail.

---

1. Insérez votre image personnalisée de vue à l'indice 1 au lieu de 0. De ce fait, il apparaît au-dessus de la native image d'arrière-plan, tout en restant en dessous des boutons.

2. Faire usage de l'iOS 5 est UIAppearance protocole. Vous pouvez définir l'image d'arrière-plan pour tous les

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

ou tout simplement pour une 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 à la fois portrait et paysage.

Answer 2

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

Complètement de style personnalisé pour les Barres de Navigation est étonnamment difficile. La meilleure description que je connaisse est celle-ci par Sebastian Celis: http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/

Ce n'est pas de remplacer drawRect, et inclut une bonne explication de 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

Answer 3

Juste pour ajouter à la réponse donnée par @Jenox, si vous voulez soutenir à la fois l'iOS 4.xx et iOS 5.xx des périphériques (par exemple DeploymentTarget est 4.xx), vous devez être prudent dans l'emballage de l'appel à l'apparition de procuration par la vérification à l'exécution si le "apparence" sélecteur est présent ou pas.

Vous pouvez le faire par:

//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 l'iOS 4.xx solution de contournement que vous avez mis en œuvre. Si vous avez mis en œuvre le "drawRect' solution de contournement pour iOS 4.xx périphériques, comme l'a dit @ludwigschubert, vous devez laisser que:

@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 permet d'obtenir la barre de navigation le même aspect dans les deux iOS 4 et iOS 5 appareils.

Answer 4

Copiez ceci dans viewDidLoad. Il recherchera iOS 5 et utilisera la méthode recommandé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 transparence.

 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];
}
 

Answer 5

Vous pouvez simplement créer une catégorie et créer une méthode personnalisée pour ajouter la vue de votre choix - images, boutons, curseurs. Par exemple, voici le code que j'utilise - il ajoute des images d'arrière-plan, des boutons de retour et des étiquettes personnalisées.

 @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