Change the bar tint color makes the blurry area becomes black and white

I would like to add a blurry effect on my view, and I used a UIToolbar to do that. But when I try to add bar tint color on the UIToolbar , something weird happens.

Here is the code I used to add UIToolbar , very basic, nothing fancy:

 UIToolbar *toolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, self.blurView.frame.size.width, self.blurView.frame.size.height)];
[self.blurView addSubview:toolbar];

Before I add the barTintColor , everything looks good:

But after I add bar tint color:

[toolbar setBarTintColor:[UIColor colorWithWhite:0.000 alpha:0.500]];

Everything under the toolbar becomes black and white:

At first I thought something wrong with the color or the transparency, I've been playing with different color and different transparency. As long as I use setBarTintColor , it all becomes black and white like that. For example, a random bluish green:

It looks to be an issue with UIToolbar.

Instead of setting the tint color, you can add a CALayer with a background color with an alpha component less than one, depending on how prominent you want your color to be, like so:

    CALayer *extraColorLayer = [CALayer layer];
    extraColorLayer.frame = CGRectMake(0, 0, toolbar.frame.size.width, toolbar.frame.size.height);
    extraColorLayer.backgroundColor = [UIColor colorWithRed:r/255 green:g/255 blue:b/255 alpha:0.5].CGColor;
    [toolbar.layer addSublayer:extraColorLayer];

This appears to create the effect you're looking for.

Adapted from this answer.

I think it's better this case for black and white cases:

UIToolbar* toolbar = [[UIToolbar alloc] initWithFrame:self.blurView.bounds];
if (isBlack)
    toolbar.barStyle = UIBarStyleBlackTranslucent;
else
    toolbar.barStyle = UIBarStyleDefault;
toolbar.autoresizingMask = self.blurView.autoresizingMask;
[self.blurView insertSubview:blurEffect atIndex:0];

UIBlurEffect *effect;
if (isBlack)
    effect =[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
else
    effect =[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *blurEffect = [[UIVisualEffectView alloc] initWithEffect:effect];
[self.blurView insertSubview:blurEffect atIndex:0];

You can create a class inherted of UIView and associate to the view that you need blur on Storyboard (on Custom Class)

上一篇: CSS仅针对Opera Mini

下一篇: 更改条形色彩使模糊区域变成黑色和白色