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

Question

From dox :

• If you want to use a custom image to replace the standard chevron, you also need to create a custom mask image. iOS 7 uses a mask to make the previous screen title appear from or disappear into the chevron during navigation transitions. To learn about properties that control the back button and mask an image, see the UINavigationBar class reference.

In the UINavigationBar Class Reference:

backIndicatorImage

The image is shown next to the back button. @property (non-atomic, preserving) UIImage * backIndicatorImage Discussion

If you want to set up a reverse indicator, you must also set backIndicatorTransitionMaskImage. Availability

Available in iOS 7.0 and later. 

see also

  @property backIndicatorTransitionMaskImage 

Announced at UINavigationBar.h backIndicatorTransitionMaskImage

The image is used as a mask for the content during the push and pop transitions. @property (non-atomic, preserving) UIImage * backIndicatorTransitionMaskImage Discussion

If you want to set up a reverse indicator, you must also set backIndicatorImage. Availability

 Available in iOS 7.0 and later. 

see also

  @property backIndicatorImage 

Announced at UINavigationBar.h

Sorry for my ignorance, but the information provided does not tell me much.

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

Answer 1

I think this is what you are looking for

 self.navigationController.navigationBar.backIndicatorImage = [UIImage yourImage]; self.navigationController.navigationBar.backIndicatorTransitionMaskImage = [UIImage yourImage]; 

Answer 2

backIndicatorTransitionMaskImage - visibility mask.

In the mask image:

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

So, if you want to provide the same visibility behavior as on the built-in recording indicator, you can use images (utf-8 characters) similar to the ones below:

• Indicator reverse image: 〱
• Mask of the rear indicator: ◀ (only the text under the black part will be visible)

Answer 3

this is what i did and works great

 UIButton *backButton = [[UIButton alloc] initWithFrame:CGRectMake( 0, 0, 40, 40)]; [backButton setBackgroundImage:[UIImage imageNamed:@"backbutton.png"] forState:UIControlStateNormal]; UIBarButtonItem *barBackButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton]; [backButton addTarget:self action:@selector(popViewController) forControlEvents:UIControlEventTouchUpInside]; self.navigationItem.leftBarButtonItem = barBackButtonItem; self.navigationItem.hidesBackButton = YES; 

and "popViewController" is as follows:

 -(void)popViewController{ [self.navigationController popViewControllerAnimated:YES]; 

}