UISegmentedControl with custom color: separator line bug

Question

Its easy change the color of UISegmentedControl. I found various solution like this, this site and the best this solution. But none was what I want.

I tried create a simple thing and it work very easy, this was my code: (I am using the iOS 4.2, not the 5.0 and xcode 4.0.2)

id segment[3];
UISegmentedControl *segmentedControl;   
- (id)init
{
    NSArray *itens = [NSArray arrayWithObjects: @"Option 1", @"Option 2", @"Option 3", nil];    
    segmentedControl = [[UISegmentedControl alloc] initWithItems:itens];
    [segmentedControl setFrame:CGRectMake(0, 0, 500, 30)];
    [segmentedControl setSegmentedControlStyle:UISegmentedControlStyleBar];
    [segmentedControl addTarget:self 
                    action:@selector(segmentedControl:) 
          forControlEvents:UIControlEventAllEvents];

    switch (type) {
        case type1: [segmentedControl setSelectedSegmentIndex:0]; break;
        case type2: [segmentedControl setSelectedSegmentIndex:1]; break;        
        case type3: [segmentedControl setSelectedSegmentIndex:2]; break;        
    }
    for (int i=0; i<3; i++) {
        //The most important trick to work, have to retain the subviews
        segment[i] = [[[segmentedControl subviews] objectAtIndex:i] retain];
    }
    [self changeColor];
    [self addSubview:segmentedControl];
    return self;
}  

- (void)segmentedControl:(id)sender 
{
    //do some thing
    [self changeColor];
}

- (void)changeColor{ 
    for (int i=0; i<3; i++) {
        [segment[i] setTintColor:[UIColor lightGrayColor]];
    }
    int select = segmentedControl.selectedSegmentIndex;
    [segment[select] setTintColor:[UIColor blueColor]];     
}

So it create this:

first image

Very good, then I click in Option 2

second

Wow, this is exacly what I want, so click in Option 3

problem

Now the problem, this stupid blue line (marked in red square) between Option 1 and Option 2. If I click in Option 1 again, I will have:

boring

Than the blue line appear again. This mean that every left side on old clicked segment (but not with the first) will have this blue line. If I go from right to left it not happens.

I have no idea how to solve this. How can I access this line and change your color? Or I will have to use other codes. Maybe they will have the same problem...

I had the same problem as you and spend days to find the problem. Thanks a lot friend you saved my life..!!!! — chatur, Jan 18 '12 at 13:50

score 5 · Answer 1 · answered Jul 27 '12 at 16:10

I Think there is a lot easier solution. Just clean the pointers..

for (int i=0; i<[self.segmentedControll.subviews count]; i++) 
{
    [[self.segmentedControll.subviews objectAtIndex:i] setTintColor:nil];
    if (![[self.segmentedControll.subviews objectAtIndex:i]isSelected]) 
    {   
        UIColor *tintcolor=[UIColor blackColor];
        [[self.segmentedControll.subviews objectAtIndex:i] setTintColor:tintcolor];
    } 
    else 
    {
        UIColor *tintcolor=[UIColor blueColor];
        [[self.segmentedControll.subviews objectAtIndex:i] setTintColor:tintcolor];
    }
}

Also you have to set the colors in viewDidApear in order to have the segmented control display the intended colors when it loads. Good & easy solution. — mircaea, Mar 02 '13 at 01:38

score 3 · Accepted Answer · answered Nov 04 '11 at 22:40

Wow... When we write were in stackoverflow, we can calm down and think better. I write the answer in my ow question:

If I go from right to left it not happens.

This is the solution! What I have to do? Simulate this.

BOOL inside = FALSE;
- (void)changeColor{ 
    int old = segmentedControl.selectedSegmentIndex;
    for (int i=0; i<3; i++) {
      [segment[i] setTintColor:[UIColor lightGrayColor]];
    }  
/**/inside = TRUE;
/**/for (int i=3; i>0; i--) {
/**/     //When I do this, it call "segmentedControl:"
/**/    [segmentedControl setSelectedSegmentIndex:i];
/**/}

/**/int select = old;
    [segment[select] setTintColor:[UIColor blueColor]];     
    [segmentedControl setSelectedSegmentIndex:select];    
/**/inside = FALSE;    
} 

- (void)segmentedControl:(id)sender 
{
/**/if (inside==TRUE) return;   //Ignore this calls.
    //do some thing
    [self changeColor];
}

UISegmentedControl with custom color: separator line bug

2 Answers2

Linked