I am using UIAppearance as introduced in iOS 5 to set a custom background image for all the BarButtonItems in my app.
The following code is what I use to set it for the back button, and it works fine in portrait mode. However, when the phone is rotated to landscape and the navigation bar is resized, the button does not get resized at all and is cut off at the bottom.
I thought it would do this automatically since I set the edge insets to not care about vertical resizing. Any ideas?
UIImage *colorViewBBIImage = [[UIImage imageNamed:#"backButton"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 17, 0, 7)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:colorViewBBIImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
My non-retina image is 30px x 31px.
For landscape mode, just call the second line of your code with last parameter UIBarMetricsLandscapePhone
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:colorViewBBIImage forState:UIControlStateNormal barMetrics:UIBarMetricsLandscapePhone];
Related
I have created a custom white image ( 640 x 128 pixel ) and set it as background for the navigation bar using:
[[UINavigationBar appearance] setBackgroundColor:[UIColor whiteColor]];
UIImage* navBarBackgroundImage = [UIImage imageNamed:#"navbarWhite.png"];
[[UINavigationBar appearance] setBackgroundImage:navBarBackgroundImage forBarMetrics:UIBarMetricsDefault];
My goal is to have both navigation and statusbar with a white background.
As far as I test it in the simulator everything looks fine, means both nav and statusbar have a white background.
As soon as I run it on my iPhone 4S the statusbar turns light gray..
Additional info:
UINavigationBar Style UIBarStyleDefault Translucent
UIStatusBarStyleDefault
I am using navigation controllers.
Any idea?
How is it possible to have something like http://www.nutsaboutmac.com/wp-content/uploads/2012/11/ShareLinktoFacebook.png
Until now, I've put the same background image for my NavigationBar and my BarButtonItem. The problem is that the button is no longer bordered, you can't do the difference between the NavigationBar and the Button anymore...
UIImage *image = [UIImage imageNamed:#"facebook_texture.png"];
[cancelButton setBackgroundImage:image forState:UIControlStateNormal style:UIBarButtonItemStyleBordered barMetrics:UIBarMetricsDefault];
[topBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
How can I change the background but keep the bordered style ?
you can't set a custom bg image. the border is the bg image and it is either your own or the system.
=> no way but making your own image
Edit:
I THOUGHT for what you describe use tinting: barButton.tintColor=color and supply a color either with an alpha or a pattern image made with colorwithPatternImage
but... the tinting with a clear color or a pattern doesn't work. this is a bug in the sdk IMO
=> no way but making your own image
I am making a custom UI for Navigation bar and I have a question exactly as asked in this post
Custom background/transparent background on UIBarButtonItem?
In StoryBoard I tried every sort of combination to make my UIbarbuttonitem tint transparent or clear color but I still see this ugly black button (see then + sign). How can I achieve the effect of transparency so that it looks like my button is blended in with the background?
My screenshot
Some other app screenshot. Look how nice this looks?!
Note here the + image is my own custom png img of 20 x 20 pixels with transparent/blank background.
You can achieve that and more using the new appearance API introduced in iOS 5.
Basically you set the appearance for your UI once and it gets reflected in the whole program.
Here is an example for the UIBarButtonItem:
// You can also use stretchable images
UIImage *image = [[UIImage imageNamed:#"myCoolBarButton.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
[[UIBarButtonItem appearance] setBackgroundImage:image forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
If you cannot use iOS 5, then you have to build those programmatically like this:
// Create a custom button with an image
UIImage *image = [UIImage imageNamed:#"myCoolBarButton.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:image forState:UIControlStateNormal];
button.frame = CGRectMake(0.0, 0.0, image.size.width, image.size.height);
// Create a custom UIBarButtonItem with the button
UIBarButtonItem aBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:aButton];
Anyway, here are a few links with good tutorials on the appearance subject
User Interface Customization in iOS 5
How To Make Your App Stand Out With The New iOS 5 Appearance API
EDIT:
Just for clarification, it is much easier to do with custom images than playing around with colors, gradients and transparency.
You can't do it with tint. You will have to set both the backgroundImage of the navigation bar and the backgroundImage of the bar button item, so that they harmonize as desired.
When drawing the background image of the bar button item you may have to draw the entire button including the rounded rect outine and the shadowing of the rounded rect outine, but this is not difficult, and when you've done it once you've reusable code forever.
I think your png image with + sign does not contain alpha channel. I have transparent image and it's working perfectly fine for me.
I use the appearance method with UIBarButtonItem to customize the background images of my back button, but on the iPhone Retina display, I see a bizarre issue when using the image.
Here's an example of the non-Retina back button; you'll see that it looks fine:
However, the Retina version looks off. Appears as though the top few pixels of the image are reappearing down below:
Anyone else seen this before? How did you fix it?
Here's the code I'm using in my appDelegate to customize the UIBarButtonItem's back button:
UIImage *backButton = [[UIImage imageNamed:#"backButton"] resizableImageWithCapInsets:UIEdgeInsetsMake(5, 15, 5,5)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButton forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Figured it out. My image was only 27 pixels tall; it should have been 30 pixels tall.
I didn't notice the issue on my rectangular UIBarButtonItem images, because rectangles can rescale without issue --- but with a pointed UIBarButtonItem image, you can't rescale without showing weird artifacts on the left-hand side from the pointed arrow.
tl;dr: Make your UIBarButtonItem images 30 and 60 pixels tall for your 1x and #2x sizes, respectively.
Follwoing code is from my project, I don't have problem.
try to use below code snippet
UIImage* blueBack = [UIImage imageNamed:#"back.png"];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:blueBack forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
I'm trying to set the tintColor of a UIBarButtonItem in method that gets called when my program starts. I set up all my views using storyboards. I then customize the appearance of the views using the new iOS5 guidelines for using appearance proxies. I've customized the background of the navigation bar by doing the following:
- (void)customizeAppearance
{
UIImage *leatherTexture = [[UIImage imageNamed:#"BrownLeather#2x.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UINavigationBar appearance] setBackgroundImage:leatherTexture
forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBackgroundImage:leatherTexture
forBarMetrics:UIBarMetricsLandscapePhone];
[[UIBarButtonItem appearance] setTintColor:[UIColor clearColor]];
}
I was hoping that by setting the UIBarButtonItem tintColor to clear would allow me to easily use the default button styles while having a custom background texture. However, setting the tintColor to clear just turns the button black as opposed to being transparent or clear. Any ideas what I'm doing wrong? Is there a way to create a clear button without having to use custom images for the buttons? See the image below:
You can't do this way (because IMO the default background of UIBarButtonItem is black. and new tint color is over-layered on it).
However you can customize your UIBarButtonItem with using UIButton (with background) as customView in UIBarButtonItem.
Or if you are targeting iOS 5 only you can use brown tint color (which will be flat and will not show background image)
Just found out that in Xcode 4.5 you can just drag a UIButton into the UIBarButton in the Storyboard. The UIButton is then fully customizable.