0

This is the effect that I'm going for:

enter image description here

This is what I have so far:

enter image description here

Cocoa does not allow you to set both an icon and text for each segment, so I was forced to burn the text into an image:

self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[
    [UIImage imageNamed:@"segmentedControlContacts"],
    [UIImage imageNamed:@"segmentedControlOtherApps"]
]];

The last thing I have to finish is making the normal (unselected) segment gray instead of its selected/tint blue color. The following did not work:

// themeColor is defined as a shade of blue in a category
[UIView appearance].tintColor = [UIColor themeColor];
[[UISegmentedControl appearance] 
    setBackgroundImage:[UIImage imageNamed:@"segmentedControlEdgeNormal"] 
    forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] 
    setBackgroundImage:[UIImage imageNamed:@"segmentedControlEdgeSelected"] 
    forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] 
    setTitleTextAttributes:@{
        NSForegroundColorAttributeName: [UIColor grayColor]
    } 
    forState:UIControlStateNormal
];
Pwner
  • 3,714
  • 6
  • 41
  • 67

1 Answers1

1

The line

[[UISegmentedControl appearance] setTitleTextAttributes:@{
        NSForegroundColorAttributeName: [UIColor grayColor]
    } 
    forState:UIControlStateNormal
];

Will only works for title of segment control. If you remove images from segment and add title for both segment than this will surely works.

This will not take an effect on images for segment control.

For image customisation you must have to use method:

- (void)setBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics

Also it will not show tint colour as you expected.

Suggestion:

If you still insist to make that custom behaviour, I suggest leave segment control instead create two buttons and place them side by side to feel like a segment control.

And for that behaviour you need grey image for button background and change for alternate button events.

Kampai
  • 22,848
  • 21
  • 95
  • 95