StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUIToolbar buttons with UIImage not entirely transparent
text
Body
copied!<p>I've had this code forever, and it used to work, but it started exhibiting an annoying behavior in, I think, iOS 6. There are several similar threads on SO, but I haven't found a solution that I am comfortable with as of yet. I found a work-around (see below), but it doesn't seem like the "right" way to do it.</p> <p><a href="https://stackoverflow.com/questions/14926186/custom-right-bar-button-item-in-ios6-is-not-transparent">Here's a thread with the same issue, but no answers.</a></p> <p>When I use an image as a <code>UIBarButtonItem</code> and put it into a <code>UIToolbar</code>, the containing rectangle of the <code>UIToolbar</code> is not entirely transparent. The PNG images that I use for the <code>UIBarButtonItem</code> are transparent, so that's not the issue. Here is an example:</p> <p><img src="https://i.stack.imgur.com/DSD0o.png" alt="Exhibit 1"></p> <p>When I use text instead of an image as the <code>UIBarButtonItem</code>, transparency is working as expected. As so:</p> <p><img src="https://i.stack.imgur.com/S8W8H.png" alt="Exhibit 2"></p> <p>Here is the code that has worked since forever:</p> <pre><code>NSMutableArray *buttonItems = [[[NSMutableArray alloc] initWithCapacity: 1] autorelease]; UIImage *printButtonImage = [UIImage imageNamed:@"buttonPrint.png"]; UIToolbar *toolBarButtons = [[[UIToolbar alloc] initWithFrame:CGRectMake( 0, 0, 52.0, 44.01 )] autorelease]; UIBarButtonItem *printButton = [[[UIBarButtonItem alloc] initWithImage:printButtonImage style:UIBarButtonItemStyleBordered target:self action:@selector(printDocument:)] autorelease]; [buttonItems addObject:printButton]; [toolBarButtons setItems:buttonItems animated:YES]; self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:toolBarButtons] autorelease]; </code></pre> <p>According to suggestions from SO, I have added this just prior to <code>[toolBarButtons setItems...]</code> but it has had no affect:</p> <pre><code>toolBarButtons.backgroundColor = [UIColor clearColor]; [toolBarButtons setTranslucent:YES]; [toolBarButtons setOpaque:NO]; </code></pre> <p><a href="https://stackoverflow.com/questions/9389540/uitoolbar-background-transparent">I found this thread</a>, on which the answer by jd provided a work-around (edited to match my variables):</p> <pre><code>const float colorMask[6] = {222, 255, 222, 255, 222, 255}; UIImage *img = [[UIImage alloc] init]; UIImage *maskedImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)]; [toolBarButtons setBackgroundImage:maskedImage forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault]; </code></pre> <p>I have also seen a couple of solutions to this issue that require getting the color of the top or bottom of the <code>navigationController</code> and applying a gradient, but I refuse to believe that there is no way to make the rectangle of the <code>UIToolbar</code> entirely transparent, which <em>should</em> allow the <code>navigationController</code> color to come through, gradient and all.</p> <p>Is applying a mask image <strong><em>really</em></strong> the only way to simulate the correct UI experience? Has Apple <strong><em>really</em></strong> not provided a way to simply make a <code>UIToolbar</code> containing rectangle entirely transparent?</p> <p>For now, I have the correct <em>behavior</em>, but I don't feel like I have the correct <em>solution</em>. This feels like a hack. Does anyone out there know of a better way to accomplish this?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload