web-dev-qa-db-fra.com

Barre de navigation personnalisée

J'étais rampée de dribble et j'ai trouvé le design ci-joint. Je me demandais comment faire une barre de navigation personnalisée comme celle-ci. Je veux dire comment créer la barre de navigation une fois et la réutiliser implicitement pour chaque contrôleur d'affichage.

Je pensais avoir une sorte de contrôleur d'affichage de la racine et hériter d'autres contrôleurs d'affichage, mais je ne sais pas comment faire cela.

Toute idée ou lien sera apprisuite!

À votre santé.

Cyril

Nav bar image

iphoneiosuser-interfaceuinavigationcontrollernavigationcontroller
32
Cyril

Grâce à iOS5, vous êtes maintenant en mesure de personnaliser l'apparence d'une barre d'Uinavigation sans avoir à sousclure ou à créer une catégorie.

Le bloc de code suivant (mettez-le dans votre applicationDiderfinishloading: méthode) changera la barre d'UINAVIGATION pour toute l'application à n'importe quelle image que vous le donnez.

Notez, cela ne fonctionnera que dans iOS5

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

Toutefois, vous pouvez également modifier l'apparence d'une seule barre d'uoinavigation en fonction du contrôleur de visualisation que vous utilisez en utilisant le code suivant dans ViewDidLoad.

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

Le code ci-dessus discute uniquement des nouvelles façons de personnaliser l'apparence de la barre d'Uinavigation grâce à iOS5. Cependant, il ne discute pas de la manière dont les boutons ont été mis en œuvre.

Cependant, l'ajout des boutons est un jeu différent. Pour cela, je vous recommanderais de sous-classement UINavigationBar, puis d'ajouter dans les boutons si nécessaire. Vous pourriez probablement vous échapper avec juste une standard UINavigationBar mais personnalisé UIBarButtonItems qui exécutent une vue particulière.

Par exemple:

UIView *rightButton = [[[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 30.0f, 30.0f)] autorelease];
[rightButton addSubview:[UIImage imageNamed:@"rightButtonImage.png"]];

UIBarButtonItem *rightButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:rightButton] autorelease];
[rightButtonItem setAction:@selector(rightButtonAction:)];

Je n'ai pas testé ce code, donc ce n'est pas une solution de copie/pâte, mais cela vous donne une idée de ce qui doit être fait pour accomplir des uibarbuttonitemits "personnalisé".

Bonne chance!

8
Sebastien Peek

Dans les versions iOS plus anciennes, vous devez sous-classe Uinavigationbar I.E:

@interface CustomNavigationBar : UINavigationBar
@end

@implementation CustomNavigationBar

- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        self.opaque = YES;
        self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"CustomBackground"]];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    // Skip standard bar drawing
}

@end

Pour utiliser une barre de navigation personnalisée dans votre contrôleur d'affichage, vous devez modifier un nom de classe standard en CustomNavigationBar dans XIB.

De plus, vous pouvez définir la barre de navigation personnalisée par programme:

UIViewController *tempController = [[[UIViewController alloc] init] autorelease];
UINavigationController *navigationController = [[[UINavigationController alloc] initWithRootViewController:tempController] autorelease];

NSData *archive = [NSKeyedArchiver archivedDataWithRootObject:navigationController];
NSKeyedUnarchiver *unarchiver = [[[NSKeyedUnarchiver alloc] initForReadingWithData:archive] autorelease];
[unarchiver setClass:[CustomNavigationBar class] forClassName:@"UINavigationBar"];
UINavigationController *customNavigationController = [unarchiver decodeObjectForKey:@"root"];

UIViewController *contentController = [[[ContentViewController alloc] init] autorelease];
customNavigationController.viewControllers = [NSArray arrayWithObject:contentController];

Maintenant customNavigationController a la barre de navigation personnalisée.

6
Vadim

définissez un arrière-plan personnalisé pour la barre de navigation

UIImage *navBackground =[[UIImage imageNamed:@"navbarBackground"] 
                 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UINavigationBar appearance] setBackgroundImage:navBackground forBarMetrics:UIBarMetricsDefault];

