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

Question

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:

Cowfish

Answer 1

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.

Mancy

Answer 2

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

• iOS 7.0

  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];
  

• iOS 8.0 or latter

  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)

Claytor