I'm customizing the elements like navigation bar, tab bar and uibarbuttonitem using UIAppearance. It works very well except for a very strange behavior of the UIBarButtonItem elements. On the top level of the navigation controller hierarchy everything looks good, but if I push the next view controller, the UIBarButtonItem elements move a little bit downwards, but at the same time, the back button stays at its correct position. I attached two images to illustrate my problem.
1) First view controller in the navigation controller hierarchy
2) Second view controller in the navigation controller hierarchy
EDIT: The code
//Change navigation bar appearance
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"GPNavigationBarBackground.png"] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];
[[UINavigationBar appearance] setShadowImage:[UIImage imageNamed:#"GPNavigationBarShadow.png"]];
[[UINavigationBar appearance] setTitleTextAttributes:
[NSDictionary dictionaryWithObjectsAndKeys:
[UIColor whiteColor], UITextAttributeTextColor,
[UIFont boldSystemFontOfSize:17], UITextAttributeFont,nil]];
[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:2.f forBarMetrics:UIBarMetricsDefault];
UIImage *buttonBackground = [[UIImage imageNamed:#"GPNavigationBarButton.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
UIImage *buttonPressedBackground = [[UIImage imageNamed:#"GPNavigationBarButtonPressed.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
UIImage *backButtonBackground = [[UIImage imageNamed:#"GPNavigationBarBackButton.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 10)];
UIImage *backButtonPressedBackground = [[UIImage imageNamed:#"GPNavigationBarBackButtonPressed.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 10)];
[[UIBarButtonItem appearance] setBackgroundImage:buttonBackground forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackgroundImage:buttonPressedBackground forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonBackground forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonPressedBackground forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonBackgroundVerticalPositionAdjustment:1.f forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackgroundVerticalPositionAdjustment:1.f forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setTitlePositionAdjustment:UIOffsetMake(0, 1.f) forBarMetrics:UIBarMetricsDefault];
Well, after brooding on that problem, I finally solved it. The code above is absolutely correct. The only problem was the height of the background images for the UIBarButtonItem. The UIAppearance proxy lets you set all the graphics, but it doesn't allow you to alter the height of the UIBarButtonItem.
So, when customizing UIBarButtonItem, always remember that a
UIBarButtonItem can't be higher than 30pt. That means that custom artwork shouldn't exceed this size.
You can set background images that are higher than 30pt, but you will run into the same problem as stated above.
Related
I am using a white background on my UINavigationBar with darkGrayColor text
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"uinavigationcontrollerbackground"] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:font,UITextAttributeFont ,[UIColor darkGrayColor], UITextAttributeTextColor, [UIColor whiteColor], UITextAttributeTextShadowColor, nil]];
Which looks nice but I have buttons defined like this throughout my app:
self.searchButton =[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemSearch target:self action:#selector(searchProducts)];
I killed the default blakc background look I had going like this:
[[UIBarButtonItem appearance] setBackgroundImage:[UIImage imageNamed:#"uibarbuttonbackground"] forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
Which is just a white square.
Now my icons are still white with a light gray shadow, anyway to change these default icons?
Once I tried to change background of UIBarButtonSystemItemCamera but nothing worked. I guess these default system button types (UIBarButtonSystemItem )come with a background image already, so changing it won't do.
I recommend you to create a custom view and init your bar button with it. Not a perfect code but I hope it helps.
UIImage *image = [UIImage imageNamed:#"icon.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage: [image stretchableImageWithLeftCapWidth:7.0 topCapHeight:0.0] forState:UIControlStateNormal];
button.frame= CGRectMake(0.0, 0.0, image.size.width, image.size.height);
[button addTarget:self action:#selector(takePicture:) forControlEvents:UIControlEventTouchUpInside];
UIView *v=[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, image.size.width, image.size.height) ];
[v addSubview:button];
UIBarButtonItem *barItem = [[[UIBarButtonItem alloc] initWithCustomView:v] autorelease];
I used the category solution found here, it is working great:
UIBarButtonItem with custom image and no border
I little more work than I was hoping but it is a nice clean solution.
I'm really tried to do a button (rightBarButtonItem) like the instagram's button, I think is not possible to set background-image & image to the button in the same time.
See this in
**
AppDelegate.m
**
NSDictionary *faTextAttributes = #{ UITextAttributeFont : [UIFont fontWithName:#"Arial" size: 12],
UITextAttributeTextColor : [UIColor whiteColor],
UITextAttributeTextShadowColor: [UIColor blackColor],
UITextAttributeTextShadowOffset: [NSValue valueWithCGSize: CGSizeMake(0,0)] };
[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil]
setTitleTextAttributes:faTextAttributes forState:UIControlStateNormal];
[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil]
setTitleTextAttributes:faTextAttributes forState:UIControlStateHighlighted];
[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil]
setBackgroundImage:[UIImage imageNamed:#"bar"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil]
setBackgroundImage:[UIImage imageNamed:#"bar"] forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
FirstViewController.m
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithTitle:#"" style:UIBarButtonItemStyleDone target:nil action:nil];
self.navigationItem.rightBarButtonItem = rightButton;
Here the images:
Background image (2x) http://d.pr/i/BYS9
Refresh image (2x) http://d.pr/i/Hg5u
What im looking for to do the same button of instagram application, set the refresh image inside the background image.
Hope you help me about this.
Unfortunately UIBarButtonItem is not a subclass of UIButton and therefore does not have the complex properties and customizability that UIButton has. The way Instagram is accomplishing this button is to have only one image that is the Refresh image superimposed over the background image. When the button is pressed, they hide the item and replace it with pinwheel.
alternatively you could create a custom button, add your desired attributes to that button and then use that button to create the bar items:
UIBarButton* button initWithCustomView:customButton;
I use this code for customization UIBarButtonItems:
backImage = [UIImage imageNamed:#"barButtonImage"];
backImage = [backImage resizableImageWithCapInsets:UIEdgeInsetsMake(0.0f, 6.0f, 0.0f, 6.0f) resizingMode:UIImageResizingModeTile];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackgroundImage:backImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
All of navigation bars look fine
But toolbars have resized items in strange way:
All of UIBarButtonItems are defined in storyboard without any custom views. How can I remove this resizing?
I am using the appearance proxy to adjust my color settings globally:
//Setup custom appearances
if ([UINavigationBar respondsToSelector:#selector(appearance)]) {
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"header"] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setTintColor:[UIColor colorWithRed:96.0/255.0 green:13.0/255.0 blue:11.0/255.0 alpha:1.0]];
[[UIBarButtonItem appearance] setTintColor:[UIColor colorWithRed:96.0/255.0 green:13.0/255.0 blue:11.0/255.0 alpha:1.0]];
//rgb: 96, 13, 11
//[[UIToolbar appearance] setBackgroundImage:[UIImage imageNamed:#"header"] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
[[UIToolbar appearance] setTintColor:[UIColor blackColor]];
}
This works fine, but when I tap on a UIBarButtonItem that is in my UINavigationbar, it changes color to black. How can I make sure the highlighted state is not black?
last line is:
[[UIToolbar appearance] setTintColor:[UIColor blackColor]];
maybe rem it?
Check this out: UIBarButtonItem with color?
Make sure that you import "QuartzCore/QuartzCore.h" in order to access the layer properties of UIView. To import that, you need to have added the CoreGraphics framework to your project.
I know how to add back navigation button with image or change the tile but I haven't seen any example with background image and its title (#"back").
Can I add a custom UIButton with custom background image and title?
This, what I finally did in my code actually works!!!
Just update "forState" and "barMetrics" values for different appearances.
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:[UIImage imageNamed:#"myImage"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
I'm not sure what you mean by (#back) but here is how I was able to get an image in the back button and the the UINavigationBar:
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"myLogo.png"] forBarMetrics:UIBarMetricsDefault];
UIImage *backButton = [[UIImage imageNamed:#"HeaderTest.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButton forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
This is an ios 5 solution. Thank you to these sources:
http://www.whypad.com/posts/ios-5-problem-setting-image-for-uinavigationbar/1011/
http://iosdevelopertips.com/user-interface/ios-5-customize-uinavigationbar-and-uibarbuttonitem-with-appearance-api.html