Custom "Pressed" UIBarButtonItem Backgrounds

Question

I'm trying to set a custom pressed image for my UIBarButtonItem but nothing seems to be working. From my understanding, the code below should work, but despite setting the image for the highlighted state, the button looks exactly the same when pressed.

Any ideas?

UIImage *barButtonBackground = [[UIImage imageNamed:ANBarButtonItemBackgroundImageName] resizableImageWithCapInsets:UIEdgeInsetsMake(5.0f,5.0f, 5.0f, 5.0f)];
UIImage *barButtonPressedBackground = [[UIImage imageNamed:ANBarButtonPressedImageName] resizableImageWithCapInsets:UIEdgeInsetsMake(5.0f,5.0f, 5.0f, 5.0f)];

[self.navigationItem.leftBarButtonItem setBackgroundImage:barButtonBackground forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self.navigationItem.rightBarButtonItem setBackgroundImage:barButtonBackground forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

[self.navigationItem.leftBarButtonItem setBackgroundImage:barButtonPressedBackground forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
[self.navigationItem.rightBarButtonItem setBackgroundImage:barButtonPressedBackground forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];

Solution 1

I think you should create a custom UIButton with background images for the different control states that match your color scheme, then use this UIButton as the view for a custom UIBarButtonItem.

UIButton *customButton = [UIButton buttonWithType:...];

[customButton setBackgroundImage:barButtonBackground  forState:UIControlStateNormal];
[customButton setBackgroundImage:barButtonPressedBackground  forState:UIControlStateSelected];

UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView: customButton];

If you want some other Reference then you can go through this beautiful link : Using Appearance Proxy to Style Apps

Solution 2

You can probably try like this. Works for me.

UIImage* image3 = [UIImage imageNamed:@"mail-48_24.png"];
CGRect frameimg = CGRectMake(0, 0, image3.size.width, image3.size.height);
UIButton *someButton = [[UIButton alloc] initWithFrame:frameimg];
[someButton setBackgroundImage:image3 forState:UIControlStateNormal];
[someButton addTarget:self action:@selector(sendmail)
     forControlEvents:UIControlEventTouchUpInside];
[someButton setShowsTouchWhenHighlighted:YES];

UIBarButtonItem *mailbutton =[[UIBarButtonItem alloc] initWithCustomView:someButton];
self.navigationItem.rightBarButtonItem=mailbutton;
[someButton release];

Solution 3

Maybe this will help you (just add that files into project):

UIBarButtonItem+customLook.h

#import <UIKit/UIKit.h>

@interface UIBarButtonItem (customLook)

+ (UIBarButtonItem *)barButtonItemWithImage:(UIImage *)image selectedBackGroundImage:(UIImage *)selected target:(id)target action:(SEL)selector;

@end

UIBarButtonItem+customLook.m

#import "UIBarButtonItem+customLook.h"

@implementation UIBarButtonItem (customLook)

+ (UIBarButtonItem *)barButtonItemWithImage:(UIImage *)image selectedBackGroundImage:(UIImage *)selected target:(id)target action:(SEL)selector
{
    UIButton* someButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [someButton setImage:image forState:UIControlStateNormal];
    [someButton setBackgroundImage:selected forState:UIControlStateSelected];

    CGSize size = image.size;
    CGRect frame = CGRectZero;
    frame.size.width = size.width;
    frame.size.height = 30.0f; // Standart height
    someButton.frame = frame;

    [someButton addTarget:target action:selector forControlEvents:UIControlEventTouchUpInside];

    UIBarButtonItem* backButton = [[UIBarButtonItem alloc] initWithCustomView:someButton];

    return backButton;
}

@end

Some view controller:

#import "UIBarButtonItem+customLook.h"
...

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIBarButtonItem *bbi = [UIBarButtonItem barButtonItemWithImage:[UIImage imageNamed:@"29-heart-selected.png"]
                                          selectedBackGroundImage:[UIImage imageNamed:@"DarkButton_Pressed.png"]
                                                            target:self
                                                            action:@selector(someAction:)];
    self.navigationItem.rightBarButtonItem = bbi;
}

...

- (void)someAction:(id)sender
{
    [(UIButton *)sender setSelected:YES];
}

Solution 4

    UIImage* btnImage = [UIImage imageNamed:@"share-icon-deselected-16x16.png"];
    CGRect frameimg = CGRectMake(0, 0, btnImage.size.width, btnImage.size.height);
    UIButton *someButton = [[UIButton alloc] initWithFrame:frameimg];
    [someButton setBackgroundImage:btnImage forState:UIControlStateNormal];
    [someButton addTarget:self action:@selector(share:)
         forControlEvents:UIControlEventTouchUpInside];
    [someButton setShowsTouchWhenHighlighted:YES];

    UIBarButtonItem *mailbutton =[[UIBarButtonItem alloc] initWithCustomView:someButton];
    self.navigationItem.rightBarButtonItem=mailbutton;




- (void)share:(id)sender{
    UIButton*btn = (UIButton*)sender;
    if (btn.isSelected)
    {
        [btn setSelected:NO];
        [btn setBackgroundImage:[UIImage imageNamed:@"share-icon-deselected-16x16.png"] forState:UIControlStateNormal];
    }
    else
    {
        [btn setSelected:YES];
        [btn setBackgroundImage:[UIImage imageNamed:@"share-icon-selected-16x16.png"] forState:UIControlStateNormal];
    }
};

View more solutions

Comments

[aroooo]

I was really hoping there was an easy way to do this with actual UIBarButtonItems, but this looks like the best way to go that I can find. Thanks.

[Stan]

This should work but what if we want to set different images for the different states (not background images)? the setImage method on the UIBarButtonItem does not seem to have a forState method... I need the image itself to change, not just the background. Any ideas about this?

[user1010819]

Same question as stan??

[SmileBot]

I like your suggestion to use the image width and height. But allow me to make a few suggestions. When you setup your button, setup the image for selected state with the line [someButton setBackgroundImage:selectedImage forState:UIControlStateSelected]; . In your share method, use UIButton as the type of the param, and toggle using this line: button.selected = !button.selected; Take care.

[Atef]

Yup, thats right :) Thanks for your suggestion @cocoanut.