UISegmentedControl background image strange behavior

Question

I'm working on an iOS project and came across this strange issue. I have a UISegmentedControl element of bar style. It has 3 segments. The segments have fixed sizes of 80. I also have 3 images with each segment selected to set as background. Here is one of them`

enter image description here

When view is loaded, one of the segments is set as selected and this image is set as background like this:

[self.genderSelectionButton setBackgroundImage:[UIImage imageNamed:@"gender-switch01.png"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Now when I run the project on 5.1 Simulator, I get this distorted view for segmented button:

enter image description here

As you can see, the middle segment keeps the size I gave, but the image is kind of stretched from the middle to the edges. Also selected segment is highlighted even though I have set it to NO. In the method that listens to button selection, I change background image and get the following: enter image description here

(background image is stretched again...)

Almost the same happens on iOS6. Now am I doing something wrong, or is there a way to fix this??

EDIT

Found a better implementation with separate images for normal button, selected button and dividers. See the answer below.

this may help u http://stackoverflow.com/questions/2270526/uisegmentedcontrol-selected-segment-color — Dhara, Feb 27 '13 at 12:09
My general problem is not the tint color, but the stretched background image... But thanks anyway. — ArVan, Feb 27 '13 at 12:17
Of the top of my head, I would say that the issue is not changing the background image, but rather messed up calculation of segmented control width and segment widths (using fixed widths can sometimes do that). Try messing with the sizes a bit and see if they match your expectations or post the segmented control creation code to scan it for errors. — Adis, Feb 27 '13 at 13:21
possible duplicate of [UISegmentedControl image highlighting bug in iOS6](http://stackoverflow.com/questions/14810493/uisegmentedcontrol-image-highlighting-bug-in-ios6) — dsgriffin, Jun 20 '13 at 23:15

score 1 · Accepted Answer · answered Feb 27 '13 at 14:35

It appears that setting full background image is not the best way to handle custom segmented button. Example found here.

Here is the basic code that does everything:

UIImage *segmentSelected = 
    [[UIImage imageNamed:@"segcontrol_sel.png"] 
        resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
UIImage *segmentUnselected = 
    [[UIImage imageNamed:@"segcontrol_uns.png"] 
        resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
UIImage *segmentSelectedUnselected = 
    [UIImage imageNamed:@"segcontrol_sel-uns.png"];
UIImage *segUnselectedSelected = 
    [UIImage imageNamed:@"segcontrol_uns-sel.png"];
UIImage *segmentUnselectedUnselected = 
    [UIImage imageNamed:@"segcontrol_uns-uns.png"];

[[UISegmentedControl appearance] setBackgroundImage:segmentUnselected 
    forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setBackgroundImage:segmentSelected 
    forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

[[UISegmentedControl appearance] setDividerImage:segmentUnselectedUnselected 
    forLeftSegmentState:UIControlStateNormal 
    rightSegmentState:UIControlStateNormal 
    barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setDividerImage:segmentSelectedUnselected 
    forLeftSegmentState:UIControlStateSelected 
    rightSegmentState:UIControlStateNormal 
    barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] 
    setDividerImage:segUnselectedSelected 
    forLeftSegmentState:UIControlStateNormal 
    rightSegmentState:UIControlStateSelected 
    barMetrics:UIBarMetricsDefault];

UISegmentedControl background image strange behavior

1 Answers1