CODEWITHSUNDEEP
iosobjective-ciphoneipaduisegmentedcontrol
lenhhoxung
lenhhoxung

Reputation: 2746

How to make segmented control like this

Today I'm creating a custom segmented control. The appearance of the control as follow:

enter image description here

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:
enter image description here

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.

Upvotes: 1

Views: 695

Answers (2)

Marek R
Marek R

Reputation: 37697

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

Upvotes: 0

freshking
freshking

Reputation: 1864

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.

Upvotes: 2

Related Questions