Customizing tint color of UIBarButtonSystemItem with UIAppearance API
Asked Answered
H

3

5

I know I can customize the UIBarButtonItem text via

setTitleTextAttributes:forState:

There is also a way to customize UITabBar icons via

setSelectedImageTintColor:

Is there a way to customize the tint color of a UIBarButtonSystemItem, (e.g. the trash icon color), just to have a consistent UX? I could not find anything.

If this is not possible, how would I proceed? Should I save a color modified version of the icon? Where can I find it? What would be the easiest way to modify it?

EDIT

To clarify, it's not the background color of the UIBarButtonItem I am asking for, but the color of the contour of the icon.

EDIT

Setting the tint color of the UIBarButtonItem yields the background color of the button set.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];


    [[UINavigationBar appearance] setTintColor:[UIColor greenColor]];

    UIBarButtonItem* trashButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemTrash target:nil action:nil];

    trashButton.tintColor = [UIColor blackColor];
    UIViewController* viewController = [[UIViewController alloc] init];
    UINavigationController* navController = [[UINavigationController alloc] initWithRootViewController:viewController];
    [viewController.navigationItem setRightBarButtonItem:trashButton];

    self.window.rootViewController = navController;
    return YES;
}

yields this.

EDIT 2

It turns out that the contour color of the system icons in fact can be set via tintColor property of UIBarButtonItem, however only if its style property has the value UIBarButtonItemStylePlain. (Even then, some colors are special and leave the contour white. One such color is [UIColor blackColor]) However, using the UIBarButtonItem in a UINavigationBar the style is forced to be UIBarButtonItemStyleBordered. In this case, tintColor sets the background color of the button and leaves the contour white.

As I am using the UIBarButtonItems in a navigation bar, my problem still remains unsolved.

Heterogenous answered 21/2, 2013 at 16:51 Comment(0)
H
6

I have solved my problem by changing the color of the bar button system item png file in an external editor, including that image to the project and loading it via

[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"UIButtonBarTrashBlack"] style:UIBarButtonItemStyleBordered target:self action:@selector(myAction)];

I have found the internal system image using the helpful UIKit-Artwork-Extractor.

I have edited the color of the artwork using the free software GIMP.

Heterogenous answered 21/2, 2013 at 19:52 Comment(2)
Thank you very much for this helpful answer! This indeed seems the simplest way to do it.Russianize
Too bad that you can't set the width of the UIBarButtonItem in a UINavigationBar :( Now the button doesn't look anything like the System item.Russianize
P
10

Note: The following only works for buttons added to a toolbar, not a navbar.

Use the tintColor property of UIBarButtonItem. Either call it on a specific instance or call it on the appearance for all button items.

Be careful setting the tint for all button items via appearance. Not all button items look right when you set the tint.

Update:

UIBarButtonItem *btnAdd = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(addAction)];
btnAdd.tintColor = [UIColor blackColor];

This will make the button's icon black (the background will be whatever the toolbar's tint is).

Pilkington answered 21/2, 2013 at 17:5 Comment(12)
Thanks for the prompt answer. As I suspected, this changes the background color of the barButton. Say, my navbar is green and the button backgrounds are green, too, and I want to display black text and the UIBarButtonSystemItems also black on a green background, how would I achieve that? My only problem is the black color of the UIBarButtonSystemItem, which by default is white and I can't modify it.Heterogenous
I do this in my app. For one of the system type bar button items, I set the button's tintColor. This changes the color of the icon only. I do this for bar button items I add to a toolbar.Pilkington
Just tried it and retried it and retried it. Using iOS 6.1 SDK. Setting the tint color to black I am getting a white trash can on black background. I need a black can on a green background.Heterogenous
I just verified that the code I posted is correct for changing the icon's color, not the button's background. Make sure you comment out all other UIBarButtonItem appearance code and try just the tintColor on a single button.Pilkington
I've updated my question with the sample app to verify. Is this code supposed to do what you say?Heterogenous
OK, I see the issue. I've stated that my solution is for toolbars. Your updated code shows you are putting the bar button item in a navbar. I need to see if that makes a difference.Pilkington
Oh... Toolbar != Navbar. I didn't specify. This is my fault. Weird if this makes a difference.Heterogenous
Just tested for Toolbars. Same issue. Difference is: On toolbar I can choose UIBarButtonItemStylePlain which is the default. On navbar UIBarButtonItemStyleBordered is forced. But even for plain style, the trash can contours stay white with tint color set to black.Heterogenous
Huh? You don't set a style for the system icons. See the code I posted. Now add that button item as follows: self.toolbarItems = @[ btnAdd ];.Pilkington
What's the difference to the line trashButton.tintColor = [UIColor blackColor];? Isn't that the equivalent of your code?Heterogenous
+1 for staying with me. See my new edit, if you are still a bit interested. Thanks.Heterogenous
This worked for me on the Navbar for UIBarButtonSystemItemAdd. Thanks.Inglenook
H
6

I have solved my problem by changing the color of the bar button system item png file in an external editor, including that image to the project and loading it via

[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"UIButtonBarTrashBlack"] style:UIBarButtonItemStyleBordered target:self action:@selector(myAction)];

I have found the internal system image using the helpful UIKit-Artwork-Extractor.

I have edited the color of the artwork using the free software GIMP.

Heterogenous answered 21/2, 2013 at 19:52 Comment(2)
Thank you very much for this helpful answer! This indeed seems the simplest way to do it.Russianize
Too bad that you can't set the width of the UIBarButtonItem in a UINavigationBar :( Now the button doesn't look anything like the System item.Russianize
P
-1

Instead of using black color, use this:

[UIColor colorWithRed:0 green:0 blue:0 alpha:1]; // [UIColor blackColor] makes it white

Panta answered 15/11, 2013 at 1:39 Comment(1)
Got a down with no comment? Very usefulPanta

© 2022 - 2024 — McMap. All rights reserved.