How to customize iOS UINavigationItem?

Question

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).

if you want to change navigation bar background color on every screen... Then goto navigation controller.. click on navigation bar and go to property inspector and set BarTintColor. — Ashok Londhe, May 05 '15 at 09:05

Manuel Escrig · Answer 1 · 2015-05-05T08:45:53.543

2

Use this to change the color of the icon:

    self.navigationController.navigationBar.tintColor = [UIColor redColor];

The tint color to apply to the navigation items and bar button items.

edited May 05 '15 at 08:45

answered May 05 '15 at 08:26

Manuel Escrig

2,757
1
25
35

Ok, but this changes the background colour of the navigation bar, @Manuel Escrig. I also need that status bar is not covered by navigation bar. – new2ios May 05 '15 at 08:30
Sorry I just edit it. Now is the correct way. Also in oder to prevent the navigation bar from covering the status bar check the following answers: http://stackoverflow.com/questions/18953509/how-to-prevent-uinavigationbar-from-covering-top-of-view-in-ios-7 and http://stackoverflow.com/questions/19105766/ios-7-status-bar-collides-with-navigationbar Hope it helps! – Manuel Escrig May 05 '15 at 08:49

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

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 :

sandwich.png - 22x22 pixels
sandwich@2x.png - 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

edited May 23 '17 at 12:23

Community

1
1

answered May 05 '15 at 09:07

ShahiM

3,068
1
27
54

10x, @ShahiM. I understand about the images size - this is still not proper dimensional image. I also need my image to be white (as its original colour is white). – new2ios May 05 '15 at 10:10
@new2ios. ok. edited answer. let me know if anythings missing. cheers – ShahiM May 05 '15 at 10:58
@new2ios. You are using storyboards right? if yes, its always best to do as much UI designing as possible without using code. i,e. in the storyboard itself. this will ease lot of your work. – ShahiM May 05 '15 at 11:02

How to customize iOS UINavigationItem?

2 Answers2