7

enter image description here

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.

Daniel Zhang
  • 5,778
  • 2
  • 23
  • 28
  • refere: http://www.todaysiphone.com/2014/03/switch-button-shapes-ios-7-1/ – Preetam Jadakar Mar 13 '14 at 09:17
  • refere: http://stackoverflow.com/questions/22345046/customize-button-shape-in-ios-7-1/22345348#22345348 – Preetam Jadakar Mar 13 '14 at 09:18
  • Lucky you, your button color just changes .. my navigation bar buttons got completely invisible after turning on the shapes. – MrJ Mar 13 '14 at 12:22
  • That's also strange behavior, MrJ. It's appearing that nothing can be done about these button shapes at this time. – Daniel Zhang Mar 14 '14 at 09:12
  • This is happening in my app as well -- I suspect that it is a bug in iOS 7.1 (my UIBarButtonItems are created programmatically.) – iPhoneDollaraire Mar 18 '14 at 20:31
  • I was able to fix my "hidden" buttons (white on white) by calling `[[UINavigationBar appearance] setBarStyle:UIBarStyleDefault];` in the AppDelegate. – MrJ Mar 25 '14 at 14:13
  • Has anybody figured out a way to customize the button shapes? I've been banging my head against the wall trying to find some sort of solution. I have some cases in my app where the button shape doesn't appear, even though the setting is turned on. – The Guardian Apr 14 '14 at 17:03

3 Answers3

4

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:

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

In landscape it gets messed up:

enter image description here

And it then stays that way:

enter image description here

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?

Johannes Fahrenkrug
  • 42,912
  • 19
  • 126
  • 165
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.

jjrscott
  • 1,386
  • 12
  • 16
  • Interesting. Based on this I noticed that if you go to Settings > General > Accessibility and then turn on "Reduce Transparency" - all of the issues with button shapes go away in my app. Not really a fix, but at least it's something I can tell people to try if they need to use button shapes. (I tried setting navbars/toolbars to not be translucent in the app but it caused some layout issues... though I may still explore that option.) – Jim Rhoades Nov 05 '14 at 16:52
1

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];
Charles A.
  • 10,685
  • 1
  • 42
  • 39
  • Setting `barStyle` to `UIBarStyleBlack` solved this problem for me too. I used a very dark background image instead of setting the `barTintColor`. Setting the style allows me to continue to use the dark image. – orkoden Oct 28 '15 at 10:48