36
votes

Compare the two screenshots:

Done on iOS 7.0 simulator

enter image description here

And the one done on iOS 7.0.3 iPhone 4S:

enter image description here

Same code here and there and same stuff! Any idea why the translucency is gone on the real device?

I have this code to simulate it (I know it's probably awkward and not right but that's how it is):

topMenuView = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.origin.x, 0, self.view.frame.size.width, TOP_BAR_ORIG_HEIGHT)];
topMenuView.clipsToBounds = YES;
UIToolbar *topMenuViewBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, -4, self.view.frame.size.width, TOP_BAR_ORIG_HEIGHT + 4)];
topMenuViewBar.barStyle = UIBarStyleDefault;
topMenuViewBar.barTintColor = [BSFunctions getColorFromHex:@"1ea6ff"];
const CGFloat statusBarHeight = 20;

UIView *underlayView = [[UIView alloc] initWithFrame:CGRectMake(0, -statusBarHeight, topMenuViewBar.frame.size.width, topMenuViewBar.frame.size.height + statusBarHeight)];
[underlayView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
[underlayView setBackgroundColor:[BSFunctions getColorFromHex:@"1ea6ff"]];
[underlayView setAlpha:0.36f];
[topMenuViewBar insertSubview:underlayView atIndex:1];
UIView *underlayView2 = [[UIView alloc] initWithFrame:CGRectMake(0, -statusBarHeight, topMenuViewBar.frame.size.width, topMenuViewBar.frame.size.height + statusBarHeight)];
[underlayView2 setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
[underlayView2 setBackgroundColor:[BSFunctions getColorFromHex:@"0291ff"]];
[underlayView2 setAlpha:0.36f];
[topMenuViewBar insertSubview:underlayView2 atIndex:2];
[topMenuView addSubview:topMenuViewBar];
[self.view addSubview:topMenuView];

The main point is it used to work before on the device! But after iOS 7.0.3 came out it changed. I'm noticing the same behavior in Facebook and Fitocracy iOS apps.

UPDATE

On Xcode 5.0.1 with iOS 7.0.3 simulator we have this (which is different from the first image on iOS 7.0 simulator as you can see):

enter image description here

1
Have you turned off the motion and stuff in accessibility in your iPhone? - Fogmeister
As Fogmeister suggested, check settings for Accessibility > Increase Contrast, which reduces translucency. - Basil Bourque
@Fogmeister No, no changes whatsoever were made. And I think there's no such option on the simulator. - Sergey Grischyov
I don't know to be honest. There's a thread in the apple dev forums, and someone has filed a radar to find out more. Worth keeping an eye on it devforums.apple.com/thread/210495?tstart=0 - Mutix
My app just got approved and is pending developer release, but it looks quite ugly with the wrong nav and tab bar colors without the blur and the app store screenshots don't represent what it now looks like. I don't know if I wait to hear more info to release it or if I pull it completely and submit another version with solid colored bars and no transparency. There isn't anything in the release notes or changelog either regarding this. Pretty annoyed right now! - Mutix

1 Answers

17
votes

OK, so after having played around with the colours a bit more, I managed to get a similar sort of appearance with the blur!

Previously, I was setting a barTintColor on the navigation bar appearance which had the following values:

R:17 G:63 B:95 A:1

This was fine in iOS < 7.0.3, and the output color in the nav bar (with the blur effect) was actually:

R:62 G:89 B:109

Since iOS 7.0.3, the barTintColor seems to take into account the alpha value of the color we set. This meant that the nav bar was actually outputting a solid color 17,63,95, and there was no blur effect.

The key to getting the blur effect back is setting an alpha < 1 in the barTintColor.

After lots of guess work and trying different RGB values, I managed to get the exact same RGB output from the nav (and tab) bar, using the following RGBA:

R:4.5 G:61.6 B:98 A:0.65

It does not look like there's a magic ratio to apply to the previous color to obtain the new one.

Anyway I've actually rejected the binary that got approved this afternoon, and have re-submitted with these new values so that user's don't get an ugly app :)

Hope this helps.