ensuite, dans votre contrôleur d'affichage, définissez des vues personnalisées pour gauche, droitebarbuttons et titre.

self.navigationItem.titleView = customTitleView;
self.navigationItem.leftBarButtonItem = customBarButton;
self.navigationItem.rightBarButtonItem = customBarButton2;
3
agilityvision

Vous auriez besoin de faire votre propre UINavigationBar sous-classe et d'utiliser dans des endroits où vous auriez besoin d'une société de navigation.

Dans cette classe personnalisée, vous trouverez l'arrière-plan, les boutons, le texte, etc.

Mettre à jour

En fait, il suffit de regarder cet exemple, il semble être un UIToolBar. Vous pouvez affecter des méthodes de navigation aux boutons comme popViewController: etc. Pour l'indicateur "Confirmer les informations" et Progress, vous pouvez utiliser une étiquette et une image. Pour le bouton droit, c'est juste un graphique.

Bien sûr, l'exemple que vous avez fourni est simplement un concept et non une application réelle. Mais avec une certaine créativité, quelques heures de codage et quelques heures de conception graphique, vous pouvez atteindre cette même interface.

1
WrightsCS

Utilisation Category, ajoutez du code ci-dessous dans votre fichier de délégué (.m)

@implementation UINavigationBar (UINavigationBarCategory)

- (void)drawRect:(CGRect)rect
{
    UIImage *navBg = [UIImage imageNamed:@"NavBar.png"];
    [navBg drawInRect:CGRectMake(0, 0, 320, 44)];
}
@end

Éditer:

Utilisation Category n'est pas un bon moyen, j'ai écrit une démo sans utiliser Category, cliquez sur ici .

0
xda1001

Après beaucoup de recherches pour l'un de mes projets récents dans IOS .Ji a décidé d'utiliser la sous-classe pour personnaliser uniquement la barre de navigation sans utiliser UinavigationController.

import UIKit

class CustomNavigationBar: UINavigationBar {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.setBackgroundImageOfNavBar(imagenName: "navbar.jpg")
        self.setShadowImageOfNavBar(imagenName: "")
        self.setTitleAttribute()
        self.setBarAsTranslucent()
    }
    func setBackgroundImageOfNavBar(imagenName:String){
        //pass the image name and set the image here
         self.setBackgroundImage(UIImage(named: imagenName), for: .default)
        //if you want white backgroung just remove the image
       // self.setBackgroundImage(UIImage(), for: .default)
        //if you want to set backgroung color
        self.backgroundColor = UIColor.clear
    }

    func setShadowImageOfNavBar(imagenName:String){
        //pass the image name and set the image here
        // self.shadowImage = UIImage(named: imagenName)
        //if you want white backgroung just remove the image
        self.shadowImage = UIImage()
    }
    func setTitleAttribute(){
        //add NSAttributedStringKey as you want to customize title Color and font provide your app font family name open below commented code
        //        let textAttributes = [NSAttributedStringKey.foregroundColor:UIColor.black,NSAttributedStringKey.font: UIFont(name: "Enter Your App Font Name", size: 18)!]

        //set only title color of navigation bar by below code
        let textAttributes = [NSAttributedStringKey.foregroundColor:#colorLiteral(red: 0.8784313725, green: 0.1882352941, blue: 0.3254901961, alpha: 1)]
        self.titleTextAttributes = textAttributes
    }
    func setBarAsTranslucent(){
        self.isTranslucent = false
    }
}

J'ai partagé n lien qui fait beaucoup de choses personnalisées , y compris l'ajout d'images d'arrière-plan, du texte Shadow, etc.

0
Sanjay-Dev

Vous pouvez utiliser le stock UinavigationController et masquer la barre d'Uinavigation.

Ensuite, faites votre propre sous-classe d'UIViewController qui possède tous les éléments de navigation, puis une vue de taille flexible où le contenu va. Faites de toutes vos classes sous-classes cet élément et tirez sur la vue. Le bouton doit simplement appeler [self.navigationController popViewControllerAnimated:YES] et l'Uilabel à la vue doivent juste mettre son texte sur self.title.

0
Tim