StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You will need to provide a <strong>stretchable image</strong> for the button, so it knows how to display it correctly:</p> <pre><code>UIImage *buttonImage = [[UIImage imageNamed:@"backButtonImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 6)] </code></pre> <p>You don't need to do anything special to the image itself, but you do need to specify appropriate <strong>edge insets</strong> for the resizable image to indicate the area around the edges of the image that should not be stretched, as shown above (the example shows an inset of 15 pixels from the left and 6 from the right). This area should cover the arrow head, and the curved right edge, so that the middle area can be stretched out as needed. <a href="http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/Reference/Reference.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets%3a" rel="nofollow">Read the documentation</a> for more information on this method.</p> <p><strong>UPDATE:</strong> By default, the resizable area of the image will be tiled to the new size, however if you want to have it stretch instead, you can use <code>resizableImageWithCapInsets:resizingMode:</code> and pass <code>UIImageResizingModeStretch</code> to achieve that behaviour. For your case obviously tiling is better as it preserves the stitching, but for some background images stretching is a better solution. Just putting this here to help anyone who sees this in the future.</p> <p>Once you have the stretchable image, you can change the appearance your back button using this code:</p> <pre><code>[myBackButtonItem setBackButtonBackgroundImage:buttonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; </code></pre> <p>Alternatively, you can set this custom appearance for <strong>all</strong> back buttons in your app using this code:</p> <pre><code>[[UIBarButtonItem appearance] setBackButtonBackgroundImage:buttonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; </code></pre> <p>Run this when your app launches, and it will affect all back buttons in your app.</p> <p>Note that, contrary to what some of the other answers suggest, <strong>you will not need to manually create any back buttons</strong>. If you create a <code>UINavigationController</code> and use it in the recommended way (read about that <a href="http://developer.apple.com/library/ios/#documentation/uikit/reference/UINavigationController_Class/Reference/Reference.html" rel="nofollow">in the documentation</a>, a navigation bar and back button <strong>will be created for you</strong> as you push view controllers using <code>pushViewController:animated:</code>. If you use the global <code>UIAppearance</code> code snippet to apply the custom button style, it will automatically be applied to all the back buttons that you have.</p> <p>You can read more about <code>setBackButtonBackgroundImage:forState:barMetrics:</code> <a href="http://developer.apple.com/library/ios/documentation/uikit/reference/UIBarButtonItem_Class/Reference/Reference.html#//apple_ref/occ/instm/UIBarButtonItem/setBackButtonBackgroundImage%3aforState%3abarMetrics%3a" rel="nofollow">in the official documentation</a>.</p> <p>There are also numerous tutorials available online for a more in-depth explanation of how this works and how to do it, here are a few good ones:</p> <ul> <li><a href="http://useyourloaf.com/blog/2012/08/24/using-appearance-proxy-to-style-apps.html" rel="nofollow">http://useyourloaf.com/blog/2012/08/24/using-appearance-proxy-to-style-apps.html</a></li> <li><a href="http://nshipster.com/uiappearance/" rel="nofollow">http://nshipster.com/uiappearance/</a></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload