Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bar translucency gone in iOS 7.0.3

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

like image 659
Sergey Grischyov Avatar asked Oct 23 '13 06:10

Sergey Grischyov


1 Answers

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.

like image 163
Mutix Avatar answered Oct 13 '22 08:10

Mutix