How to change color of UISegmentedControl border in iOS7?

Question

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 1

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];

Solution 2

The linked answer does indeed answer your question, but you have to read between the lines. Here's a clearer example to change all segmented control styles within the app:

// Sets the tint color which typically sets the color of the segment images, text, dividers,
// borders, and selected segment. A translucent version of this color is also used to tint a
// segment when it is pressed and transitioning to being selected, as shown on the first
// segment below.
[[UISegmentedControl appearance] setTintColor:[UIColor blackColor]];

// The attributes dictionary can specify the font, text color, text shadow color, and text
// shadow offset for the title in the text attributes dictionary
[[UISegmentedControl appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor redColor]} forState:UIControlStateNormal];

For one control within the app:

// Sets the tint color which typically sets the color of the segment images, text, dividers,
// borders, and selected segment. A translucent version of this color is also used to tint a
// segment when it is pressed and transitioning to being selected, as shown on the first
// segment below.
self.segControl.tintColor = [UIColor blackColor];

// The attributes dictionary can specify the font, text color, text shadow color, and text
// shadow offset for the title in the text attributes dictionary
[self.segControl setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor redColor]} forState:UIControlStateNormal];

More info here: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/UIKitUICatalog/UISegmentedControl.html

Solution 3

I resolve putting in viewWillAppear mySegmentControl.selectedIndex for all items. So, the tint color appear for all segments. Of course, after selected All items, select your default item again.

Comments

[iwasrobbed]

possible duplicate of iphone ios7 segmented UISegmentedControl change only border color

[OscarWyck]

@iWasRobbed The thread which you refer to accepts an answer which does not correctly answers the question. It just solves the problem of the person who asked the question. I am looking for a way to change the border color, not the text color.

[OscarWyck]

Thanks for taking your time helping me. I found a solution myself though, which I think is better (more easy to understand).

[Benjamin Stark]

Why wouldn't you just do this? [[UISegmentedControl appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName : [UIColor redColor] } forState:UIControlStateNormal];

[Frank Yin]

Excellent workaround. Instead of setting image to nil, suggest setting background index to -1. "[bcg setSelectedSegmentIndex:-1];"

[devios1]

Use UIControlStateSelected instead of UIControlStateNormal if you only want to change the text color of the selected tab.