How to create a custom mask image for back buttons in iOS7

Question

From the dox:

• If you want to use a custom image to replace the default chevron, you also need to create a custom mask image. iOS 7 uses the mask to make the previous screen’s title appear to emerge from—or disappear into—the chevron during navigation transitions. To learn about the properties that control the Back button and mask image, see UINavigationBar Class Reference.

In UINavigationBar Class Reference:

backIndicatorImage

The image shown beside the back button. @property(nonatomic, retain) UIImage *backIndicatorImage Discussion

If you want to customize the back indicator image, you must also set backIndicatorTransitionMaskImage. Availability

Available in iOS 7.0 and later.

See Also

  @property backIndicatorTransitionMaskImage

Declared In UINavigationBar.h backIndicatorTransitionMaskImage

The image used as a mask for content during push and pop transitions. @property(nonatomic, retain) UIImage *backIndicatorTransitionMaskImage Discussion

If you want to customize the back indicator image, you must also set backIndicatorImage. Availability

Available in iOS 7.0 and later.

See Also

  @property backIndicatorImage

Declared In UINavigationBar.h

Excuse my ignorance, but the information provided does not tell me much at all.

Is there a Cocoa class that will make a mask with the desired image? Or do I need to provide the frame, arcs, and such? Or do I just make a black outline of my image in an editor?

Answer 1

The backIndicatorTransitionMaskImage is the visibility mask.

In the mask image:

• the pixels with the alpha = 0 will be covering the moving title during navigation transitions;
• the pixels with the alpha = 1 will be transparent for the moving title during navigation transitions.

So if you want to provide the same visibility behavior as in the native back indicator, you can use the images (utf-8 signs) similar to those below:

1. Back indicator image:〱
2. Back indicator mask: ◀ (only the text under the black part will be visible)