How to design custom navigation bar

Question

I have searched lots for how to design navigation like given in the image.

enter image description here
I have created category for UINavigationBar like given in the following solution Custom nav bar styling - iOS

Able to increase the size of NavigationBar using below code.

CGFloat navBarHeight = 84.0f;
CGRect frame = CGRectMake(0.0f, 0.0f, 320.0f, navBarHeight);
[self.navigationController.navigationBar setFrame:frame];

But all content like (left button, right button, title) moves to bottom of bar.

When attach segment control to titleView like below

self.navigationItem.titleView = self.segmentedControl;

All views( left button, title, right button) as liner.

I want segment control bottom of the navigation bar as shown in the image.

Do you want it same through-out your app ? – Aman Aggarwal Feb 25 '14 at 08:07 — Aman Aggarwal, Feb 25 '14 at 08:07
Hi @Aman this want for one viewController. – Shankar Shinde Feb 25 '14 at 08:22 — Shankar Shinde, Feb 25 '14 at 08:22
then add it simply to your viewController – Aman Aggarwal Feb 25 '14 at 08:24 — Aman Aggarwal, Feb 25 '14 at 08:24

Shubham · Answer 1 · 2014-02-26T09:12:32.033

1

@Shankar Shinde why are you adding segment controller as navigation title view you can add below the navigation bar using storyboard: check below screen shot

enter image description here

I think you need to hide the navigation bar using following code and create view like attached screenshot let me know it's help you or not ?

 [self.navigationController.navigationBar setHidden:YES];

enter image description here

edited Feb 26 '14 at 09:12

answered Feb 25 '14 at 09:08

Shubham

570
3
12

This is our product design decision. I have done same as you posted. if you any idea Please help. – Shankar Shinde Feb 25 '14 at 09:45
I have done through coding. On view added all subviews (left,right, and segment control). That view as part of viewController like `[self.view addSubview:...]`. – Shankar Shinde Feb 27 '14 at 06:23

score 0 · Answer 2 · answered Feb 25 '14 at 08:12

0

Please check it out sample:

https://github.com/boctor/idev-recipes/tree/master/WoodUINavigation

It may help you :)

answered Feb 25 '14 at 08:12

Gaurav

299
4
15

hey Gaurav , thank you for reference, This is not what I am looking :( – Shankar Shinde Feb 25 '14 at 09:46

score 0 · Answer 3 · answered Feb 25 '14 at 08:15

You can use Prompt provided for navigationItem First give prompt to your navigationItem

self.navigationItem.prompt = @"";

Create a segmentcontroll

UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:itemArray];
segmentedControl.frame = CGRectMake(35, 200, 250, 50);
segmentedControl.segmentedControlStyle = UISegmentedControlStylePlain;
segmentedControl.selectedSegmentIndex = 1;
[self.navigationController.navigationBar addSubview:segmentedControl];

How to design custom navigation bar

3 Answers3