I would like to make a back and forward navigation from the start. So I added a Button inside the navigation bar however I would like the exact iOS icon with the back text after it.
How can I get this thing myself without the need to navigate programmatically? I use the storyboard.
Ignore the background color I mean this icon :
I do not use a navigation controller I use a page view controller and that is why. I don't know how this icon work if the text is part of the icon or not so I hope anyone knows.
I get now what you are trying to do. I did this not too long ago. I actually had to make the button myself. You said you have a leftbutton, this will need an outlet in your .h file. If you want we will call it leftButton for now. You will need some images so I am going to include the ones that I made. I made them in Paint Code. It is $99 USD but one of the best investments I ever made as an App designer. Here they are. I called them back and whiteSpace..
The last two images are white spaces so make sure you get them too. Drage them from this page to your desktop, then drag them to your project, make sure to click destination, copy into folder when you do this. Once you have the icons, the rest is done programmatically. In your viewDidLoad method you will change the appearance of your leftButton.
//First get the images
UIImage *arrow = [UIImage imageNamed:#"back.png"];
UIImage *wordSpace = [UIImage imageNamed:#"whiteSpace.png"];
//Next make a size of the image or it will be distorted
CGSize size = CGSizeMake(arrow.size.width + wordSpace.size.width, arrow.size.height);
//Put the two images together
UIGraphicsBeginImageContext(size);
[arrow drawInRect:CGRectMake(0, 0, arrow.size.width, size.height)];
[wordSpace drawInRect:CGRectMake(arrow.size.width, 0, wordSpace.size.width, wordSpace.size.height)];
UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//Assign the icon to the button
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:#"Back" style:UIBarButtonItemStylePlain target:self action:#selector(backButtonClicked)];
[backButton setBackgroundImage:finalImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
//Move title over a bit to make it look nice
[backButton setTitlePositionAdjustment:UIOffsetMake(-20, 0) forBarMetrics:UIBarMetricsDefault];
//Make your button this new backButton
_leftButton = backButton;
Now that you have a custom back button you can assign the #selector(backButtonClicked). I am not sure about the fact that you are using a page controller, but in mine, I used a popViewController. But I did have a Navigation Controller in the project. You might need to call the proper VC with another method. But this is backButtonClicked.
- (void)backButtonClicked
{
//NSLog(#"going back");
[self.navigationController popViewControllerAnimated:YES];
//change to call your VC
}
So other than calling your desired view controller that should do it. If you don't know how to call a view controller programmatically, here is a link.
Related
I need to show only arrow button and hide text of left navigation button. According to this link, I can do like this. But if I do like that, slide to go back feature will be destroyed.
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:#"" style:UIBarButtonItemStylePlain target:nil action:nil];
So, I use like this to hide text.
self.navigationController.navigationBar.topItem.title = #"";
So far, it is okay. However, if my previous view's searchDisplayController is active and push to new view,it show left navigation button text. May I know how to do?
Copy and paste this line in every view controller:
self.navigationController.navigationItem.leftBarButtonItem.title = " "
Alternatively you can achieve this in storyboard/xib files using the following steps:-
Drag and drop a Navigation Item from object library onto your ViewController. Then select the ViewController.
Select that Navigation Item in the menu on left side(it will the one with back arrow and Title as text: "< Title").
Select Attribute Inspector on the right hand side and replace text: Title with an empty space.
Repeat these steps for all the the view controllers.
Hope it helps.
One solution you will have to add custom button for your requirement like this:
//create image instance add here back image
UIImage *imgBack = [UIImage imageNamed:#"image name here"];
//create UIButton instance for UIBarButtonItem
UIButton *btnBack = [UIButton buttonWithType:UIButtonTypeCustom];
[btnBack setImage:imgBack forState:UIControlStateNormal];
btnBack.frame = CGRectMake(0, 0, imgBack.size.width,imgBack.size.height);
[btnBack addTarget:self action:#selector(btnBackAction:) forControlEvents:UIControlEventTouchUpInside];
//create UIBarButtonItem instance
UIBarButtonItem *barBtnBackItem = [[UIBarButtonItem alloc] initWithCustomView:btnBack];
//set in UINavigationItem
self.navigationItem.leftBarButtonItem = barBtnBackItem;
Button method given below:
-(void)btnBackAction:(id)sender
{
[self.navigationController popViewControllerAnimated:YES];
}
EDIT : For slide swipe add in viewDidLoad method
//for enabling swipe gesture
if ([self.navigationController respondsToSelector:#selector(interactivePopGestureRecognizer)]) {
self.navigationController.interactivePopGestureRecognizer.enabled = YES;
}
#Atif's answer is correct. I just want to add in that, instead of copying and pasting the code in all files, create a custom UINavigationController and implement the required code as mentioned by #Atif.(I cannot comment due to low rating.)
I need to create a navBar back button in accordance to the designer's plan. The back button has a pattern image and stitched leather on the perimeter.
Here it is:
My question is it possible to create this without a great amount of hassle and headache? Or if it's possible at all, since the back button has varying width?
Thanks!
UPDATE
Alright, with the help of PartiallyFinite turns out this is very easy. If you set the UIEdgeInsets correctly it will keep the left side fixed, the right side fixed, and then duplicate the middle of the image considering the back button's width.
This is the image I used for my back Button:
And these are my inset settings. You can try them yourself:
backButtonImage = [backButtonImage resizableImageWithCapInsets:UIEdgeInsetsMake(5, 17, 5, 12)];
Hope this helps someone in the future.
You will need to provide a stretchable image for the button, so it knows how to display it correctly:
UIImage *buttonImage = [[UIImage imageNamed:#"backButtonImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 6)]
You don't need to do anything special to the image itself, but you do need to specify appropriate edge insets for the resizable image to indicate the area around the edges of the image that should not be stretched, as shown above (the example shows an inset of 15 pixels from the left and 6 from the right). This area should cover the arrow head, and the curved right edge, so that the middle area can be stretched out as needed. Read the documentation for more information on this method.
UPDATE: By default, the resizable area of the image will be tiled to the new size, however if you want to have it stretch instead, you can use resizableImageWithCapInsets:resizingMode: and pass UIImageResizingModeStretch to achieve that behaviour. For your case obviously tiling is better as it preserves the stitching, but for some background images stretching is a better solution. Just putting this here to help anyone who sees this in the future.
Once you have the stretchable image, you can change the appearance your back button using this code:
[myBackButtonItem setBackButtonBackgroundImage:buttonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Alternatively, you can set this custom appearance for all back buttons in your app using this code:
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:buttonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Run this when your app launches, and it will affect all back buttons in your app.
Note that, contrary to what some of the other answers suggest, you will not need to manually create any back buttons. If you create a UINavigationController and use it in the recommended way (read about that in the documentation, a navigation bar and back button will be created for you as you push view controllers using pushViewController:animated:. If you use the global UIAppearance code snippet to apply the custom button style, it will automatically be applied to all the back buttons that you have.
You can read more about setBackButtonBackgroundImage:forState:barMetrics: in the official documentation.
There are also numerous tutorials available online for a more in-depth explanation of how this works and how to do it, here are a few good ones:
http://useyourloaf.com/blog/2012/08/24/using-appearance-proxy-to-style-apps.html
http://nshipster.com/uiappearance/
You need to create your own BarButtonItem. You can't set image for system back button.
self.navigationItem.leftBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:buttonWithYourImage] autorelease];
You can create your own UIBarButtonItem and set it as the leftButtonItem on the navigation bar on the current view controller:
UIBarButtonItem *btn = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"your_image"] style:UIBarButtonItemStyleBordered target:self action:#selector(yourFunction:)];
self.navigationItem.leftBarButtonItem = btn;
I use this in my Appdelegate.m to customize button. ("buttonBack" is the name of your image). Hope it may help you
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
UIImage *barButtonImage = [[UIImage imageNamed:#"buttonBack"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 6, 0, 6)];
[[UIBarButtonItem appearance] setBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
return YES;
}
First you need to make your own back button.. and set that image to back button.
UIBarButtonItem * btn=[[UIBarButtonItem alloc]initWithTitle:#"Back" style:UIBarButtonItemStyleBordered target:self action:#selector(changed)];
self.navigationItem.leftBarButtonItem=btn;
[btn setImage:[UIImage imageNamed:#"yourimagename"]];
-(void)changed
{
[self.navigationController popToViewController:[[self.navigationController viewControllers] objectAtIndex:0] animated:YES];
}
try this one really helpful to you...
I've added another Storyboard for the iPad to my app, trying to make my first universal app.
I'm starting up with a UISplitViewController where I have a menu on the left and the detail controller on the right.
I've customized the navigation bar in the detail view and now the popup button (the one that should show the menu when the iPad is in portrait orientation) does not show.
This is the code I'm using to customize the navigation bar in viewDidLoad:
UIImage *navBarImg = [UIImage imageNamed:#"someimage"];
[self.navigationController.navigationBar setBackgroundImage:navBarImg forBarMetrics:UIBarMetricsDefault];
UIImage *logo = [UIImage imageNamed:#"logo"];
self.navBar.titleView = [[UIImageView alloc] initWithImage:logo];
Then, in the delegate method for the split view "willHideViewController", I'm trying to customize the Menu button:
UIImage *menuBtn = [UIImage imageNamed:#"menu"];
menuBtn = [menuBtn resizableImageWithCapInsets:UIEdgeInsetsMake(0.0, 4.5, 0.0, 4.5)];
barButtonItem.image = menuBtn;
barButtonItem.title = NSLocalizedString(#"Menu", nil);
[self.navigationItem setLeftBarButtonItem:barButtonItem animated:YES];
self.masterPopoverController = popoverController;
I've tried to remove the navigation bar and menu button customizations and the button shows up.
What's wrong with my code?
EDIT:
Following Nazir's advice, I've added the following code to my viewDidLoad method:
UIImage *menuBtn = [UIImage imageNamed:#"menu"];
menuBtn = [menuBtn resizableImageWithCapInsets:UIEdgeInsetsMake(0.0, 4.5, 0.0, 4.5)];
[self.navigationItem.leftBarButtonItem setBackgroundImage:menuBtn forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self.navigationItem.leftBarButtonItem setTitle:#""];
I forgot that button didn't need a title, but if I don't set it, the button will not appear.
Now the problem is that I'm messing up something with the Storyboard.
At the app start up I want to see the menu on the left (MasterViewController) and a tableview with some data on the right (DetailViewController).
So the relationship segue connecting the Split View Controller to the Detail View Controller is of type "detail view controller".
Now in the menu, beside all the other options, there's the first option used to go back to the first detail view controller (a kind of "Home" option), so I've also connected the Master View Controller with the Detail View Controller using a "Replace" segue.
So what happens now is that the menu button appears when the orientation is portrait, but if I tap on the "home" option of the menu, the button disappears.
That button is supposed to be visible on all the different detail view controllers that I'm going to create, so it's very important.
I hope I made myself clear enough.
If i got what you want to do - then add background to topBatButton so you could do as:
Do it in DetailViewController.m
UIImage *menuBtn = [UIImage imageNamed:#"someimage"];
Setting the image to Bar item:
[self.navigationItem.leftBarButtonItem setBackgroundImage:menuBtn forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Setting the title to Bar item:
[self.navigationItem.leftBarButtonItem setTitle:#"sometitle"];
You cannot have a titleView AND a leftBarButton item (if I read the docs right)
As per the docs:
Titleview: "If you set this property to a custom title, it is displayed instead of the title. This property is ignored if leftBarButtonItem is not nil."
SO I assume the inverse is true too
I want to change the background image of my UIBarButtonItems. In the root view, I want them to be a certain background image (but still rounded-rect buttons) in the nav bar, but in the next view, I have a UIToolBar where I want it to have different backgrounds yet again.
I used [[UIBarButtonItem] appearance] in my app delegate to change all of them, but I now realize for some I want it one style and for others yet another.
More importantly, I want to change not only the background image, but the shape for some. For one of the UIToolBar's UIBarButtonItems I want it to be in the shape of a back button in the navigation bar. How would I achieve this look?
Can I achieve both of these with the method outlined here?
Basically: How do I make custom UIBarButtonItems all over the app, and have some with different shapes?
If you want the buttons to look different in different view controllers, you should set them within the view controller, not in the delegate. Add code in either the init method or the viewWillAppear: method to customise the buttons. If you are customising UIToolbar items then use code similar to the link you gave. If it's for the navigation bar, do something like this:
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
//Customise button with background etc that you want
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:btn];
self.navigationItem.leftBarButtonItem = item;
//Release item if you're not using ARC
You can use the 'appearanceWhenContainedIn' method from the UIAppearance Protocol http://developer.apple.com/library/ios/#documentation/uikit/reference/UIAppearance_Protocol/Reference/Reference.html
So for the Toolbar, you'd use:
[UIBarButtonItem appearanceWhenContainedIn:[UIToolbar class], nil]
And for the NavBar:
[UIBarButtonItem appearanceWhenContainedIn:[UINavigationController class], nil]
I would like to setup the navigation controller bar button item to be an image.
I have read the following - Add image to a navigationItem's title
I understand how to setup this as an image. I am actually looking to set this up as the setting cog, within the bar button item (like a cog icon). I have seen this before in other apps, I would like to know if there is a default style to initialise for this or normally if this is achieved by the image route as above.
If this is above, does anyone know where this (kind of) default image styled icon is available, or would I need to make one?
Have you tried using the initWithCustomView option of UIBarButtonItem? A sample code will look like the below line.
UIBarButtonItem *aButton = [[UIBarButtonItem alloc] initWithCustomView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"settings.png"]]];
Another way to do this is,
UIBarButtonItem *aButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"settings.png"] style:UIBarButtonItemStyleBordered target:self action:#selector(buttonTapped)];
If you use storyboard, you can directly:
Drag a Button in the navigation bar instead of a Bar Button Item. It will automatically create a Button Bar Item for you with a Button inside it.
Enter a title for the Button Bar Item
Set an image for the Button with a Custom type.
It should works.