UIButton as UINavigationbar button

Question

I have a Tab bar application. and in one of the tab bars I have a navigation contorller. Im trying to set a UIButton with an image as the right button the navigation bar.

    UIButton *refreshButton = [[UIButton alloc] init];
    [refreshButton setImage:[UIImage imageNamed:@"refresh_icon.png"] forState:UIControlStateNormal];
    [refreshButton addTarget:self action:@selector(refreshSection) forControlEvents:UIControlEventTouchUpInside];
    UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithCustomView:refreshButton];
    //[rightButton setImage:[UIImage imageNamed:@"refresh_icon.png"]]; << DOESN'T WORK EITHER  
    self.navigationItem.rightBarButtonItem = rightButton;
    [refreshButton release];
    [rightButton release];

but the image doesn't show up. I get an invisible button.

EDIT: I want the button style to be plain or background to be transparent, so that only the image shows. Hence I am using a UIbutton instead of using a UIBarButton directly.

Answer 1

I ended up doing this

    UIButton *refreshButton = [[UIButton alloc] initWithFrame:CGRectMake(292, 9, 27, 27)];
    [refreshButton setImage:[UIImage imageNamed:@"refresh_icon.png"] forState:UIControlStateNormal];
    [refreshButton addTarget:self action:@selector(refresh) forControlEvents:UIControlEventTouchUpInside];
    [self.navigationController.navigationBar addSubview:refreshButton];
    [refreshButton release];

It works fine now but I am not really sure if this is the right way of doing it.

Answer 2

You don't have to create a UIButton and use it as custom view in the UIBarButtonItem. You can create a UIBarButtonItem directly with an image:

UIImage *myImage = [UIImage imageNamed:@"myImage.png"];
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:myImage style:UIBarButtonItemStyleBordered target:self action:@selector(refreshSection)];  
self.navigationItem.rightBarButtonItem = button;    
[button release];

--

Updated, according to comments

Use a UIImageView as custom view in the UIBarButtonItem:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"myImage.png"]];
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithCustomView:imageView];
self.navigationItem.rightBarButtonItem = rightButton;
[imageView release];
[rightButton release];

--

Updated

Tried the last approach and while this does visually look like you want it to, I can't seem to get it to handle taps. Although the target and action has been set.

--

Final update

I've gotten your initial code in the question up & running. The reason the image is not showing, is because you haven't set the frame of the button. Once you set the frame, the image is shown in the navigation bar.

Here's my snippet I used & tested:

UIImage *myImage = [UIImage imageNamed:@"paw.png"];
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
[myButton setImage:myImage forState:UIControlStateNormal];
myButton.showsTouchWhenHighlighted = YES;
myButton.frame = CGRectMake(0.0, 0.0, myImage.size.width, myImage.size.height);

[myButton addTarget:self action:@selector(tapped:) forControlEvents:UIControlEventTouchUpInside];

UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithCustomView:myButton];
self.navigationItem.rightBarButtonItem = rightButton;

[rightButton release];
[myButton release];

Note: I have set the showsTouchWhenHighlighted property of the UIButton to visually hightlight the button when it is pressed.