How to make segmented control like this - ios

Question

Today I'm creating a custom segmented control. The appearance of the control as follow:
I tried two methods:
- (void)setBackgroundImage:(UIImage *)backgroundImage
forState:(UIControlState)state
barMetrics:(UIBarMetrics)barMetrics
- (void)setDividerImage:(UIImage *)dividerImage
forLeftSegmentState:(UIControlState)leftState
rightSegmentState:(UIControlState)rightState
barMetrics:(UIBarMetrics)barMetrics
However, here is the result I got:
I extracted the border image and the divider line (vertical line) from the design, but the result looks bad. Please help me if you have any idea.

Answer 1

I have always found it too much work to customize the UISegmentedControl and it is not really fully customizable.
I suggest you create yourself a custom UIView inheriting 3 buttons. They are fully customizable and fully controllable:
#define BASE_TAG 123
NSArray *titles = [NSArray arrayWithObjects:#"MAP", #"LOCATIONS", #"BUS", nil];
double y = 0.0;
double x = 0.0;
double width = (frame.size.width / [titles count]);
double height = frame.size.height;
for (int i = 0; i < [titles count]; i++)
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setFrame:CGRectMake(x, y, width, height)];
[button.titleLabel setTextAlignment:NSTextAlignmentCenter];
[button setBackgroundColor:[UIColor clearColor]];
[button setTag:(BASE_TAG + ([titles count] - i - 1))];
[button addTarget:self action:#selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
[_buttons addObject:button];
x += width;
}
This is your button action. Here the button clicked will be selected and all others unselected:
- (void)buttonAction:(id)sender
{
UIButton *button = (UIButton *)sender;
NSInteger index = 0;
for (UIButton *btn in self.subviews)
{
if (btn == button)
{
index = (btn.tag - BASE_TAG);
[btn setBackgroundColor:[UIColor colorFromHexString:#"#5ac8f5" alpha:1.0]];
[btn setSelected:YES];
}
else
{
[btn setBackgroundColor:[UIColor clearColor]];
[btn setSelected:NO];
}
}
/* Trigger a delegate here if you like
if ([_delegate respondsToSelector:#selector(didSelectedIndex:)])
{
[_delegate didSelectedIndex:index];
}
*/
}
This lets you pre set a selected index:
- (void)setSelectedIndex:(NSInteger)index
{
for (UIButton *button in self.subviews)
{
if (button.tag == (BASE_TAG + index))
{
[button setBackgroundColor:[UIColor colorFromHexString:#"#5ac8f5" alpha:1.0]];
[button setSelected:YES];
}
else
{
[button setBackgroundColor:[UIColor clearColor]];
[button setSelected:NO];
}
}
}
This is just a suggestion code I pulled from an old project. You will have to customize it for your needs.

Answer 2

Here is a very good article how to do custom segmented control.
Looks like you have tried similar approach but you have messed up something with images (probably you misunderstand the API so this article should do the job for you).