How to add UINavigationBar with two UIBarButtonItem programmatically? - uinavigationbar

I added code to the viewDidLoad method of ViewController. I have two UIBarButtonItem, one of them is on the left called Left and the other one is at the right called Right. I can get the left button to work but I cannot even see the right button. What am I doing wrong?
UINavigationBar *navbar = [[UINavigationBar alloc]initWithFrame:CGRectMake(0, 0, 420, 44)];
[navbar setBackgroundImage:[UIImage imageNamed:#"bg_fade.png"] forBarMetrics:UIBarMetricsDefault];
UINavigationItem *item = [[UINavigationItem alloc]initWithTitle:#"Tray Tracker"];
UIBarButtonItem *leftButton = [[UIBarButtonItem alloc]initWithTitle:#"Left" style:UIBarButtonItemStylePlain target:self action:
#selector(leftAction:)];
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc]initWithTitle:#"Right" style:UIBarButtonItemStylePlain target:self action:
#selector(saveAction:)];
item.leftBarButtonItem = leftButton;
item.rightBarButtonItem = rightButton;
navbar.items = #[item];
[self.view addSubview:navbar];
I do have the IBActions for leftAction and saveAction

If you simply want a bar with two buttons, you should use a UIToolbar instead. It's much easier to handle for this simple case. The only change you would need is to create a UIBarButtonItem flexibleSpace (it's a system item), and call [toolbar setItems:#[leftButton, flexibleSpace, rightButton]];
If you need actual navigation functionality such as a back button, take a look at this answer. You need to use UINavigationBar pushNavigationItem.
using UINavigationBar without UINavigationController
In your example, you are misusing the items property. The documentation for UINavigationBar states,
The bottom item is at index 0, the back item is at index n-2,
and the top item is at index n-1, where n is the number of items in the array.
In order to do accomplish what you're trying to do with a UINavigationBar, I think you need multiple navigationItems.
It would be MUCH easier to either use a UIToolbar or use the UINavigationBar in conjunction with a UINavigationController.
Edit
Now that you posted the image, I think the reason you can't see the right bar button is because your frame width is too large. The iphone screen is 320 px wide, so your frame for the navigationBar should be CGRectMake(0, 0, 320, 44)

Related

How do I fit a UISearchBar in a UIBarButtonItem?

I'm using a UISearchController in iOS 8 and when I make its UISearchBar my table's header view everything is fine. However now I need it in my UINavigationBar's left bar button (can't be the title view because of the vertical centering when I enlarge the nav bar). When I wrap the UISearchBar in a UIBarButtonItem it is larger than the width of the screen.
I think it is related to my view controller initialized from a storyboard with size classes enabled which means my frames are not set till viewDidLayoutSubviews. However I had the same issue with my segmented control in a toolbar and I just called sizeToFit on the toolbar in viewDidLayoutSubviews and that fixed the toolbar. When I do the same for the search bar it still draws partly off screen. Apple does this in some of their iPad apps but how?
Note: I can hack it to get it all on screen but I have to wrap it in another view but then the color is off and it just seems wrong and I think the animation is off.
You need to create a UIBarButtonItem with UIBarButtonSystemItemFixedSpace with -10 width which will remove 10 px padding.
UIBarButtonItem *Spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
[Spacer setWidth:-10];
UISearchBar *searchBar= [[UISearchBar alloc] initWithFrame:CGRectMake(0, 5, self.view.frame.size.width-10, 39)];
UIBarButtonItem *searchBarItem = [[UIBarButtonItem alloc] initWithCustomView:searchBar];
self.navigationItem.leftBarButtonItems = [NSArray arrayWithObjects:Spacer,searchBarItem,nil];

Bar Button Item not correctly aligned

I have an issue with my navigation bar, the UIBarButtonItem is not correctly vertically aligned. I don't know why because I'm using a simple UIBarButtonItem and not a custom view. See my code below and thanks for your help!
UIBarButtonItem *newGameItem = [[UIBarButtonItem alloc] initWithTitle:#"New Game" style:UIBarButtonItemStyleDone target:self action:#selector(newGame)];
self.navigationItem.rightBarButtonItem = newGameItem;
Actually there are couple ways to align the bar buttons.
Try to adjust the button title position with this:
[self.navigationItem.rightBarButtonItem setTitlePositionAdjustment:UIOffsetMake(-10, -10)
forBarMetrics:UIBarMetricsDefault];
-10 -10 - just for example
OR
you can initialize your newGameItem with custom UIButton. The custom button is a subclass of UIButton with this method overridden
- (UIEdgeInsets)alignmentRectInsets {
return UIEdgeInsetsMake(0, -10, 0, 15.0f); // here you can play with values to align your button properly
}
then initialize your newGameItem
CustomBarButton *button = [CustomBarButton buttonWithType:UIButtonTypeCustom];
[button setTitle:#"New game" forState:UIControlStateNormal];
button.frame = CGRectMake (0, 0, 60, 40);
[button addTarget:self action:#selector(newGame) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *newGameItem = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.rightBarButtonItem = newGameItem;
I had a similar issue: We use custom fonts via UIAppearance for both navigation titles and bar button items, and in some cases, the right item was vertically misaligned.
I could easily fix the misalignment by using [self.navigationItem setRightBarButtonItem:rightItem animated:YES] instead of the property setter.
I had the same problem with a button on the left, I was able to fix it in Xcode 6.3.1: select the button (bar button item) right column tab "ruler" inset image Top value: -54 instead of 0.
Note that: my device is an iPhone4 with iOS 7, the button was perfectly in place in Xcode and misplaced on the device, now it is in place on the device and misplaced in Xcode
Unfortunately, there is not much you can do about UIBarButtonItem vertical spacing. I believe you'll have to either increase the font size of your title on the UINavigationBar (you can do this with UIAppearance also), or decrease the font size of your UIBarButtonItem.

UIButtonBarItem looks wrong

I think this is going to be a stupid question, but I can't seem to find the answer. I have a few simple lines of code to put a button in the navigation bar:
UIBarButtonItem *cancelButton=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:#"button-cancel.png"] style:UIBarButtonItemStylePlain target:self action:#selector(cancelPressed:)];
UINavigationItem *item = [[UINavigationItem alloc] init];
item.leftBarButtonItem = cancelButton;
item.hidesBackButton = YES;
[self.navigationBar pushNavigationItem:item animated:NO];
This button works fine, but it looks like this:
Any thoughts?
You probably want to create the bar button item using a custom view, where the custom view is a UIButton:
UIImage *cancelImage = [UIImage imageNamed:#"button-cancel"];
UIButton *cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
cancelButton.frame = (CGRect){CGPointZero, cancelImage.size);
[cancelButton setImage:cancelImage forState:UIControlStateNormal];
UIBarButtonItem *cancelBarButton = [[UIBarButtonItem alloc] initWithCustomView:cancelButton];
Set your button (cancelButton) size according to the size of the button-cancel.png.
stopButton.frame = CGRectMake ();
Instead, create a custom type UIButton with your image. Set the target and selector of the UIbutton to what you wish the bar button item to do. Then initialize the bar button item as follows:
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
Where button is your UIButton using the desired image.
UIBarButtonItem/initWithImage: is typically used for making iconic buttons - not buttons that have text in them.
If you just want to change how the common textual UIBarButtonItem looks, you just need to set the background image of your bar button item. This way you don't have to have images for each button that contain your button text.
Docs: - (void)setBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics
You can also set this app-wide by calling setBackgroundImage: on the UIBarButtonItem appearance proxy.
Lastly, note that you'll likely need to create a resizeable image to pass to setBackgroundImage. This will let your single image accomodate any button size. See UIImage/resizeableImageWithCapInsets:resizingMode: (iOS6) or UIImage/stretchableImageWithLeftCapWidth:topCapHeight: (pre iOS6)
You can certainly do what #Wain suggests but there are drawbacks. For one, your press-handler will no longer be sending a UIBarButtonItem as the 'sender'. That may not seem like much until you have a common handler that suddenly needs to determine if the sender is a UIBarButtonItem or a UIButton, or if you want to present a UIPopoverController against this BarButtonItem (but you only have the UIButton reference...)

How do I specify an action for a custom Back button in a standalone UINavigationBar?

I have a custom UINavigationBar on a screen, i.e., no navigation controller, as defined below which contains a Back button w/ the title "Media" and the action "mediaViewComplete". However, the mediaViewComplete method is not being called when the button is tapped. How do you specify an action for a Back button?
self.navigationBar=[[UINavigationBar alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 44)];
navigationBar.barStyle=UIBarStyleBlackTranslucent;
UINavigationItem *navigationItem=[[UINavigationItem alloc]init];
UIBarButtonItem *backButton=[[UIBarButtonItem alloc]initWithTitle:#"Media" style:UIBarButtonItemStylePlain target:self action:#selector(mediaViewComplete)];
navigationItem.backBarButtonItem=backButton;
[self.navigationBar pushNavigationItem:navigationItem animated:NO];
navigationItem=[[UINavigationItem alloc]init];
UIBarButtonItem *editButton=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemEdit target:self action:#selector(editCategorization)];
navigationItem.rightBarButtonItem=editButton;
[self.navigationBar pushNavigationItem:navigationItem animated:NO];
[self.view addSubview:navigationBar];
[editButton release];
[backButton release];
[navigationItem release];
The problem is that you are using:
navigationItem.backBarButtonItem = backbutton;
The backBarButtonItem has it's own event that is not overridden by your action: option. In fact, Apple guidelines state that you should use "nil" as you action for backBarButtonItem. The backBarButtonItem is not owned by the current view controller.
If you are unconcerned about the arrow shape of the button, you should use leftBarButtonItem instead. If you want to create fully custom back buttons with the arrow shape, you'll have to do some custom magic. Luckily, most of the work has been done for you:
http://idevrecipes.com/2011/01/12/how-do-iphone-apps-instagramreederdailybooth-implement-custom-navigationbar-with-variable-width-back-buttons/
Download this project and look at the results. It even contains the images you need to retain an arrow shaped custom back button. It is more work, but it's much less hack.

UIToolbar in iPad

I wanted to have two buttons on the both end of Navigation Bar (in iPad's Detail View Controller).
So I created two UIToolbars and I set the them as Left&RightBarButtonItems.
But, There is some color variation in the NavigationBar.
Attached images for your understanding.
the code I used ,
UIToolbar *leftToolbar =[[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 200, 45)];
NSMutableArray *lItems = [[NSMutableArray alloc] initWithArray:[leftToolbar items]];
UIBarButtonItem *lb1 =[[UIBarButtonItem alloc]initWithTitle:#"Home"style:UIBarButtonItemStyleBordered target:self action:#selector(home:) ];
UIBarButtonItem *lb2 =[[UIBarButtonItem alloc]initWithTitle:#"New Document"style:UIBarButtonItemStyleBordered target:self action:#selector(newDoc:) ];
[lItems insertObject:lb1 atIndex:0];
[lItems insertObject:lb2 atIndex:1];
[leftToolbar setItems:lItems animated:YES];
[lItems release];
leftToolbar.barStyle =UIBarStyleBlackTranslucent;
leftToolbar.tintColor=[UIColor clearColor];
self.navigationItem.leftBarButtonItem=[[UIBarButtonItem alloc] initWithCustomView:leftToolbar];
Can you help me to avoid this color variation?
Is there any other way to have buttons like this, without using UIToolbar?
Thanks ,
Gopi.
just remove navigation bar and add tool bar, why you adding toolbar to navigation bar?
To achieve the same, use segment controll, set it in Left or right barbutton's view, once you select a segmet, deselect it after few seconds, say 0.3secs, it looks good, no color vairations, it looks like a part of Navigation bar
Found the solution !
code is correct, but one small bug. Have to set the height to 44, not 45. I did this and it seems to fit over the existing NavigationBar.
UIToolbar *leftToolbar =[[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 200, 44)];
Works for me . . Anyway I moved to the Single tool bar method.
Hope this helps some one.!!
Have a great day!!
Gopi.

Resources