Search code examples
ioscocoa-touchios7uisegmentedcontroluiappearance

How to change color of UISegmentedControl border in iOS7?



How do I change the border color of the segmented controller in iOS7 without changing the text color?


It would be ideal if I could keep the line between the segments as is (i.e. same color as the text), but if a border color change implies a change of this line it would also be ok.

Note also that the text (and the lines between segments) have the color which is set with
[segmCtrl setTintColor:choosenTintColor]


Solution

  • So I solved the problem myself. My solution gives the border of the segmented control another color, nothing else.

    In order to only change the border color of the segmented control, I put another segmented control on top of my old one. I disabled user interaction for this new one, and I set the image for the selected segment to nil.

    UIView *header = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 40)];
    // Header view for my main view
    
    UISegmentedControl *subCat = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"Segm 1", @"Segm 2", @"Segm 3", @"Segm 4", nil]]; 
    // The UISegmentedController which I want to change color for
    
    [subCat setFrame:CGRectMake(5, 5, [UIScreen mainScreen].bounds.size.width - 10, 30)];
    [subCat setSelectedSegmentIndex:0];
    
    UISegmentedControl *bcg = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@" ", @" ", @" ", @" ", nil]]; 
    // The UISegmentedController I put on top of the other one
    
    UIColor *subColor = [UIColor redColor];
    [subCat setTintColor:subColor];
    [bcg setFrame:CGRectMake(5, 5, [UIScreen mainScreen].bounds.size.width - 10, 30)];
    [bcg setTintColor:[UIColor greenColor]];
    [bcg setUserInteractionEnabled:NO];
    [bcg setSelectedSegmentIndex:0];
    [bcg setImage:nil forSegmentAtIndex:0]; // Removing highlight color
    
    
    [header addSubview:subCat];
    [header addSubview:bcg];
    
    [[self view] addSubview:header];