I am wanting to use an image for my backButton in my navigationController. I just want the image used, with no "back" text shown at all, so I did:
UIImage *backButtonImage = [[UIImage imageNamed:#"ZSSBackButton.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 25, 0, 0)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, backButtonImage.size.height*2) forBarMetrics:UIBarMetricsDefault];
This works well, but seems to have the side effect to making long navigationItem titles appear to be off center, even though it really is just leaving white space where the backbutton text should be:
Is there a way that I can bring the title a little more to the left?
You can manage position of UINavigationbar title using titleView property.
UIView *backView =[[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 40)];// Here you can set View width and height as per your requirement for displaying titleLbl position in navigationbar
[backView setBackgroundColor:[UIColor clearColor]];
UILabel *titleLbl = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 40)];
[backView addSubview:titleLbl];
titleLbl.text = #"YOUR TITLE";
titleLbl.textAlignment = NSTextAlignmentCenter;
self.navigationItem.titleView = backView;
EDIT : you can create custom button and assign it to leftbutton as :
UIButton *btnBack = [UIButton buttonWithType:UIButtonTypeCustom];
btnBack.frame = CGRectMake(0,0,51,31);
[btnBack setBackgroundImage:[UIImage imageNamed:#"ZSSBackButton"] forState:UIControlStateNormal];
[btnBack addTarget:self action:#selector(btnBackProfile_TouchUpInside:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *leftBtn = [[UIBarButtonItem alloc] initWithCustomView:btnBack];
[self.navigationItem setLeftBarButtonItem:leftBtn];
Hope it helps you.
Related
Here is my navigation bar
I had a problem about changing vertical position of Settings UIBarButtonItem on my navigation bar. I would like to move the button item "Settings" down
Here is my code
UIBarButtonItem *settingsItem = [[UIBarButtonItem alloc] initWithTitle:#"Settings" style:UIBarButtonItemStylePlain target:self action:nil];
self.navItem.rightBarButtonItem = settingsItem;
[[UIBarButtonItem appearance] setTitlePositionAdjustment:UIOffsetMake(0,-10) forBarMetrics:UIBarMetricsDefault];
I had tried it again and again. It seemed that it's not work
Could anyone suggest me how to move the button item "Settings" down ?
You can easily add a Custom Button to your NavigationBarItem, Here is the way,
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; //create custom Button
[button setTitle:#"Settings" forState:UIControlStateNormal];
[button.titleLabel setFont:[UIFont systemFontOfSize:14.0]];
[button setTitleColor:[UIColor colorWithRed:179.0/255.0 green:40.0/255.0 blue:18.0/255.0 alpha:1] forState:UIControlStateNormal];
button.frame = CGRectMake(0, 0, 50, 20); //Button frame
[button addTarget:self action:#selector(yourCustomSelectorHere) forControlEvents:UIControlEventTouchUpInside]; //Add action method to the button here
UIView *backButtonView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 63, 33)];
backButtonView.bounds = CGRectOffset(backButtonView.bounds, -14, -7);
[backButtonView addSubview:button];
UIBarButtonItem *barBtnItem = [[UIBarButtonItem alloc]initWithCustomView: backButtonView]; //set button as UIBarButtonItem
self.navigationItem.rightBarButtonItem = barBtnItem; //set barBtnItem to rightBarButtonItem
By changing backButtonView.bounds values you can change the origin of the Button
Cited from apple's documentation on UIAppearance protocol
iOS applies appearance changes when a view enters a window, it doesn’t
change the appearance of a view that’s already in a window.
So if your code of setting UIBarButtonItem's appearance is after the navigationItem assignment code. It won't work
I notice the blank space between bar button items is quite large. I want to reduce the space to have more room for my title. I tried to create fixed space then added it among the buttons but it didn't work. Does anybody know how to do it?
UIBarButtonItem *fixedItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
fixedItem.width = 10.0f;
self.navigationItem.rightBarButtonItems = #[settingsButtonItem, fixedItem, speakerButtonItem, fixedItem, favouriteButtonItem];
You're close but what you need is a negative fixed space. If your other UIBarButtonItems use custom views, check your frame for those views. Here's an example of adding two right bar button items that hug the edge more. In your case you'll want to add negative space between the buttons as well.
UIBarButtonItem *negativeSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
negativeSpace.width = -8;
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
backButton.frame = CGRectMake(0, 0, 44, 44);
[backButton setImage:[[UIImage imageNamed:#"ic_back"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]
forState:UIControlStateNormal];
backButton.imageView.tintColor = [UIColor whiteColor];
[backButton addTarget:self
action:#selector(backPressed)
forControlEvents:UIControlEventTouchUpInside];
self.backNavButton = [[UIBarButtonItem alloc] initWithCustomView:backButton];
self.backNavButton.enabled = NO;
UIButton *forwardButton = [UIButton buttonWithType:UIButtonTypeCustom];
forwardButton.frame = CGRectMake(0, 0, 44, 44);
[forwardButton setImage:[forwardImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]
forState:UIControlStateNormal];
forwardButton.imageView.tintColor = [UIColor whiteColor];
[forwardButton addTarget:self
action:#selector(forwardPressed)
forControlEvents:UIControlEventTouchUpInside];
self.forwardNavButton = [[UIBarButtonItem alloc] initWithCustomView:forwardButton];
self.forwardNavButton.enabled = NO;
self.navigationItem.rightBarButtonItems = #[negativeSpace,self.forwardNavButton,self.backNavButton];
Using Xcode 6.4, This worked beautifully for me with 1 line of code!
https://stackoverflow.com/a/26469607/3634990
self.myBarButtonItem.imageInsets = UIEdgeInsetsMake(0, 25, 0, -25);
Note- Unfortunately this does not move the hit area of the button, only its image. But a good solution if you just need to move the button a little bit!
I am customizing my nag bar button in iOS7 and I am using the following code:
// Customizing the NavBar Buttons
UIImage * btHome = [[UIImage imageNamed:#"Home.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 3, 0, 3)];
[[UIBarButtonItem appearance] setBackgroundImage:btHome forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
It is working, but the view shows my home button with the button text over it, I do not want the text to show.
What else do I need to do to remove the text?
What I have is shown here:
Try to set
1) text color on a bar button item through appearance
2) use setImage: instead of setBackgroundImage: and do not use resizable image
Try with this code. May be it will help you.
UIImage *faceImage = [UIImage imageNamed:#"back_arrow.png"];
UIButton *yourbutton = [UIButton buttonWithType:UIButtonTypeCustom];
yourbutton.bounds = CGRectMake( 10, 0, faceImage.size.width, faceImage.size.height );
[yourbutton addTarget:self action:#selector(handleBack:) forControlEvents:UIControlEventTouchUpInside];
[yourbutton setImage:faceImage forState:UIControlStateNormal];
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithCustomView:yourbutton];
self.navigationItem.leftBarButtonItem = backButton;
Sets the back button title offset for given bar metrics
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, -60) forBarMetrics:UIBarMetricsDefault];
I can change the y of custom bar button item with setBackgroundVerticalPositionAdjustment, but how can I change the horizontalposition ?
[viewController.navigationItem.rightBarButtonItem setBackgroundVerticalPositionAdjustment:50 forBarMetrics:UIBarMetricsDefault];
You can create bar button with custom view, and in that view you can create your own layout. It can be just simple UIButton, and you can set edgeInsets in UIButton.
see Customization of UINavigationBar and the back button
f.e.
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setBackgroundImage:[UIImage imageNamed:#"chk_back.png"] forState:UIControlStateNormal];
[btn addTarget:self action:#selector(BackBtn) forControlEvents:UIControlEventTouchUpInside];
UIView *customView = [[[UIView alloc] initWithFrame:CGRectMake(0,0, 50, 38)] autorelease];
btn.frame = CGRectMake(10, 3, 30, 32); // where you can set your insets
[customView addSubview:btn];
UIBarButtonItem *barBtn = [[UIBarButtonItem alloc] initWithCustomView:customView];
Or you can add some fixedSpace in Bar after or befor your bar item
UIBarButtonItem *fixedSpace = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
target:nil
action:nil];
[fixedSpace setWidth:20];
You can change the imageInsets of rightBarButtonItem.
For example:
[viewController.navigationItem.rightBarButtonItem setImageInsets:UIEdgeInsetsMake(0, 0, 0, 50)];
I am using these icons as bar button item in a toolbar
http://stopiransnukes.org/images/home_icon.png
and
http://www.bladmuziekplus.nl/shop/files/images/icon_home.png
But background image is converted to white automatically even if its black.
I tried setting image background via code but still its turning into white.
Manually : I have Dragged+Dropped the above image to the project.I have selected the bar button item and on 4th option on the right bar (shield icon) select different tint and under bar button drop-down image is set to the above image.
Programmatically :
[self.homeButton setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor blackColor], UITextAttributeTextColor,nil] forState:UIControlStateNormal];
[[self.homeButton] setImage:[UIImage imageNamed:#"home_icon.png"]];
How do I fix it ?
Thanks in Advance.
.
This is a step by step process to add a image into UIButton and add that UIButton as a custom view inside the UIBarButtonItem in the storyboard itself.. I will add some images for you to understand this totally..
step 1: Drag and drop the toolbar in storyboard view
step 2: Drag and drop the UIButton in your view
step 3: Drag and drop the image in your UIButton
step 4: Drag and drop the UIButton in the toolbar and now you can in the right side that it is added inside of the UIBarButtonItem. now you just have to connect an action method for your button.
viewDidLoad
[super viewDidLoad];
//uıbarButtonItem firstButtonItem,secondButtonItem
UIImage* firstButtonImage = [UIImage imageNamed:#"firstImageName"];;
CGRect frameimg = CGRectMake(0, 0, 30, 30);
UIButton * someButton = [[UIButton alloc] initWithFrame:frameimg];
[someButton setBackgroundImage:firstButtonImage forState:UIControlStateNormal];
[someButton addTarget:self action:#selector(goToUserProfile)
forControlEvents:UIControlEventTouchUpInside];
self.firstButtonItem = [[UIBarButtonItem alloc] initWithCustomView:someButton];
UIImage* secondButtonImage = [UIImage imageNamed:#"secondImageName"];
frameimg = CGRectMake(0, 0, 30, 30);
someButton = [[UIButton alloc] initWithFrame:frameimg];
[someButton setBackgroundImage:secondButtonImage forState:UIControlStateNormal];
[someButton addTarget:self action:#selector(likePhoto)
forControlEvents:UIControlEventTouchUpInside];
[someButton setTag:1];
self.secondButtonItem = [[UIBarButtonItem alloc] initWithCustomView:someButton];
[self.toolbar setItems:[self addItemsToToolbar]];
AddItemsToToolbar Method
- (NSMutableArray *)addItemsToToolbar{
NSMutableArray *items = [[NSMutableArray alloc] init];
UIBarButtonItem *flexSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
[items addObject:flexSpace];
[items addObject:self.firstButtonItem];
[items addObject:flexSpace];
[items addObject:self.secondButtonItem];
return items;
}
This is the normal behaviour, you can read about it in the Human Interface Guidelines.
http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW8
If you want to change that you need to write your own subclasses.
UIImage* infoButtonImage = [UIImage imageNamed:#"info_button.png"];;
CGRect frameimg = CGRectMake(0, 0, infoButtonImage.size.width, infoButtonImage.size.height);
UIButton * someButton = [[UIButton alloc] initWithFrame:frameimg];
[someButton setBackgroundImage:infoButtonImage forState:UIControlStateNormal];
[someButton addTarget:self action:#selector(actionOfButton)
forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem * infoButton = [[UIBarButtonItem alloc] initWithCustomView:someButton];
This code is going to solve your problem