UIToolBar with reduced alpha, want UIBarButtonItem to have alpha 1

Question

I have a UIToolbar with the alpha set to .6. Looks great - but it leaves the buttons with an alpha of .6 as well, which is okay but not really desirable. Is there some way to independently set the alpha of a UIBarButtonItem? How would I get these to look white instead of slightly grayed out?

Dyann

Answer 1

When you set the alpha on a view, all subviews are composited with that same alpha value. What you can do instead of setting the alpha on the view itself is use a tint color or background color with an alpha value. This can produce similar effects, without causing all subviews to inherit the transparency.

toolbar.tintColor = [[UIColor blackColor] colorWithAlphaComponent:0.6];

If this doesn't work and you actually need to make the view itself transparent, you will have to rework your view hierarchy so that the opaque views are not subviews. Since bar button items aren't available as standard views, its probably not going to be workable in the toolbar case.

Pretermit

self.bottomToolbar.barStyle = UIBarStyleBlack; self.bottomToolbar.translucent = YES; self.bottomToolbar.backgroundColor = [UIColor clearColor]; – Dyann

Answer 2

self.bottomToolbar.barStyle = UIBarStyleBlack;
self.bottomToolbar.translucent = YES;
self.bottomToolbar.backgroundColor = [UIColor clearColor];

View opacity set to 1 and these settings did it for me.

Dyann

You can also set this in InterfaceBuilder/Storyboard (Style "Translucent Black") – Pol

Answer 3

Above did not work for me in iOS 4.3, but this did:

Subclass UIToolbar, provide one method:

- (void)drawRect:(CGRect)rect 
{
[[UIColor colorWithWhite:0 alpha:0.6f] set]; // or clearColor etc
CGContextFillRect(UIGraphicsGetCurrentContext(), rect);
}

Savoirfaire

Answer 4

I've found that barStyle does'n actually matter. Neither is setting background color to clear.

self.toolbar.barStyle = UIBarStyleDefault;
self.toolbar.tintColor = [UIColor colorWithWhite:0.0 alpha:0.5];
self.toolbar.translucent = YES;

Those lines done the job for me(ios4.3). As I can understand, setting toolbars transfluent property to YES you've setting it to be with clear(transparent) background. Of course it depends on tint color you've set. If it doesn't contain alpha component the bar will be opaque.

Radioluminescence

Answer 5

The main issue with controlling the alpha value of the toolbar is that it applies to the entire toolbar and its buttons. If you set a backgroundColor with some alpha value < 1, the resulting colour is combined with the barStyle (UIBarStyleDefault or UIBarStyleBlack) which results in a more opaque colour than the original backgroundColor. If you set the barTintColor, it seems to override all other settings, including any alpha value you set, resulting in a completely opaque colour.

The only way I've been able to do reduce the alpha of the toolbar without affecting its buttons is by setting its background image via setBackgroundImage:forToolbarPosition:barMetrics:. You can create a 1px by 1px image with the desired colour and alpha:

+ (UIImage *)onePixelImageWithColor:(UIColor *)color {
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, 1, 1, 8, 0, colorSpace, (CGBitmapInfo)kCGImageAlphaPremultipliedFirst);
    CGContextSetFillColorWithColor(context, color.CGColor);
    CGContextFillRect(context, CGRectMake(0, 0, 1, 1));
    CGImageRef imgRef = CGBitmapContextCreateImage(context);
    UIImage *image = [UIImage imageWithCGImage:imgRef];
    CGImageRelease(imgRef);
    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);
    return image;
}

[Swift version]

Then set the background Image:

[toolbar setBackgroundImage:[self onePixelImageWithColor:[[UIColor blackColor] colorWithAlphaComponent:0.7]]
         forToolbarPosition:UIBarPositionBottom
                 barMetrics:UIBarMetricsDefault];

Sylvanite

Answer 6

After many hours evaluating each methods above, I found only the method provided by Ryan H. is feasible. It is because this is the method you can manipulate the alpha value while others cannot.

Here is the version for Swift 3:

override func viewDidLoad() {
    super.viewDidLoad()

    let bgImageColor = UIColor.black.withAlphaComponent(0.6) //you can adjust the alpha value here
    self.upperToolBar.setBackgroundImage(onePixelImageWithColor(color: bgImageColor),
          forToolbarPosition: .any,
          barMetrics: UIBarMetrics.default)
}

func onePixelImageWithColor(color : UIColor) -> UIImage {
    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)
    var context = CGContext(data: nil, width: 1, height: 1, bitsPerComponent: 8, bytesPerRow: 0, space: colorSpace, bitmapInfo: bitmapInfo.rawValue)
    context!.setFillColor(color.cgColor)
    context!.fill(CGRect(x:0,y: 0, width: 1, height:1))
    let image = UIImage(cgImage: context!.makeImage()!)
    return image
}

Beaudoin