iOS UIBarButtonItem with UIButton as custom view problems

[Soulstorm]

For my back buttons in the navigation controller, I wanted to use a custom image, so I figured that creating a custom button with an image and placing it inside a UIBarButtonItem would do the trick.

UIImage* buttonImage = [UIImage imageNamed: @"header.navigation.back.png"]; 	
UIButton *aButton = [UIButton buttonWithType:UIButtonTypeCustom];
[aButton setImage:buttonImage forState:UIControlStateNormal];
aButton.frame =  CGRectMake(0.0, 0.0, buttonImage.size.width/2, 32);
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithCustomView:aButton];
[aButton addTarget:self action:@selector(backToPriorView) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = backButton;
[backButton release];

It works fine, but at random times while pressing the button, the image goes shady (like it's being pressed) and stays that way, while nothing happens (the action is not being called)! If I press the button again, it will perform the action just fine. This doesn't happen always, which is the reason why I am having a hard time debugging it.

Also, it happens only when I create custom buttons and place them on the left navigation item (where the default back button item should be). It never happens on the navigation item.

Any thoughts?

 

[dejo]

Why is the frame for your button half the image's width?

P.S. Interesting format for your filename. I'd only use one period.

 

[North Bronson]

Have you tried using the backBarButtonItem property on the navigation bar?

 

[Soulstorm]

@North Bronson
Yes, I have tried that with no success.

@dejo
I do that because of the artwork received being too large. Do you think that matters in my case? If it does, how?

 

[North Bronson]

@North Bronson
Yes, I have tried that with no success.

It is actually a property on the navigation item, not the navigation bar. Sorry about that. You also have to set the property on the parent controller. If you are viewing the child controller, the back button that is showing is actually a property of the navigation item of the parent controller. Is that not working?

 

[dejo]

@dejo
I do that because of the artwork received being too large. Do you think that matters in my case? If it does, how?

No, based on that additional info, I don't believe it matters. I was suspecting that the button was not clipping its subviews and, therefore, only half the button was actionable really, but I'm thinking that's probably not the case now. But I would suggest cropping the artwork to the needed size to make the code less confusing down the road.

 

[Soulstorm]

Thank you for your answers.

It is actually a property on the navigation item, not the navigation bar. Sorry about that. You also have to set the property on the parent controller. If you are viewing the child controller, the back button that is showing is actually a property of the navigation item of the parent controller. Is that not working?

Actually, I tried this for creating the button

+ (UIBarButtonItem *)createBackBarButtonItem
{
	UIImage* buttonImage = [UIImage imageNamed: @"header.navigation.back.png"];
	UIImageView *imageView = [[UIImageView alloc] initWithImage:buttonImage];
	
	imageView.frame = CGRectMake(0, 0, 32, 32);
	UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithCustomView:imageView];
	
	[imageView release];
	return [backItem autorelease];
}

and this:

+ (UIBarButtonItem *)createBackBarButtonItem
{
	UIImage* buttonImage = [UIImage imageNamed: @"header.navigation.back.png"];
	UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithImage:buttonImage style:UIBarButtonItemStyleBordered target:nil action:nil];
	return [backItem autorelease];
}

And I create the buttons like this in the view controller's viewDidLoad:

UIViewController *parentViewController = [self.navigationController.viewControllers objectAtIndex:(self.navigationController.viewControllers.count -2)];
parentViewController.navigationItem.backBarButtonItem = [SFUtils createBackBarButtonItem];

The first way does not even display the button. The second one, displays the image all right, but it embeds it into the back button item's border (you know, the arrow-like border)! I want just the image to be displayed, without border. Any suggestions?