What I'd like to do is alter the height of the back button. However, as I understand it, the only option to alter is width. So, I thought I'd create a custom back button with my own, smaller, image. Now I've done this using the viewDidLoad method with the code below:
//Setup navigation bar
navigationController?.navigationItem.backBarButtonItem = UIBarButtonItem(image:UIImage(named:"back_arrow.png"), style:UIBarButtonItemStyle.Plain, target:nil, action:nil)
navigationController?.navigationItem.backBarButtonItem!.title = ""
However, the back button remains blue, large, and has the title 'Back'. How can I get this code to work properly? The debugger says it is running, but it is not changing anything.
I'm going to show you how to do this in the entire app, not just one page.
To change the default image of the back button, put the following in your app delegate didFinishLaunchingWithOptions::
Swift:
let backArrowImage = UIImage(named: "customImage")
let renderedImage = backArrowImage?.imageWithRenderingMode(.AlwaysOriginal)
UINavigationBar.appearance().backIndicatorImage = renderedImage
UINavigationBar.appearance().backIndicatorTransitionMaskImage = renderedImage
Obj-c:"
UIImage *backArrowImage = [UIImage imageNamed:#"customImage"];
UIImage *renderedImage = [backArrowImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[UINavigationBar appearance].backIndicatorImage = renderedImage;
[UINavigationBar appearance].backIndicatorTransitionMaskImage = renderedImage;
To remove the "Back" text from the button, add this category to your AppDelegate.m file (or your own category):
Not sure how to do this in Swift yet, so here's the Obj-c version:
#implementation UINavigationItem (LuxeCustomization)
/**
Removes text from all default back buttons so only the arrow or custom image shows up
*/
-(UIBarButtonItem *)backBarButtonItem
{
return [[UIBarButtonItem alloc] initWithTitle:#"" style:UIBarButtonItemStylePlain target:nil action:nil];
}
#end
For color you have to set the tint color on navBar, also you can set navigationItem.backBarButtonItem to nil and use leftbarButtonItem with custom button image.
Related
How come the icon info.png stays blue and don't comes with the original color of that image? I am using the following code below:
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"info.png"]
style:UIBarButtonItemStylePlain
target:self
action:#selector(info:)];
By default, image in UINavigationBar's bar button items is rendered using template mode. You can set it to original.
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[[UIImage imageNamed:#"info.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
style:UIBarButtonItemStylePlain
target:self
action:#selector(info:)];
Swift 3:
let image : UIImage? = UIImage.init(named: "heart.png")!.withRenderingMode(.alwaysOriginal)
I know this is too late to answer this question but I see there is a very simple way to solve this issue instead of doing some changes in the code
using Xcode
Go to the Assets --Select Image --- check Render as and select Original image instead of default property .
You can it from assets as well. Go to Assets.xcassets >> Select the image that is being used as barbutton item image. Tap on attribute inspector in right side panel. Choose render as to orignial image. It will be default earlier. You will now see colored image.
Swift 4:
let image = UIImage(named: "imageName")?.withRenderingMode(.alwaysOriginal)
navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(leftBarButtonPressed))
For Swift 2.1+ it would look like this:
let image : UIImage? = UIImage(named:"myImage.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
or simply
let image : UIImage? = UIImage(named:"myImage.png")!.imageWithRenderingMode(.AlwaysOriginal)
Because the color of barButtonItems in your app is related to the tintColor property on the application's window.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window.tintColor = [UIColor redColor];
return YES;
}
Ok, got it... I set the image to it's original state first.
UIImage *image = [[UIImage imageNamed:#"info.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:image
style:UIBarButtonItemStylePlain
target:self
action:#selector(info:)];
Change the bar button item tint color from the storyboard. Or color from the image in storyboard.
The color should be your expected color as hex or rgb.
I have a bar with Bar Items, my .png image has green color, but when i add it to storyboard it's displaying as blue.
How can i make it display the image as it is?
Use tintColor of UIBarButton to set the desired color for the image.
If its absolutely necessary to use original image colors, use this to set the image:
[aBarButton setImage:[[UIImage imageNamed:#"xyz.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
The docs are a little ambiguous about this
The images displayed on the bar are derived from this image. If this
image is too large to fit on the bar, it is scaled to fit. Typically,
the size of a toolbar and navigation bar image is 20 x 20 points. The
alpha values in the source image are used to create the images—opaque
values are ignored.
Essentially what this is saying is the image you supply will not be what is actually displayed. Instead the system uses the alpha mask of the image and the tintColor of the item to generate the final display.
add image programmatically
[button setImage:[[UIImage imageNamed:#"imageName.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forState:UIControlStateNormal];
if its not work then try this:-
UIImage *myImage = [UIImage imageNamed:#"myImageFile.png"];
myImage = [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIBarButtonItem *menuButton = [[UIBarButtonItem alloc] initWithImage:myImage style:UIBarButtonItemStylePlain target:self action:#selector(menuObject:)];
self.navigationItem.leftBarButtonItem = menuButton;
if its not work then try this:-
#define setTurqoiseColor [UIColor colorWithRed:68.0f/255.0f green:181.0f/255.0f blue:223.0f/255.0f alpha:1.0]
UIBarButtonItem *menuButton = [[UIBarButtonItem alloc] initWithImage:buttonImage style:UIBarButtonItemStyleBordered target:self action:#selector(toggleMenu)];
menuButton.tintColor = setTurqoiseColor;
To set tint color of bar item global, in your App Delegate, add these lines of code
UIBarButtonItem *barButtonAppearance = [UIBarButtonItem appearance];
[barButtonAppearance setTintColor:[UIColor redColor]]; // set to your color
[[UIBarButtonItem appearance] setTintColor:[UIColor redColor]];
You have to set your UITabBar tintColor.
If you would like to add a custom color / gradient you can set your tabBarItem image and selectedImage property as follow:
customTabBarItem.selectedImage = UIImage(named: "customSelectedImage")!.imageWithRenderingMode(.AlwaysOriginal)
customTabBarItem.image = UIImage(named: "customUnselectedImage")!.imageWithRenderingMode(.AlwaysOriginal)
I want to change the UISearchBar's Cancel button to one that only has an image, and no text. Here's where I got to so far from original behaviour
to this
A step in the right direction, but the problem is the button is too wide. When I debug the view, I can see that it has button label insets of 11 points on left and right. Does anyone know how to make the button fit the content size? The image is square.
Here's my code for customising the button:
UIBarButtonItem *barButtonAppearanceInSearchBar;
if (IOS9) {
barButtonAppearanceInSearchBar = [UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:#[[UISearchBar class]]];
} else {
barButtonAppearanceInSearchBar = [UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil];
}
barButtonAppearanceInSearchBar.image = [UIImage imageNamed:#"Close"];
barButtonAppearanceInSearchBar.title = nil;
Another weird issue is that when I dismiss the search bar and activate it again, the button image turns dark (it's still there, I can see it when debugging the views), so it looks like this
Any idea how to keep the icon white? I tried this method below, but without results:
- (void)willPresentSearchController:(UISearchController *)searchController {
searchController.searchBar.tintColor = [UIColor whiteColor];
}
Use image rendering and tint color.
barButtonAppearanceInSearchBar.image = [[UIImage imageNamed:#"Close"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
barButtonAppearanceInSearchBar.tintColor = [UIColor whiteColor];
barButtonAppearanceInSearchBar.title = nil;
Here's the Swift 4.1 Version of #jamesBlake 's answer:
func setUpSearchBar() {
let barButtonAppearanceInSearchBar: UIBarButtonItem?
barButtonAppearanceInSearchBar = UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self])
barButtonAppearanceInSearchBar?.image = UIImage(named: "Home.png")?.withRenderingMode(.alwaysTemplate)
barButtonAppearanceInSearchBar?.tintColor = UIColor.white
barButtonAppearanceInSearchBar?.title = nil
}
I am using uibarbutton in my view to show the notification badge number. I have used following code to display.
barButtonBadge.badgeValue = #"5";
How can I change the background color of this badge number?
Right now it is taking default color.
Through your good question i got the solution from above Lalit Kumar link.
Add following two libraries in your project
1. UIButton+Badge.h and UIButton+Badge.m
2. UIBarButtonItem+Badge.h and UIBarButtonItem+Badge.m
Also import
#import "UIButton+Badge.h"
#import "UIBarButtonItem+Badge.h" in required view controller.
in your required ViewController.m
UIImage *image2 = [UIImage imageNamed:#"someImage"];
UIBarButtonItem *navRightButton = [[UIBarButtonItem alloc] initWithImage:image2
style:UIBarButtonItemStylePlain
target:self
action:#selector(buttonPress:)];
self.navigationItem.leftBarButtonItem = navRightButton;
self.navigationItem.leftBarButtonItem.badgeValue = #"2";
self.navigationItem.leftBarButtonItem.badgeBGColor = [UIColor orangeColor]; //Whatever you want just change the color
On my nav bar, I have a couple of rightBarButtonItems that have custom icons (the icon images are white, which worked well with the basic color scheme of iOS 6).
Under iOS 7, loading the images using initWithTitle (see code snippet 1) replaces the "white" color in the icon with the proper global tint (a specific color of dark blue in this case)
Code Snippet 1:
UIBarButtonItem *refreshButton = [[UIBarButtonItem alloc] initWithTitle:#"" style:(UIBarButtonItemStyle) UIBarButtonSystemItemCancel target:(self) action:#selector(refreshList)];
refreshButton.image = [UIImage imageNamed:#"RefreshIcon.png"];
However, I needed to use initWithCustomView to overcome a weird change in behavior that was causing the icons to move out of view. The basic idea was to specifically set the size of the icons. initWithCustomView solved the sizing problem, but does not display the button images with the global tint, they are displayed in the color of the image (white). Code Snippet 2 shows how I am creating the button with initWithCustomView.
Code Snippet 2:
CGRect frameCustomButton2 = CGRectMake(0.0, 0.0, 18.0, 18.0);
UIButton *customButton2 = [[UIButton alloc] initWithFrame:frameCustomButton2];
[customButton2 setBackgroundImage:iconRefreshButton forState:UIControlStateNormal];
UIBarButtonItem *barCustomButton2 =[[UIBarButtonItem alloc] initWithCustomView:customButton2 ];
barCustomButton2.image = iconRefreshButton;
[customButton2 addTarget:self action:#selector(refreshList) forControlEvents:UIControlEventTouchUpInside];
All of this code is of course in (void)viewDidLoad. I have tried things like:
barCustomButton2.tintColor = [UIColor blackColor]; //doesn't work
or
[barButtonAppearance setTintColor:[UIColor blackColor]]; // doesn't work
and they do not override the white color of the image. It is almost as if the creation of the custom view takes place after the view looks at the global tint color?
How can I ensure the button icon takes on the global tint?
Thanks!
Just wanted to get this into a root comment to give better context to the "answer" checkmark, and give better formatting.
I was able to figure this one out! You can tell the image to always render as template, which will force it to take on the global tint color.
UIImage *iconRefreshButton = [UIImage imageNamed:#"MyIconFilename.png"];
iconRefreshButton = [iconRefreshButton imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
The default, if you don't set it, is "UIImageRenderingModeAutomatic" which means it will render as a template or original image based on context.
You'll either have to work around the issue you were having with the first code snippet, or you'll have to create a UIButton subclass that uses its image as a mask to show the tint color in drawRect:.
I'd recommend the first approach.