How to change only text color when UISegmentedControl value changed?

Question

I am using UISegmentedControl in my app and i could able to toggle the text color when it changes the state. But by default selected segment contains a different tint color like below image

enter image description here

I do not want to have different tint color when it is in selected state. I just wish to differentiate the selected segment only by the text color like below image.

enter image description here

I know this is a silly question but none of the other similar questions provide me a proper answer.

Can you anyone please guide me to achieve this?

Thanks in anticipation!

score 1 · Answer 1 · answered Sep 29 '14 at 12:22

This is enough.

 NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:
                                    [UIFont boldSystemFontOfSize:17], UITextAttributeFont,
                                    [UIColor blackColor], UITextAttributeTextColor,
                                    nil];
        [_segment setTitleTextAttributes:attributes forState:UIControlStateNormal];
        NSDictionary *highlightedAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:UITextAttributeTextColor];
        [_segment setTitleTextAttributes:highlightedAttributes forState:UIControlStateHighlighted];

If you want to change the color when the segment change

- (IBAction)horseSegmentChanged:(UISegmentedControl*)sender {

        if (sender.selectedSegmentIndex == 0) {


            NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:
                                        [UIFont boldSystemFontOfSize:17], UITextAttributeFont,
                                        [UIColor blackColor], UITextAttributeTextColor,
                                        nil];
            [_segment setTitleTextAttributes:attributes forState:UIControlStateNormal];
            NSDictionary *highlightedAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:UITextAttributeTextColor];
            [_segment setTitleTextAttributes:highlightedAttributes forState:UIControlStateHighlighted];

        } else if (sender.selectedSegmentIndex == 1) { // selected shared blogs



        }


     }

Thanks for your response. I don't think this will work for me. Please read the question again "i could able to toggle the text color when it changes the state". My requirement is to change the background color(tint color) of the selected segment if you notice first image you can see two different color(white and grey) i just don't want these two colors. I just want only one color(look at second image) even if it is selected. — thavasidurai, Sep 29 '14 at 13:10

score 1 · Accepted Answer · answered Sep 29 '14 at 13:20

I would strongly suggest not doing this.

You realise that this just makes it harder to use right? For a colour blind person (about 1 in 11 men are colourblind) your version is pretty much impossible to use. For people with poor sight it's very hard to use. The best test for usability (and advice from Apple engineers) is to turn it into greyscale images and see if you can still use it.

For example...

Section tint

enter image description here

becomes...

enter image description here

Using a contrasting colour text on the selected index would improve this.

Your colour scheme

enter image description here

becomes...

enter image description here

This is very hard to determine which section is selected.

score 0 · Answer 3 · answered Sep 29 '14 at 12:19

Find the below customsegment control

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface CustomSegmentControl : UISegmentedControl

@end

#import "CustomSegmentControl.h"
@interface CustomSegmentControl ()
- (UIImage *)imageWithColor:(UIColor *)color;

@end
@implementation CustomSegmentControl

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    [self setBackgroundImage:[[UIImage imageNamed:@"img.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    [self setBackgroundImage:[[UIImage imageNamed:@"img.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
}

@end

This will solve your issue

score 0 · Answer 4 · edited May 23 '17 at 12:22

I agree with Fogmeister that this is probably not a very good idea in terms of usability. That said, UISegmentedControl allows you to set a background image for a specific state. You could set an image with the same color for each of the UISegmentedControl states, and that would give you the effect you desire.

To programmatically create an image from UIColor, see here.

And some sample code for a segmented control with an always white background (considering an UIImage category as the one referenced above):

[self.segmentedControl setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor]] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor]] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:[UIImage imageWithColor:[UIColor whiteColor]] forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];

How to change only text color when UISegmentedControl value changed?

4 Answers4