Remove white squares around text in UISegmentedControl

Question

Under IOS7, I've defined a UISegmentedControl in the interface builder and use the following code to customize it:

 segconOptions.layer.cornerRadius = 20.0;
 segconOptions.layer.masksToBounds = YES;

 //[segconOptions setTintColor:[UIColor whiteColor]];
 [segconOptions setTintColor:[UIColor blueColor]];  //temp change for graphics issue

 [segconOptions setBackgroundColor:[UIColor clearColor]];
 [segconOptions setAlpha:1.0];

 [segconOptions setBackgroundImage:[UIImage imageNamed:@"blue.png"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
 [segconOptions setBackgroundImage:[UIImage imageNamed:@"yellow.png"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

I was expecting the text to appear over the background images(white text over blue, red text over yellow). However, instead, have these large squares around the text. I changed the font color to blue for the non-selected cells to make the text readable in this screenshot:

How do I display the button title text over my custom background image, without these white boxes around the text? I assume I'm missing something obvious, but I've been searching all day and keep coming up with nothing. Thanks in advance!

Answer 1

I can only think that the problem is because of some unusual thing you're doing to the segmented control. When I set the background image of a segmented control and set the titles of the segments, I don't get any white rectangle - see the attached screen shot.

I tried to imitate your code (note the rounded corners) but I couldn't get any white rectangle. Maybe the white rectangle is part of your blue.png image! (Note that you should be using a resizeable image here, by the way.)