How can the appearance of Button Shapes enabled through the Accessibility settings be influenced in iOS 7.1?

Question

The release of iOS 7.1 brings the availability of Button Shapes under the Accessibility settings. I've noticed that their appearance can be inconsistent within my app. Mostly, I'm getting a black background after having implemented a UIBarButtonItem using Interface Builder. Touching the button but not fully tapping it results in the image turning gray. How can the appearance of the button shapes be influenced so that they will not look so out of place as having a solid black background and more like the gray background as shown in the attached image? In this case I do not want to use a custom control.

Answer 1

This feature seems to be a little buggy in iOS 7.1. The setting that seems to influence the appearance the most is actually the barTintColor on your UINavigationBar.

Some examples:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [[UINavigationBar appearance] setBarTintColor:[UIColor lightGrayColor]];

    return YES;
}

When I first launch, the back button looks fine:

Then when I go to landscape, it looks way too dark:

And it then stays too dark when I go back to portrait:

The same thing happens when I use [UIColor orangeColor] as the barTintColor. First it`s fine:

In landscape it gets messed up:

And it then stays that way:

So it clearly looks like a bug in iOS 7.1. One thing that can be done is to set a background image for the back button. This background will then display whether "Button Shapes" is activated or not. Example:

UIImage *backButtonImage = [[UIImage imageNamed:@"back_button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0.0f, 17.0f, 0.0f, 1.0f) resizingMode:UIImageResizingModeStretch];

[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];

[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsLandscapePhone];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateHighlighted barMetrics:UIBarMetricsLandscapePhone];

So the big question is: Can we set the button background image when "Button Shapes" is turned on in a way that is independent of the barTintColor?

Answer 2

-[UINavigationBar setTranslucent:NO] seems to correct this. I don't know why, but it does.

Alas, we couldn't set -[UINavigationBar setTranslucent:] using UIAppearance so had to sprinkle it around the app.