iPhone : making UIBarButtonItem that is arrow shaped

Question

I have a UIBarButtonItem on a navigation bar. I'd like to make it arrow shaped. By that I mean I want it to be square except for a pointy side. Does anyone know how to do this?

Thanks!

Solution 1

I wrestled with several approaches on this one and finally figured it out using all the answers from several sources. There are a couple of tricks; this snippet will show it all (I was creating a custom rightNavButton, but you can adapt this easily for any UIBarButtonItem):

// Produces a nice "right arrow" style button that mirrors the back arrow
// automatically added by the navController
//
UIImage *buttonImage = [UIImage imageNamed:@"forwardButton.png"];
UIButton *forwardButton = [UIButton buttonWithType:UIButtonTypeCustom];
[forwardButton setBackgroundImage:buttonImage forState:UIControlStateNormal];
[forwardButton setTitle:@"Meter" forState:UIControlStateNormal];
forwardButton.font = [UIFont boldSystemFontOfSize:12];
forwardButton.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
[forwardButton addTarget:self action:@selector(showMeter) 
           forControlEvents:UIControlEventTouchUpInside];

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] 
           initWithCustomView:forwardButton];

Note: it turns out that if you try to set the target and action directly on the button item after assigning a custom view using a UIButton that it won't take - you have to set the target and action on the button itself - apparently the navBar uses the button provided verbatim.

This is the image I was using on the opaque black navBar (you can use anything, obviously): http://raretiger.com/images/forwardbutton.png

Solution 2

Make a custom background. See Creating a left-arrow button (like UINavigationBar's "back" style) on a UIToolbar for how.

---

You may -pushNavigationItem:animated: to make the built-in back button appear, although you cannot assign custom actions to it.

---

For undocumented methods, you may use

UIButton* backButton = [UIButton buttonWithType:101];

to create a back "button".

Solution 3

You could create an UIImageView or an UIButton with the required image then use:

[[UIBarButtonItem alloc] initWithCustomView: arrowButton];

Hope this helps.