UINavigationBar back button with pattern image

Question

I need to create a navBar back button in accordance to the designer's plan. The back button has a pattern image and stitched leather on the perimeter.

Here it is:

My question is it possible to create this without a great amount of hassle and headache? Or if it's possible at all, since the back button has varying width?

Thanks!

UPDATE

Alright, with the help of PartiallyFinite turns out this is very easy. If you set the UIEdgeInsets correctly it will keep the left side fixed, the right side fixed, and then duplicate the middle of the image considering the back button's width.

This is the image I used for my back Button:

And these are my inset settings. You can try them yourself:

backButtonImage = [backButtonImage resizableImageWithCapInsets:UIEdgeInsetsMake(5, 17, 5, 12)];

Hope this helps someone in the future.

Answer 1

You will need to provide a stretchable image for the button, so it knows how to display it correctly:

UIImage *buttonImage = [[UIImage imageNamed:@"backButtonImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 6)]

You don't need to do anything special to the image itself, but you do need to specify appropriate edge insets 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. Read the documentation for more information on this method.

UPDATE: 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 resizableImageWithCapInsets:resizingMode: and pass UIImageResizingModeStretch 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.

Once you have the stretchable image, you can change the appearance your back button using this code:

[myBackButtonItem setBackButtonBackgroundImage:buttonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Alternatively, you can set this custom appearance for all back buttons in your app using this code:

[[UIBarButtonItem appearance] setBackButtonBackgroundImage:buttonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Run this when your app launches, and it will affect all back buttons in your app.

Note that, contrary to what some of the other answers suggest, you will not need to manually create any back buttons. If you create a UINavigationController and use it in the recommended way (read about that in the documentation, a navigation bar and back button will be created for you as you push view controllers using pushViewController:animated:. If you use the global UIAppearance code snippet to apply the custom button style, it will automatically be applied to all the back buttons that you have.

You can read more about setBackButtonBackgroundImage:forState:barMetrics: in the official documentation.

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:

• http://useyourloaf.com/blog/2012/08/24/using-appearance-proxy-to-style-apps.html
• http://nshipster.com/uiappearance/