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.
Related
I'm trying to handle the rotation of a UINavigationBar with UINavigationItem (i'm not using the UINavigationController), i have successfully made so that the height and width show according, but that does not seems to be correct, as the UINavigationBar still acts as being in portrait mode (big title and button), also when i set a custom background for both metrics, it seems to only show the portrait background metric, ignoring completely the landscape one.
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"modal-top-landscape"] forBarMetrics:UIBarMetricsLandscapePhone];
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"modal-top"] forBarMetrics:UIBarMetricsDefault];
Is there a way to tell the UINavigationBar that is rotated and should show the text and buttons accordingly?
I attach some screenshots:
One workaround for this is to use a UINavigationController, and use a CGRectOffset to remove the margin that leaves the status bar... add the Controller to the parent controller (also the view).
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 am setting global styles in iOS 5 with UIAppearance. Here's an example:
[[UIbarButtonItem appearance]
setTtitletextAttributes:someStyle
forState:UIControlStateNormal
];
It looks good in most cases:
But there are cases where the global style looks ugly, like in a movie player.
For the movie player, I would prefer to have the default blue button. So how would I target only the back button's appearance and not the done button's appearance? I have similar issues with targeting normal table cells and grouped table cells.
You need to use a custom subclass of UINavigationBar. Let's call it MyNavigationBar. Then you can do this:
[[UIBarButtonItem appearanceWhenContainedIn:[MyNavigationBar class], nil]
setTintColor:[UIColor redColor]];
and it will only affect buttons within your navigation bar, not the MPMoviePlayerController's navigation bar.
The problem, of course, is that UINavigationController always uses a basic UINavigationBar... if you create it in code. But if you create it in a nib, you can click on its navigation bar (in the nib's document outline) and change the bar's class in the Identity inspector.
If in your AppDelegate you just replace
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"navback"]
forBarMetrics:UIBarMetricsDefault];
with
[[UINavigationBar appearanceWhenContainedIn:[UINavigationController class], nil]
setBackgroundImage:[UIImage imageNamed:#"navback"] forBarMetrics:UIBarMetricsDefault];
movie player will have proper black bar in full screen mode. Works in iOS 5 and iOS 6
You can actually change the proxy to just target certain view hierarchies. In other words, when the view you want to customize is contained in a certain view, you can modify its appearance differently from the rest. So set your global (white) style first, but then call the following method to customize the appearance for when the button appears in an MPMoviePlayerController or whatever else.
[[UIBarButtonItem appearanceWhenContainedIn:
[MPMoviePlayerController class], nil]
setTitletextAttributes:someStyle
forState:UIControlStateNormal];
Let me know if that helps!
How to add colour to the navigation bar ? I need to implement this for iOS 4 and above.
I want a colour similar to the one in the screenshot:
In the example you posted, It looks more like a backround image because of the slight lighting effect. (It's brighter in the middle, it you look closely. In IB, I have the nav bar set to Black Transparent with the following Background Image. (320 x 44px)
h file.
IBOutlet UINavigationBar *navBar;
m file "viewDidLoad" function:
navBar.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"nav"]];
In iOS < 5 you can set tint color of individual navigation bar directly, e.g.:
// self is a UIViewController
[self.navigationController.navigationBar setTintColor:[UIColor purpleColor]];
Once you don't need compatibility with iOS 4.x you can use appearance proxy for UINavigationBar. This would work for all navigation bars in the application:
[[UINavigationBar appearance] setTintColor:[UIColor purpleColor]];
SO I am setting a UINavigationBar tintColor and here's what I get:
[navController.navigationBar setTintColor:[UIColor whiteColor]];
How is this even possible? Here's some more info if it helps:
I've got a UINavigationController that I customize as follows:
First, come up with a 44px-high image as the background for the nav bar. (In this case, if you wanted to use a 44px-high white image, that'd do the trick --- but it'll look much nicer if you use some type of vertical gradient)
Second, use the following code in your AppDelegate's didFinishLaunching method. (The image is called "background_44.png".
// Set the background image for *all* UINavigationBars
UIImage *gradientImage44 = [[UIImage imageNamed:#"background_44.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
// Set the background image for *all* UINavigationBars
[[UINavigationBar appearance] setBackgroundImage:gradientImage44
forBarMetrics:UIBarMetricsDefault];
I dropped that code in my project, worked fine. Even changed bar styles and colors. No problem. This line of code is fine, there is an issue somewhere else or its some crazy glitch.