Search code examples
iosobjective-cuinavigationbaruinavigationitem

How to customize iOS UINavigationItem?

I suppose that this is duplicate, but after a research I can not understand how to customise UINavigationItem.

I have custom ViewController (VC) which implements custom class SWRevealViewController (I need to create sliding menu). I have Menu VC and for each element of the menu I have Navigation VC with custom VC for each element of the menu.

To work each back button must be defined in Designer and to have outlet (I also added outlet for navigation item):

@property (weak, nonatomic) IBOutlet UIBarButtonItem *btnSidebareMenu;
@property (weak, nonatomic) IBOutlet UINavigationItem *niTitle;

In my .m file I have this code:

self.navigationItem.title = @"Custom title";

self.navigationController.topViewController.navigationItem.leftBarButtonItem = self.btnSidebareMenu;
self.btnSidebareMenu.enabled=TRUE;
self.btnSidebareMenu.style=UIBarButtonSystemItemRefresh;

to customise button and title for each Menu element VC.

I use this code to manage navigation to menu:

// Manage menu button
SWRevealViewController *revealViewController = self.revealViewController;
if ( revealViewController )
{
    [self.btnSidebareMenu setTarget: self.revealViewController];
    [self.btnSidebareMenu setAction: @selector( revealToggle: )];
    [self.view addGestureRecognizer:self.revealViewController.panGestureRecognizer];
}

The navigation is ok, but I can not customise appearance of my Navigation bar:

I receive this:

enter image description here

, but I need something like this:

enter image description here

Any recommendations how to do that?

EDIT:

Ok, I managed to show proper size image, to change colour of the navigation bar, but I can not issue with status bar and navigation bar. When I set background colour of the navigation bar it fills also status bar. I see different solutions but they don't work or I don't understand them.

REMARK: I have several pages which are not part of Navigation controller in which my status bar is white. I need this also be the case for all my pages. (I need them to look like image 2, on which status bar is white and navigation section is blue).

Solution

  • In the case of nav bar buttons, i guess you could drag and drop a barButtonItem into the nav bar using the storyBoard. Then you can set the image property of the barButtonitem.

    Also note that the images you use for this should be the exact dimensions as it wont get scaled proportionately. So if your image is called sandwich.png then you should have the two following files in your assets :

    1. sandwich.png - 22x22 pixels
    2. [email protected] - 44x44 pixels

    Also refer to this and this

    UPDATE : To make the icon white, or any other color, you can change the tint color of the barButtonItem in storyboard.

    enter image description here