Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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]

like image 259
OscarWyck Avatar asked Oct 04 '13 11:10

OscarWyck


3 Answers

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

like image 80
iwasrobbed Avatar answered Nov 09 '22 22:11

iwasrobbed


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];
like image 22
OscarWyck Avatar answered Nov 09 '22 22:11

OscarWyck


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.

like image 38
Claudio Castro Avatar answered Nov 09 '22 22:11

Claudio Castro