How do I make an Back Button from a UINavigationBar that doesn't have a background...just shows an image as seen on the Youtube app for iPhone?
Go near to Your designer and tell them to create image as you want and put it on UIButtont, such like
UINavigationBar *bar = self.navigationController.navigationBar;
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithImage:myImage
style:UIBarButtonItemStyleBordered
target:self action:#selector(buttonPressed:)];
bar.leftBarButtonItem = item;
[bar.leftBarButtonItem setImage:[UIImage imageNamed:#"image.png"] forState:UIControlStateNormal];
[item release];
Related
I want to have a controller with both back button and menu button as in given image.amazon app
But the problem is the even after increasing the x-axis value it does not shift to right. Hence, I am unable to add back button image. Here's what I am doing right now.
button = [[UIButton alloc] initWithFrame:CGRectMake(200, 100, 100, 25)];
[button setImage:[UIImage imageNamed:#"menu.png"] forState:UIControlStateNormal];
[button addTarget:[SlideNavigationController sharedInstance] action:#selector(toggleLeftMenu) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
[SlideNavigationController sharedInstance].leftBarButtonItem = rightBarButtonItem;
Try this,
UIBarButtonItem *btnBack = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:#selector(back)];
UIBarButtonItem *btnMenu = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:#selector(menu)];
[self.navigationItem setLeftBarButtonItems:[NSArray arrayWithObjects:btnBack, btnMenu, nil]];
Well on your code you specifically replaced the back button with a barBarButtonItem.
BTW, your naming is a bit confusing you are assigning a rightBarButtonItem to the leftBarButtonItem of the navigationController.
[SlideNavigationController sharedInstance].navigationItem.leftBarButtonItems= #[leftButton,menuButton]; // this will assign both button on the left side. same thing for rightBarButtonItems
In View Controller A, in viewDid Load I have this:
UIImage * backButtonImage = [UIImage imageNamed: #"bar-arrow"];
UIBarButtonItem* b = [[UIBarButtonItem alloc] initWithImage:backButtonImage style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.backBarButtonItem = b;
Still In the next view controller's nav. bar I get this:
In other words - the original back arrow of IOS7 still shows. cannot get rid of it!!
Generally hide default back button from NativationBar:
[self.navigationItem setHidesBackButton:YES animated:YES];
[self.navigationItem setHidesBackButton:YES];
and do following code:
UIButton *BackButton = [UIButton buttonWithType:UIButtonTypeCustom];
[BackButton setImage:[UIImage imageNamed:#"bar-arrow"] forState:UIControlStateNormal];
[BackButton addTarget:self action:#selector(prevButtonAction)forControlEvents:UIControlEventTouchUpInside];
[BackButton setFrame:CGRectMake(0, 0, 12, 20)];// set as par your need
UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithCustomView:BackButton];
self.navigationItem.leftBarButtonItem = barButton;
-(void)prevButtonAction
{
[self.navigationController popViewControllerAnimated:YES];
}
If you want to keep the back button functionality but just change the chevron image (and if you are targeting only iOS 7.0 and above), you can change the image like so:
- (void)viewDidLoad
{
[super viewDidLoad];
self.navigationController.navigationBar.backIndicatorImage = [UIImage imageNamed:#"bar-arrow"];
self.navigationController.navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:#"bar-arrow-transition-mask"];
}
Or if you were to subclass a UINavigationController, which I would suggest:
- (void)viewDidLoad
{
[super viewDidLoad];
self.navigationBar.backIndicatorImage = [UIImage imageNamed:#"bar-arrow"];
self.navigationBar.backIndicatorTransitionMaskImage = [UIImage imageNamed:#"bar-arrow-transition-mask"];
}
... where the "bar-arrow-transition-mask" image is an image representing the visibility of the other image, "bar-arrow". In this mask image, pixels with an alpha of zero will completely hide the moving title during transitions, while pixels with an alpha of one will completely show the moving title.
While this will require you to make a new image, it should be very quick and easy to make, and this solution preserves all navigation bar functionality without messing with the leftBarButtonItem or leftBarButtonItems and adding in manual calls to popViewControllerAnimated:.
When i testing my app through xcode in multiple devices, my app shows one toolbar as expected. After that i have uploaded the update of my app, in app store. But suddenly, I realized that in some iphones (ios 7.0.4), after app's update, on launching it cames with 2 toolbars.
I am adding the toolbar programmatically in viewDidLoad function of this controller.
UIImage* leftImg = [UIImage imageNamed:#"left.png"];
UIImage* rightImg = [UIImage imageNamed:#"right.png"];
CGRect frame = CGRectMake(0, 0, leftImg.size.width, leftImg.size.height);
UIButton* lefButton = [[UIButton alloc] initWithFrame:frame];
UIButton* rigButton = [[UIButton alloc] initWithFrame:frame];
[lefButton setTitle:#"" forState:UIControlStateNormal & UIControlStateHighlighted];
[rigButton setTitle:#"" forState:UIControlStateNormal & UIControlStateHighlighted];
[lefButton setImage:leftImg forState:UIControlStateNormal];
[lefButton setImage:leftImg forState:UIControlStateSelected];
[rigButton setImage:rightImg forState:UIControlStateNormal];
[rigButton setImage:rightImg forState:UIControlStateSelected];
[lefButton addTarget:self action:#selector(loadPrevChapter:) forControlEvents:UIControlEventTouchUpInside];
[rigButton addTarget:self action:#selector(loadNextChapter:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *itemLeft = [[UIBarButtonItem alloc] initWithCustomView:lefButton];
UIBarButtonItem *itemRight = [[UIBarButtonItem alloc] initWithCustomView:rigButton];
// In case i want to add Space between barbuttonitems
UIBarButtonItem *flexiableItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
// add items to toolbar
NSArray *items = [NSArray arrayWithObjects:itemLeft, flexiableItem, itemRight, nil];
self.toolbarItems = items;
[self.navigationController setToolbarHidden:NO animated:NO];
UIImage *toolbarBgImage = [UIImage imageNamed:tlbImg];
UIImage *navbarBgImage = ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0f) ? [UIImage imageNamed:navImgIos7] : [UIImage imageNamed:navImg];
[[UINavigationBar appearance] setBackgroundImage:navbarBgImage forBarMetrics:UIBarMetricsDefault];
[[UIToolbar appearance] setBackgroundImage:toolbarBgImage forToolbarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];
But i haven't added at navigation controller the toolbar this:
[[self navigationController].view addSubview:_toolbar];
as #Xeieshan said below.
Has anyone notice something like this before or does anyone know why this happening?
Screenshot of my app running on my iPhone 5 (v7.0.4)
Screenshot of my app, installed through appstore, after update, running on an iPhone 5 (v7.0.4)
[[self navigationController].view addSubview:toolbar]; This is how to add UIToolbar in UINavigationController but i cannot see your code where you do it?
I think you are adding UIToolbar on both UIViewController and UINavigationController.
I'd advise against adding the toolbar to UINavigationController.view, as it breaks encapsulation (even though that's not enforced very much in UIKit).
Instead, add a custom root view controller containing the toolbar and a contained UINavigationController. This also allows you to properly layout the toolbar so that it doesn't cover the views in the navigation controller.
Any idea why the custom nav bar back button image isn't displaying with this code?
instead of showing the uiimage it's showing the "< Back" default iOS button in text only
[self.navigationController setNavigationBarHidden:NO animated:NO];
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"freccia.png"] landscapeImagePhone:nil style:UIBarButtonItemStylePlain target:nil action:#selector(backBtnPress)];
could it be this parameter? UIBarButtonItemStylePlain
thanks
use this code:
UIImage *imageBack = [UIImage imageNamed:#"yourImage.png"];
UIButton *btnBack = [UIButton buttonWithType:UIButtonTypeCustom];
btnBack.bounds = CGRectMake(0, 0, imageBack.size.width, imageBack.size.height);
[btnBack setBackgroundImage:imageBack forState:UIControlStateNormal];
[btnBack addTarget:self action:#selector(back) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *barButtonBack = [[UIBarButtonItem alloc] initWithCustomView:btnBack];
self.navigationItem.hidesBackButton = YES;
self.navigationItem.leftBarButtonItem = barButtonBack;
-(void)back {
[self.navigationController popViewControllerAnimated:YES];
}
You usually set the back button in the parent view controller. However, it might just be easier to use leftBarButtonItem instead of backBarButtonItem.
you can solve this problem by two ways
1. use leftBarButtonItem instead of backBarButtonItem
2. try the below code
self.navigationItem.backBarButtonItem =[[UIBarButtonItem alloc] initWithTitle:#" " style:UIBarButtonItemStylePlain target:nil action:nil];
I need to use a simple UIBarButtonItem in a UIToolBar.
I used this code to add the button with my custom image to the navigation bar:
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"image_sheep.png"] style:UIBarButtonItemStylePlain target:self action:#selector(clone)];
NSArray *rightItems = [NSArray arrayWithObject:cloneButton];
self.navigationItem.rightBarButtonItems = rightItems;
The result is what I want and it looks like this
navigation bar http://img207.imageshack.us/img207/3383/navigationbara.jpg
When doing the same thing in a UIToolBar that I'm adding to a UITableViewCell's contentView
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"image_sheep.png"] style:UIBarButtonItemStylePlain target:self action:#selector(clone)];
UIBarButtonItem *leftSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
toolbar.items = [NSArray arrayWithObjects:leftSpace, cloneButton, nil];
The problem is that I get something like this:
toolbar http://img209.imageshack.us/img209/1374/toolbary.jpg
This is surely due to the fact that UINavigationBar and UIToolBar are not drawn the same way...
Can someone please point out how to resolve this problem?
On your UIToolbar use UIBarButtonItemStyleBordered instead of UIBarButtonItemStylePlain.
UINavigationBar will not draw the button the same without the button look.
That's how UIToolbar is supposed to work. Per the documentation:
Toolbar images that represent normal and highlighted states of an item derive from the image you set using the inherited image property from the UIBarItem class. For example, the image is converted to white and then bevelled by adding a shadow for the normal state.
That said, you might be able to get the result you want by creating a UIBarButtonItem with a custom view instead of an image. Like so:
UIImage *sheepImage = [UIImage imageNamed:#"image_sheep.png"];
UIButton *sheepButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sheepButton setImage:sheepImage forState:UIControlStateNormal];
[sheepButton addTarget:self action:#selector(clone) forControlEvents:UIControlEventTouchUpInside];
[sheepButton setShowsTouchWhenHighlighted:YES];
[sheepButton sizeToFit];
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithCustomView:sheepButton];
I haven't tested this, so I don't know if it will work.
I cannot see the images posted in the question anymore. But I am pretty sure that we're trying to mimic the UIBarButtonItemStylePlain of the UIToolBar in a UINavigationBar.
Benzado is pretty much spot on except for this line:
[sheepButton setImage:sheepImage forState:UIControlStateNormal];
This puts the image in front of the touch indicator. The UIToolBar shows the touch in front of the image. So to mimic the UIToolBar style in a UINavigationBar:
UIImage *sheepImage = [UIImage imageNamed:#"image_sheep.png"];
UIButton *sheepButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sheepButton setBackgroundImage:sheepImage forState:UIControlStateNormal];
[sheepButton addTarget:self action:#selector(clone) forControlEvents:UIControlEventTouchUpInside];
[sheepButton setShowsTouchWhenHighlighted:YES];
[sheepButton sizeToFit];
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithCustomView:sheepButton];