iPhone : making UIBarButtonItem that is arrow shap

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!

Answer 1

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".

Answer 2

continuing on @Plamen Dragozov's idea: i noticed if you leave the uibutton as is, it would trigger a picture adjustment when touched and that is quite the opposite what a normal navigation back button does. So what I did was to uncheck "highlighted adjusts Image" and it works like a charm.

hope this helps newbies like me.

Answer 3

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

[[UIBarButtonItem alloc] initWithCustomView: arrowButton];

Hope this helps.

Answer 4

More elegant solution:

UIBarButtonItem * backButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Title" style:UIBarButtonItemStylePlain target:self action:@selector(back:)];
[backButtonItem setBackgroundImage:[UIImage imageNamed:@"back.png"]      forState:UIControlStateNormal     barMetrics:UIBarMetricsDefault];
self.navigationItem.leftBarButtonItem = backButtonItem;

Answer 5

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

Answer 6

My problem was renaming the back button that appears on the pushed view controller. I found a dirty workaround and if you ignore the non-ideal animation problem, you'll get a back button with the title you want.

The trick is to change the title of the first VC in viewWillDisappear and re-set it of course in viewWillAppear

(Needless to say, by default, if there is no leftBarButtonItem set, UINavigationController will show a back button with the title of the VC that pushed the current VC)

In the VC where you push your current VC, do

-(void) viewWillDisappear:(BOOL) animated {
  [super viewWillDisappear:animated];
  self.title = @"Back";
}

-(void) viewWillAppear:(BOOL) animated {
  [super viewWillAppear:animated];
  self.title = @"Original Title";
}