Search code examples
backgrounduitabbartransparent

UITabbar with partially transparent background

Long time reader, first time poster. Please be gentle :P

I'm working on an app and have a background image for a UITabbar element that is transparent for a few pixels at the top. I have searched far and wide, tried many solutions suggested that I could find (setting tint, background color to clearColor, setting alpha to 0.2, etc) but I continue to see a black line where the tabbar should be transparent. I am setting the background as follows (see the lines commented out for some more things I have tried which did not work)

//[[UITabBar appearance] setBackgroundColor:[UIColor clearColor]];
//[self.view setBackgroundColor:[UIColor clearColor]];
//[super.view setBackgroundColor:[UIColor clearColor]];
//UITabBar.super.setBackgroundColor:[UIColor clearColor]];
[[UITabBar appearance] setBackgroundColor:[[UIColor alloc] initWithRed:0 green:0 blue:0 alpha:0.2]];
//[[UITabBar appearance] setTintColor:[UIColor blackColor]];
[[UITabBar appearance] setTintColor:[[UIColor alloc] initWithRed:0 green:0 blue:0 alpha:0.1]];
//[[UITabBar appearance] setAlpha:0.0];// setTintColor:[UIColor magentaColor]];
[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tabbar.png"]];

Screenshot can be fount at https://i.sstatic.net/9BlDS.png

  • The app uses a tabbarcontroller.
  • When I set the background color to white or any other color, the black line changes color successfully but as soon as I set the color to clearColor the black line comes back.
  • When I hide the entire tab bar there is nothing crazy behind it and I can successfully see the cream background as I should.
  • The image is a png with a transparent top where the black line appears as mentioned earlier.

Does anyone have any suggestions on what I could be doing wrong?

Help will be truly appreciated.

Edit: I am using iOS 5.0 and don't care about supporting previous iOS versions (in case that opens up any additional potential choices).

Solution

  • I decided to go with a "hack-ish" solution I came across elsewhere.

    I'm using the same color as the background in areas of the tab bar's background image to create the illusion of transparency. Not really transparent but that's the best I could come up with after countless hours spent on this.

    Maybe that'll be a solution that works for someone else in a similar position in the future as well.