Custom navigation bar

Question

I was crawling Dribble and found the attached design. I was wondering how to do a custom navigation bar like this. I mean how create the navigation bar once and reuse it implicitly for every view controllers.

I was thinking about having a kind of root view controller and inherit for other view controllers, but I don't know how to do this.

Any idea or link will be appreachated!

Cheers.

Cyril

Answer 1

In older iOS versions you have to subclass 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

To use a custom navigation bar in your view controller, you should change a standard class name to CustomNavigationBar in XIB.

Also, you can set the custom navigation bar programmatically:

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

Now customNavigationController has the custom navigation bar.

Answer 2

set a custom background for the NavigationBar

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

then in your View Controller set custom views for left, rightBarButtons and title.

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

Answer 3

Thanks to iOS5 you are now able to customise the appearance of a UINavigationBar without having to subclass or create a category.

The following code block (put it in your applicationDidFinishLoading: method) will change the UINavigationBar for the whole application to whatever image you give it.

Note, this will ONLY work in iOS5

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

However, you are also able to change the appearance of a single UINavigationBar depending on what view controller you're in by using the following code in viewDidLoad.

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

The above code is solely discussing the new ways to customise the UINavigationBar appearance thanks to iOS5. However, it does not discuss the way that the buttons have been implemented.

However, adding the buttons is a different game altogether. For this, I would recommend subclassing UINavigationBar, and then adding in the buttons where needed through that. You could probably even get away with just a standard UINavigationBar but custom UIBarButtonItems that run off a particular view.

For example:

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:)];

I haven't tested that code so it isn't a copy/paste solution, but it gives you an idea of what needs to be done to accomplish "custom" looking UIBarButtonItems.

Good luck!

Answer 4

Using Category, add code below in your delegate file (.m)

@implementation UINavigationBar (UINavigationBarCategory)

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

Edit:

Using Category is not a good way, I wrote a demo without using Category, click here.

Answer 5

You would need to make your own UINavigationBar subclass, and use in places where you would need a navigationController.

In this custom class is where you will draw the background, buttons, text, etc.

---

Update

Actually, taking a closer look at this example, it appears to be a UIToolBar. You can assign navigation methods to the buttons like popViewController: etc. For the "Confirm Information" and progress indicator, you can use a label and an image. For the right button, its just a graphic.

Of course, the example you provided is simply a concept, and not an actual app. But with some creativity, a few hours of coding and a few more hours of graphics design, you can achieve this same interface.

Answer 6

After a lot of research for one of my recent project in IOS .I decided to use subclass for customizing only navigation bar without the using 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
    }
}

I have shared a link which does a lot of custom stuff including adding background images ,text shadow etc.