Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Button in the middle of navigationBar [closed]

I want to create acustom navigation bar.

I know that we can use UIButton in the middle instead of title in the navigation bar, but can we make something that look like this picture?

As you see we have three different buttons in the middle of this navigation bar. Can you share your idea with me how we can implement such a thing in iPhone?

like image 781
Ali Avatar asked Sep 19 '12 20:09

Ali


People also ask

How do I center navigation buttons?

The trick is to set the container to have text-align: center and then have the list (it should be a <ul> set to display: inline-block . That will center the whole list and you can then float the list elements and control how far apart they are from each other using margins.

What are the main buttons in the Navigation bar?

The classic Navigation bar has the Recents, Home, and Back buttons at the bottom of your screen. It is the default navigation method on all Galaxy phones and tablets.

How do I disable the Navigation bar button?

The option to disable Navigation bar can be set via Settings > Navigation Bar. When disabled, Home, Back, and Recents buttons will be removed from the screen, allowing more room for app use.

How do I center the contents of a nav bar?

We can center the navbar using margin: auto property. It will create equal space to the left and right to align the navbar to the center horizontally. Additionally, add the width of the navbar.


1 Answers

Assuming you are using a Navigation Controller you can set your navigationBar's titleView property to a UIView container that holds the three buttons in the middle (and the two sets of three dots). The code would look like something like this:

    UIView *buttonContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 44)];
    buttonContainer.backgroundColor = [UIColor clearColor];
    UIButton *button0 = [UIButton buttonWithType:UIButtonTypeCustom];
    [button0 setFrame:CGRectMake(0, 0, 44, 44)];
    [button0 setBackgroundImage:[UIImage imageNamed:@"button0.png"] forState:UIControlStateNormal];
    [button0 addTarget:self action:@selector(button0Action:) forControlEvents:UIControlEventTouchUpInside];
    [button0 setShowsTouchWhenHighlighted:YES];
    [buttonContainer addSubview:button0];

    //add your spacer images and button1 and button2...

    self.navigationItem.titleView = buttonContainer;  

Or you could do this all in IB of course.

like image 114
Keller Avatar answered Oct 06 '22 01:10

Keller