Why does one of the segments appear disabled on segmented control?

Question

I have a segmented control with custom images for segments. I have created it as follows

[repaymetSegmentedControl setBackgroundImage:[UIImage imageNamed:@"-SingleJointOffState"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[repaymetSegmentedControl setBackgroundImage:[UIImage imageNamed:@"-SingleJointOnState"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];


[repaymetSegmentedControl setDividerImage:[UIImage imageNamed:@"on_div"] forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[repaymetSegmentedControl setDividerImage:[UIImage imageNamed:@"off_div"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

CGRect frameSeg= repaymetSegmentedControl.frame;
[repaymetSegmentedControl setFrame:CGRectMake(frameSeg.origin.x, frameSeg.origin.y-5, frameSeg.size.width, frameSeg.size.height + 15)];

Here when I run the app I am selecting one of the segments based on preferences. It appears as shown in image. Not sure what's wrong with it.

The images being used are as follows

Answer 1

Using this code in viewDidLoad gave me the result that I think you are looking for (I renamed your images to make things a bit clearer for me).

    [repaymetSegmentedControl setBackgroundImage:[UIImage imageNamed:@"whiteBG"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    [repaymetSegmentedControll setBackgroundImage:[UIImage imageNamed:@"pinkBG"] forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
    [repaymetSegmentedControl setBackgroundImage:[UIImage imageNamed:@"pinkBG"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
    [repaymetSegmentedControl setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor blackColor]} forState:UIControlStateNormal ];
    [repaymetSegmentedControll setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor whiteColor]} forState:UIControlStateHighlighted ];
    [repaymetSegmentedControl setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor whiteColor]} forState:UIControlStateSelected ];

    [repaymetSegmentedControl setDividerImage:[UIImage imageNamed:@"pinkDivider"] forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    [repaymetSegmentedControl setDividerImage:[UIImage imageNamed:@"pinkDivider"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
    [repaymetSegmentedControl setDividerImage:[UIImage imageNamed:@"pinkDivider"] forLeftSegmentState:UIControlStateHighlighted rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    [repaymetSegmentedControl setDividerImage:[UIImage imageNamed:@"pinkDivider"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
    [repaymetSegmentedControl setDividerImage:[UIImage imageNamed:@"whiteDivider"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Using this code, the result is like this . Attached Image:

Answer 2

My guess is that the text color for selected segments is set to black and white for the other. So in your screenshot the middle segment is selected.

The problem could be somewhere else:

[repaymetSegmentedControl setBackgroundImage:[UIImage imageNamed:@"-SingleJointOffState"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[repaymetSegmentedControl setBackgroundImage:[UIImage imageNamed:@"-SingleJointOnState"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

It seems weird to have image names starting with -.

[repaymetSegmentedControl setDividerImage:[UIImage imageNamed:@"on_div"] forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[repaymetSegmentedControl setDividerImage:[UIImage imageNamed:@"off_div"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

You seem to be missing right selected/left normal option.

Also as your design seems pretty flat, I'm not sure you need any of those.

Finally could you attach all the images to the question?

Answer 3

Your segment divider image should be the same height as the background images.