Adding Bar Button Item to Left of Navigation Item

Question

I am following this tutorial on adding a sidebar navigation to an app.

In the given source code they have provided the storyboard layouts pre-defined. One of them is a view that has a "Navigation Item" and a "Bar Button Item" which appears on the left of the top navigation bar.

I am trying to do the same in my app, however the button item keeps automatically appearing on the right, and I cannot find any way to move it to the left.

I noticed, in the example provided in the tutorial, it gives this outlet option leftBarButton option:

And when I check mine, it looks like this:

There is no navigation controller because of how SWRevealView works. When I run the app, I can see the button and it works perfectly, only issue is it's on the right hand side. I've compared my view with the example, and cannot seem to find any difference.

Any help is appreciated.

EDIT This might help. In storyboards, this is what the working example looks like:

And this is what mine looks like

Shellfish

Answer 1

Drag BarButtonItem and place left side on your navigation item.

Prognosticate

Answer 2

I could not find a way to manage it in storyboard.So i coded it in my viewcontroller's ViewDidLoad function adding the following code

self.navigationItem.leftBarButtonItem = _sidebarButton;
self.navigationItem.rightBarButtonItem = nil;

Lemcke

Answer 3

1/. Right click on Storyboard > Open as > Source Code

2/. Find your View Controller by Ctrl + F : <name of View Controller>

3/. Find navigationItem > You will see barButtonItem like this:

<navigationItem key="navigationItem" title="Title" id="n9s-Cu-Dtc">
   <barButtonItem key="rightBarButtonItem" title="Item" image="menu-icon-2.png" id="aN6-4T-o4T"/>
</navigationItem>

4/. Change key="rightBarButtonItem" to key="leftBarButtonItem"

Save and finish. Right click on Storyboard > Open as > Builder Interface

Plaything

C'mon Apple. Why do I have to edit storyboard source code to do this? – Outgrowth

@kwahn: Because builder interface of XCode have some error when render with unknown reason, so I can not interact with this button on the Builder Interface correctly. – Plaything

Answer 4

I had the exact same issue. It visually appeared that I didn't have a navigation bar on my main view controller, but it was there.

I eventually discovered that if I clicked on the navigation view controller first, the navigation bar on the main view controller appeared. I placed a button bar item on the nav bar, but then deleted it (just needed it temporarily to enable images in the nav bar). I was then able to drag the menu image I created from my Images.xcassets onto the Main view controller's nav bar to create the correct button bar item. You just need to select the Media library icon in the right hand Utilities section to find the images and use them. Then just set the sidebarButton Referencing Outlet in the associated myviewcontroller.h file. You can do this quickly by selecting the menu image on their nav bars while holding your control key, then dragging it onto the sidebarButton property in the associated viewcontroller.h file with the assistant editor split screen mode.

On the other view controllers in my app (similar to the Photo and Map view controllers), I just had to make the view controllers have the Translucent Navigation Bar setting for their Top Bar in the view controllers attributes section (in the storyboard Utilities). The identical nav bars from the main view controller then appeared on them. I also had to make their similarly create the menu image button bar items and set the sidebarButton Referencing Outlet in their *.h file. Yu can do this quickly by selecting the menu image on their nav bars, then selecting the referencing outlets (+) sign and dragging it onto the view controller's yellow circle icon while holding the ctrl key.

Not sure if I missed something in the instructions, but this worked for me.

Cowshed

Answer 5

You can also add left hand side buttons by code:

NSMutableArray *leftBtns = [[NSMutableArray alloc] init];

UIBarButtonItem *leftBtn = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"LeftButton"] style:UIBarButtonItemStylePlain target:self action:@selector(leftButtonPressed)];
[leftBtns addObject:leftBtn];

[self.navigationItem setLeftBarButtonItems:leftBtns animated:NO];

// method

-(void)leftButtonPressed
{
    NSLog(@"Left Button Tapped");
}

Condolent

Answer 6

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];

    [button setImage:[[UIImage imageNamed:@"BtnBack"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forState:UIControlStateNormal];
    [button.imageView setTintColor:[UIColor whiteColor]];
    [button addTarget:self action:@selector(buttonClicked:)
     forControlEvents:UIControlEventTouchUpInside];
    UIBarButtonItem *buttonItem = [[UIBarButtonItem alloc]
                                   initWithCustomView:button];
    self.navigationItem.leftBarButtonItem = buttonItem;

Freudian

Answer 7

I solved it by dragging navigation bar from vc1 to vc2 in the document outline. The navigation bar is now available in scoreboard for dropping navigation barbuttonitems.

Fitter