title: iOS 5: How to implement a custom (image) back button
body: <p>I've done the tutorial at my blog, so I know how to make a stretchable button that can display the bottom (stack) viewcontroller's title.  But what I was hoping to do is have icons (like a house for HOME) and no text and not resize.</p>
  
  <p>Using my custom image and this code below, I get a stretched version (not wanted) with title over top (not wanted) and it does tint/highlight when clicked (is good);</p>
  
  <pre><code>UIImage *backButtonImage = [UIImage imageNamed:@"backButton_30.png"];
  [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
  </code></pre>
  
  <p><a href="https://imgur.com/U6fth" rel="nofollow noreferrer">screen shot 1</a></p>
  
  <p>Now, I've searched on here and read all the similar questions which return old answers, and have strange results for me. Here is the code I tried;</p>
  
  <pre><code>  UIImage *backButtonImage = [UIImage imageNamed:@"backButton_30.png"];
    UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:backButtonImage style:UIBarButtonItemStyleBordered target:nil action:nil];
    self.navigationItem.backBarButtonItem = backButton;
  </code></pre>
  
  <p>This method doesn't stretch out my custom image button (is good), nor does it show text (what I want) however there is still the original blue button under it (WTF), and my custom button doesn't tint when clicked, only the blue button under it does!</p>
  
  <p><a href="https://imgur.com/7cTpQ" rel="nofollow noreferrer">screen shot 2</a></p>
  
  <p>Please help, what am I missing?</p>
  
  <p>*UPDATE</p>
  
  <p>I've fixed it up a bit by using a resizable image. This forces it not to 'stretch'    </p>
  
  <pre><code>UIImage *backButtonHomeImage = [[UIImage imageNamed:@"backButtonHomeWhite_30.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
  [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonHomeImage  forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
  </code></pre>
  
  <p>To fix the title showing up on the button I had to do </p>
  
  <pre><code>self.title =@" ";
  </code></pre>
  
  <p>Now this is a bit of a dirty fix but it seems to be working.  The only problem left now is that I want a different back button on different views, and this method is causing some trouble; the last view that sets the button over-rides all other views. So in the end, depending on how you navigate through the app, returning to a previous view has the wrong back button and it never resets to the correct one.</p>
  
  <p><br />
  UPDATE 2: POTENTIAL IDEA:</p>
  
  <p>Would the following be a reasonable solution, or is it a hack that is liable to break something? </p>
  
  <p>Hiding the default back button, like so,</p>
  
  <pre><code>[self.navigationItem setHidesBackButton:YES animated:NO];
  </code></pre>
  
  <p>...and then using a custom UIBarButtonItem, with a button in the style I actually want placed in the location of the back button, that sends a <a href="https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UINavigationController_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006934" rel="nofollow noreferrer">popViewControllerAnimated:</a> message to the UINavigationController when tapped.</p>
  
  <p>If you know of a more robust solution please do share, thank you.</p>