14

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.

3
  • 1
    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. Oct 23, 2013 at 18:57
  • that's right. I never come across any possible solution for this desired behaviour.
    – U. Ali
    Dec 10, 2013 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 6, 2019 at 7:50

6 Answers 6

3

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
}
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]];
1
  • 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 6, 2019 at 7:42
1

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 (:

0

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")
    }
}
0

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)

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.