how to set UIBarButtonItem selected or highlighted image or tint colours in iOS 7?

Question

How to provide normal state and selected/highlighted state images to uibarbuttonitem in iOS 7? Is there any way to provide tint colour for both normal and selected/highlighted state of uibarbuttonitem?

I don't want to use uibutton as a view for uibarbuttonitem! Any elegant solution would be highly appreciated.

I also wondering if there's way to do this. Custom view with UIButton is the closest solution I know, but it can't handle different bar metrics. — Pride Chung, Oct 23 '13 at 18:57
that's right. I never come across any possible solution for this desired behaviour. — U. Ali, Dec 10 '13 at 17:14
Before iOS 10, the class of the UIBarButtonItem's view in UINavigationBar is `UINavigationButton`, after iOS 11, it is `_UIButtonBarButton`. Both of them is subclass of UIControl, so you can swizzle the `UIControl`'s `setHighlighted:` and `setSelected:`, add a property like `setHighlightedBlock` or `setSelectedBlock`, call the block in the swillze methods, then you can do anything you want after get the view of `UIBarButtonItem`. — MoLice, Jan 06 '19 at 07:50

score 3 · Answer 1 · answered May 22 '15 at 19:38

You can use a UIButton as a customView of a UIBarButtonItem and have two different background images for a normal and selected state of the UIButton. Then when the button is tapped, you can just set the selected state to YES or NO.

// Build right bar button
UIImage *normalButtonImage = [UIImage imageNamed:@"normal-button"];
UIImage *selectedButtonImage = [UIImage imageNamed:@"selected-button"];
CGRect rightButtonFrame = CGRectMake(0, 0, normalButtonImage.size.width,
                                           normalButtonImage.size.height);
UIButton *rightButton = [[UIButton alloc] initWithFrame:rightButtonFrame];
[rightButton setBackgroundImage:normalButtonImage forState:UIControlStateNormal];
[rightButton setBackgroundImage:selectedButtonImage forState:UIControlStateSelected];
[rightButton addTarget:self action:@selector(rightBarButtonPress)
         forControlEvents:UIControlEventTouchDown];
[orientationButton setShowsTouchWhenHighlighted:YES];
[orientationButton setSelected:NO];
UIBarButtonItem *rightBarButton = [[UIBarButtonItem alloc] initWithCustomView:rightButton];
[self.navigationItem setRightBarButtonItem:rightBarButton];

Then your in method for when the button is clicked, change the state

- (void)rightBarButtonPress
{
    //toggle selected state of button
    UIBarButtonItem *rightBarButton = self.navigationItem.rightBarButtonItem;
    UIButton *button = (UIButton *)rightBarButton.customView;
    [button setSelected:!button.selected];

    //do whatever else you gotta do
}

score 1 · Answer 2 · answered Nov 21 '13 at 15:47

1

You can do this using the UIAppearance Protocol Reference

NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:[UIColor redColor], UITextAttributeTextColor, [UIColor clearColor], UITextAttributeTextShadowColor, nil];

[[UIBarButtonItem appearance] setTitleTextAttributes:options forState:UIControlStateNormal];

You might also have to use:

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

answered Nov 21 '13 at 15:47

TrevorL

495
2
7

Actually, the `tintColor` property in `UINavigationBar` is not an `UI_APPEARANCE_SELECTOR`, even if the code `[[UINavigationBar appearance] setTintColor:[UIColor redColor]]` works correctly. So I suggest not to use tintColor with `UIAppearance`. – MoLice Jan 06 '19 at 07:42

score 1 · Answer 3 · edited May 23 '17 at 12:19

According to this answer, I did something extra and kind of have an answer for you here. I have my custom UITabBarController, which is linked with my UITabBarController in the StoryBoard file. So in order to remove the automatic tint provided by iOS when the TabBar is unselected, I ended up removing it in this manner. The images can be a vast variety of images but just in the way recommended here. Here it goes:

NSArray *navConArr = self.viewControllers;//self is custom UITabBarController
UINavigationController *naviOne = [navConArr objectAtIndex:0];//I have 3 different tabs, objectAtIndex:0 means the first tab navigation controller
UITabBarItem *naviBtn  = naviOne.tabBarItem;
UIImage *image = [[UIImage imageNamed:@"iconNaviOne"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[naviBtn setSelectedImage:image];
[naviBtn setImage:image];

So when moving from this tab to the other one and leaving this in the unselected (gray as default) tint, you can set it to the image provided. Thankfully, this works like a charm (:

score 0 · Answer 4 · answered May 03 '18 at 09:18

Here is Swift 4 solution:

private var barButtonItem: UIBarButtonItem?

override func viewDidLoad() {
    super.viewDidLoad()
    let barButtonItem = UIBarButtonItem(image: UIImage(named: "YourImage"), style: .plain, target: self, action: #selector(handleBarButtonAction))
    navigationItem.rightBarButtonItem = barButtonItem
    self.barButtonItem = barButtonItem
}

@objc
private func handleBarButtonAction() {
    if barButtonItem?.image == UIImage(named: "YourImage") {
        barButtonItem?.image = UIImage(named: "YourSelectedImage")
    } else {
        barButtonItem?.image = UIImage(named: "YourImage")
    }
}

score 0 · Answer 5 · answered May 16 '21 at 06:33

AFAIK there is no native/elegant solution to do this, what I've done is tracking the state of the button and based on that change the tintColor

@objc func handleButton() {
    if yourButtonIsSelected {
        yourButton.tintColor = unselectedColor
    } else {
        yourButton.tintColor = selectedColor
    }
}

Notice that there is no way to know if a UIBarButtonItem is selected or not, thus you will need to provide this too (yourButtonIsSelected on my example)

score 0 · Answer 6 · answered Nov 21 '21 at 07:47

0

Swift 5.x

guard let button = self?.navigationItem.rightBarButtonItem?.customView as? UIButton  else { return }
// button.isSelected = #your condition here
// button.tintColor = #your condition here

answered Nov 21 '21 at 07:47

Giang

2,384
2
25
26

how to set UIBarButtonItem selected or highlighted image or tint colours in iOS 7?

6 Answers6

Linked