Customise UI Navigation Bar and button

Question

Hello I am new to ios development and want to know how to customise navigation bar buttons

This is what i used to change navigation bar color

[[UINavigationBar appearance] setBarTintColor:[UIColor]]

I want to change button colour

Here is a exmaple

button color or bar color? – Ekta Padaliya Dec 24 '15 at 04:35 — Ekta Padaliya, Dec 24 '15 at 04:35
button color and to make the button like the pic – system21 Dec 24 '15 at 04:39 — system21, Dec 24 '15 at 04:39

score 1 · Answer 1 · answered Dec 24 '15 at 04:53

First you need to set navigation bar, assuming your first screen is SpalshViewController you need to set splash screen as a root view controller for navigation bar and then set navigation bar as root view controller like :

self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
SplashScreenVC *obj =[CustomUtility getViewController:@"SplashScreenVC"];
self.navigationController =[[UINavigationController alloc] initWithRootViewController:obj];
self.window.rootViewController =self.navigationController;

in didFinishLaunchingWithOptions

Now coming to customize navigation bar setting and appearance you need to set :

self.navigationController.navigationBar.translucent = NO;
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"top_bg2.png"] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor],NSFontAttributeName:[UIFont fontWithName:@"Lato-Regular" size:18]}];

Now setting the custom bar buttons for navigation bar you need to create barbutton items like :

UIBarButtonItem *leftbtn;
UIBarButtonItem *rightbtn;

[self.navigationController.navigationItem setLeftBarButtonItem:leftbtn];
[self.navigationController.navigationItem setRightBarButtonItem:rightbtn];

customizebarbuttonItems According to your need

if you want to set more than one buttons to the navigation bar you can add like:

UIBarButtonItem *leftbtn1;
UIBarButtonItem *leftbtn2;
UIBarButtonItem *rightbtn1;
UIBarButtonItem *rightbtn2;
[self.navigationController.navigationItem setLeftBarButtonItems:@[leftbtn1,leftbtn2]];
[self.navigationController.navigationItem setRightBarButtonItems:@[rightbtn1,rightbtn2]];

Hope it will helpful for you

Suhail kalathil · Answer 2 · 2015-12-24T04:45:51.053

Create a 1x1 pixel image with the color you want. Then add following code to your AppDelegate class.

UIImage *btnBgColor = [[UIImage imageNamed:@"backColor"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

[[UIBarButtonItem appearance] setBackgroundImage: btnBgColor 
                                        forState:UIControlStateNormal
                                      barMetrics:UIBarMetricsDefault];

OR

Write the below code on your base viewController class, then make this class as superclass of all your other view controllers.

UIButton* yourButton = [UIButton buttonWithType:UIButtonTypeCustom];
yourButton.layer.backgroundColor = [UIColor redColor].CGColor;

UIBarButtonItem* buttonItem = [[UIBarButtonItem alloc] initWithCustomView: yourButton];
self.navigationBar.leftBArButtonItems = @[buttonItem];

score 0 · Answer 3 · answered Dec 24 '15 at 04:39

0

You can use below navigation bar to customize. In Storyboard you have option to change the colour.

Otherwise you can put UIView to customize. Like below,

answered Dec 24 '15 at 04:39

S. Karthik

618
5
16

score 0 · Answer 4 · answered Dec 24 '15 at 04:54

You can add your custom button in navigation bar like:

    UIButton *btnObj = [UIButton buttonWithType:UIButtonTypeCustom];
    [btnObj setFrame:CGRectMake(0, 0, 60, 44)];
    [btnObj setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];
    [btnObj setImage:[UIImage imageNamed:@"<button background image>"] forState:UIControlStateNormal];
    [btnObj addTarget:self action:@selector(btnObjClick:) forControlEvents:UIControlEventTouchUpInside];
    UIBarButtonItem *itemBtnObj = [[UIBarButtonItem alloc] initWithCustomView:btnObj];
    self.navigationItem.rightBarButtonItems = [[NSArray alloc]initWithObjects:itemBtnObj, nil];

score 0 · Answer 5 · answered Dec 24 '15 at 05:19

You can do it from story board itself. Drag UINavigation Bar

Customise your navigation using images or background colors giving them shadows.

Add navigation item

you can customize those too using images or colors and images and position as per requirements.

To add constraints to the same refer my ans. Adding constraints to a UIBarButtonItem

Hope it helps.. Happy Coding.. :)

Customise UI Navigation Bar and button

5 Answers5

Linked