Couldn't UIToolBar be transparent?

Question

I try the following code, but it doesn't work.

[helloToolbar setBackgroundColor:[UIColor clearColor]];

Answer 1

To make a completely transparent toolbar, use the method described here. In a nutshell, create a new TransparentToolbar class that inherits from UIToolbar, and use that in place of UIToolbar.

TransarentToolbar.h

@interface TransparentToolbar : UIToolbar
@end

TransarentToolbar.m

@implementation TransparentToolbar

// Override draw rect to avoid
// background coloring
- (void)drawRect:(CGRect)rect {
    // do nothing in here
}

// Set properties to make background
// translucent.
- (void) applyTranslucentBackground
{
    self.backgroundColor = [UIColor clearColor];
    self.opaque = NO;
    self.translucent = YES;
}

// Override init.
- (id) init
{
    self = [super init];
    [self applyTranslucentBackground];
    return self;
}

// Override initWithFrame.
- (id) initWithFrame:(CGRect) frame
{
    self = [super initWithFrame:frame];
    [self applyTranslucentBackground];
    return self;
}

@end

(code from the blog post linked above)

Answer 2

In iOS 5, simply call setBackgroundImage and pass a transparent image.

Here's how I do it (I dynamically generate transparent image):

CGRect rect = CGRectMake(0, 0, 1, 1);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [[UIColor clearColor] CGColor]);
CGContextFillRect(context, rect);
UIImage *transparentImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

[toolbar setBackgroundImage:transparentImage forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];

Answer 3

Transparent (iOS 5.0):

[toolbar setBackgroundImage:[[UIImage alloc] init] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];

Translucent:

[toolbar setBarStyle:UIBarStyleBlack];
[toolbar setTranslucent:YES];

Answer 4

The best you can do is using

[helloToolbar setBarStyle:UIBarStyleBlack];
[helloToolbar setTranslucent:YES];

This will get you a black but translucent toolbar.

Answer 5

A cumulative solution for all devices, from oldest iOS 3.0 (iPhone 1) to newest iOS 6.1 (iPad mini).

@implementation UIToolbar (Extension)

- (void)drawRect:(CGRect)rect
{
    if (CGColorGetAlpha(self.backgroundColor.CGColor) > 0.f)
    {
        [super drawRect:rect];
    }
}

- (void)setTransparent
{
    //iOS3+
    self.backgroundColor = [UIColor clearColor];

    //iOS5+
    if ([self respondsToSelector:@selector(setBackgroundImage:forToolbarPosition:barMetrics:)])
    {
        [self setBackgroundImage:[[UIImage new] autorelease] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
    }
    //iOS6+
    if ([self respondsToSelector:@selector(setShadowImage:forToolbarPosition:)])
    {
        [self setShadowImage:[[UIImage new] autorelease] forToolbarPosition:UIToolbarPositionAny];
    }
}

@end

When you want a transparent toolbar, call setTransparent on it. When you want a non-transparent toolbar, set a backgroundColor of your choice or add an imageView by yourself.

Answer 6

Another solution would be to define a category for UIToolbar:

@implementation UIToolbar(Transparent) 
-(void)drawRect:(CGRect)rect {
    // do nothing in here
}
@end

In the IB set the toolbar as Black Translucent and non opaque.

Answer 7

We've just noticed that overriding drawRect doesn't work anymore with iOS 4.3. It's not called anymore (edit: seems to be only in Simulator). Instead drawLayer:inContext: is called.

A great solution was posted here

Now you can set each UIToolbar object transparent, by setting its tintColor to [UIColor clearColor] :)

Answer 8

With iOS 5 the following works:

UIToolbar *bar = [[UIToolbar alloc] initWithFrame:CGRectZero];
if (bar.subviews.count > 0)
     [[[bar subviews] objectAtIndex:0] removeFromSuperview];

This is because the background is now a subview. This code is safe even with new iterations of iOS, but it may stop working. This is not private API usage, your app is safe to submit to the store.

Make sure you remove the backgroundView before adding any UIBarButtonItems to the bar. Or my code will not work.

Answer 9

This works in iOS5.1 with pretty minimal effort. I am matching up the size, as only the background will have the same frame size as the toolbar itself. You could use other criteria, of course.

Enjoy.

Create a subclass of UIToolbar as follows:

.h:

#import <UIKit/UIKit.h>

@interface UIClearToolbar : UIToolbar

@end

.m:

#import "UIClearToolbar.h"

@implementation UIClearToolbar

- (void)layoutSubviews {
    // super has already laid out the subviews before this call is made.
    [self.subviews enumerateObjectsUsingBlock:^(UIView* obj, NSUInteger idx, BOOL *stop) {
        if (CGSizeEqualToSize(self.frame.size, obj.frame.size) ||
        self.frame.size.width <= obj.frame.size.width) {  // on device, the background is BIGGER than the toolbar.) {
            [obj removeFromSuperview];
            *stop = YES;
        }
    }];
}

@end

Answer 10

I just tested the following with iOS 4.3 on simulator and phone, seems to work fine. Subclass UIToolbar, provide one method:

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

Answer 11

toolbar.barStyle = UIBarStyleBlackTranslucent;

Answer 12

Thanks @morais for your solution - here's the code translated to MonoTouch:

  public class TransparentToolbar : UIToolbar
  {
    public TransparentToolbar()
    {
      init();
    }

    public TransparentToolbar(RectangleF frame) : base(frame)
    {
      init();
    }

    void init()
    {
      BackgroundColor=UIColor.Clear;
      Opaque=false;
      Translucent=true;
    }

    public override void Draw(RectangleF rect)
    {
    }
  }