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.

Answer 3

I just ran into an issue similar to one described in the comments of one of the answers here while using a barTint color fairly close to black. My button shape backgrounds were nearly the same color as the barTint on a few of my UINavigationBar instances, rendering them almost impossible to see (especially when the buttons were not enabled). I tracked down the difference in these instances to be the value of the UINavigationBar instances barStyle property.

With barStyle set to UIBarStyleDefault, the button shapes would show up with a background color. With barStyle set to UIBarStyleBlack, the buttons shapes would show up with a light color. You can also notice this in the storyboard, as the title shown in the navigation bar will be black with the default style and white with the black style.

You can change each navigation bar's style in your storyboard/NIB, or alternatively you can add the following line of code where you setup your appearance proxies (typically in application:didFinishLaunchingWithOptions:):

[[UINavigationBar appearance] setBarStyle:UIBarStyleBlack];