How to influence the appearance of button buttons in accessibility settings in iOS 7.1?

Question

The release of iOS 7.1 provides Button Shapes accessibility in accessibility settings. I noticed that their appearance may be inconsistent in my application. Basically, I get a black background after implementing UIBarButtonItem using Interface Builder. When a button is pressed, but not fully pressed, the image becomes gray. How can you influence the appearance of button shapes so that they do not look so inappropriate that they have a solid black background and look more like a 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 bit buggy in iOS 7.1. The setting that most affects the look is actually barTintColor on your UINavigationBar .

Some examples:

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

When I first start, the back button looks fine:

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

And then it stays too dark when I return to the portrait:

The same thing happens when I use [UIColor orangeColor] as barTintColor . Everything is fine at first:

In the landscape, he messed up:

And then he remains like this:

Thus, this clearly looks like a bug in iOS 7.1. One thing you can do is set the background image for the back button. This background will then display whether the Button Shapes button 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 background image of the button when the "Button Shapes" is turned on in a way that is independent of barTintColor ?

Answer 2

-[UINavigationBar setTranslucent:NO] seems to fix this. I don’t know why, but it is.

Alas, we could not set -[UINavigationBar setTranslucent:] using UIAppearance , so I had to sprinkle it around the application.

Answer 3

I ran into a problem similar to the one described in the comments on one of the answers here when using the barTint color close enough to black. My button button backgrounds were almost the same color as barTint on several of my instances of the UINavigationBar , which was almost impossible to see (especially when the buttons were not turned on). I found the difference in these instances as the value of the UINavigationBar property of barStyle instances.

If barStyle set to UIBarStyleDefault , button shapes will be displayed with a background color. If barStyle set to UIBarStyleBlack , the button shapes will be displayed 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 black.

You can change each style of navigation bar in your storyboard / NIB or, alternatively, you can add the following line of code in which you configure your external proxies (usually in application:didFinishLaunchingWithOptions: :

 [[UINavigationBar appearance] setBarStyle:UIBarStyleBlack];