UISegmentedControl背景图片奇怪的行为

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`

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:

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:

(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.

Answer 1

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];