UISegmentedControl Divider Error

Question

I encounter a strange error with my UISegmentedControl delimiters. When I push my finger away, the segment loses the image of the selected state, but the separator retains it. I need to drag around 100 pixels for this to happen.

Down on target:

Down, drawn finger from the target:

Considering that 0 means normal state, 1 selected state and 2 selected state; I have all the correct separator images, and I set them for each case, that is:

00, 01, 02 10, 11, 12 20, 21, 22 

Everything else works fine, if I touch and hold the target, there is no problem. I do not expect users to listen and drag, but I would prefer it to be allowed. Has anyone experienced this before?

Answer 1

There is no need to provide separator images for states "11" and "22", because logically you cannot have 2 adjacent selected segments or 2 adjacent selected segments. Well, only if simultaneous pressing of adjacent segments will select both of them, but hardly.

Therefore, you must have the following separator images:

 00, 01, 02 10, --, 12 20, 21, -- 

In addition, you should also have 3 background images for all three different states (Normal, Selected and Highlighted). I explained the reason for these background images and their creation here (in this explanation I used only 2 background images for Normal and Selected states, but if you want to use the selected state, you need to add a third background image).

Here is a diagram showing how these images are used in the UISegmentedControl:

And then install them using the following appearance methods:

 // Set background images [segmentedControl setBackgroundImage:background_image_normal forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; [segmentedControl setBackgroundImage:background_image_selected forState:UIControlStateSelected barMetrics:UIBarMetricsDefault]; [segmentedControl setBackgroundImage:background_image_highlighted forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault]; // Set divider images 0=Normal 1=Selected 2=Highlighted [segmentedControl setDividerImage:divider_image_00 forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault] [segmentedControl setDividerImage:divider_image_01 forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault] [segmentedControl setDividerImage:divider_image_10 forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault] [segmentedControl setDividerImage:divider_image_02 forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault] [segmentedControl setDividerImage:divider_image_20 forLeftSegmentState:UIControlStateHighlighted rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault] [segmentedControl setDividerImage:divider_image_12 forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault] [segmentedControl setDividerImage:divider_image_21 forLeftSegmentState:UIControlStateHighlighted rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault] 

Answer 2

A possible solution is to manually subclass the UISegmentedControl and redefine it to ensure that the state of the divider is correctly "cleared" when the UIResponder events are raised. Maybe the segment expects touches of the modulating event to occur within the same boundaries as the initial strokes of the Began.

Answer 3

Do not forget that UIControlStateSelected | UIControlStateHighlighted

 // Set background images UIImage *normalBackgroundImage = [UIImage imageNamed:@"segmented-background-unselected"]; UIImage *selectedBackgroundImage = [UIImage imageNamed:@"segmented-background-selected"]; [self setBackgroundImage:normalBackgroundImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; [self setBackgroundImage:selectedBackgroundImage forState:UIControlStateSelected barMetrics:UIBarMetricsDefault]; [self setBackgroundImage:normalBackgroundImage forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault]; [self setBackgroundImage:selectedBackgroundImage forState:UIControlStateSelected | UIControlStateHighlighted barMetrics:UIBarMetricsDefault]; // Set divider images UIImage *buttonImageLeftSelected = [UIImage imageNamed:@"segmented-left-selected"]; UIImage *buttonImageNoneSelected = [UIImage imageNamed:@"segmented-none-selected"]; UIImage *buttonImageRightSelected = [UIImage imageNamed:@"segmented-right-selected"]; [self setDividerImage:buttonImageNoneSelected forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; [self setDividerImage:buttonImageLeftSelected forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; [self setDividerImage:buttonImageLeftSelected forLeftSegmentState:UIControlStateSelected | UIControlStateHighlighted rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; [self setDividerImage:buttonImageLeftSelected forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault]; [self setDividerImage:buttonImageRightSelected forLeftSegmentState:UIControlStateHighlighted rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault]; [self setDividerImage:buttonImageRightSelected forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateSelected | UIControlStateHighlighted barMetrics:UIBarMetricsDefault]; [self setDividerImage:buttonImageRightSelected forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault];