UISegmentedControl Borders/Highlighted State

Question

I currently have a uisegmentedcontrol element in my VC and have managed to remove the borders by following the thread below. While it works fine, once selected the uisegmentedcontrol section becomes entirely white, including the icon, is there any way to modify that? So the background of the selected section would be whatever colour I specify and the icon becomes white. Thanks in advance for anyone who may help.

The thread mentioned: Swift: How to remove border from segmented control

Can you share code and the screenshot of the SegmentedControl? — Shabir jan, May 21 '17 at 17:47
i have added a screenshot with the 2nd section selected, for code please visit the link I posted and the answer for that is the exact code I'm using — Blackroche, May 21 '17 at 17:52
I think you can use selected and unselected state to use different colors — Shabir jan, May 21 '17 at 17:58
I've tried that within the code using the .isHighlighted method but nothing. Any other way to get it with no borders and retain the selected colour? — Blackroche, May 21 '17 at 18:27
the selected one to be grey, if its not selected than white background but shows icon. — Blackroche, May 21 '17 at 19:02
That is perfect, can the "3" and "4" be grey aswell or no? and how did you achieve that? — Blackroche, May 21 '17 at 19:05

score 3 · Accepted Answer · answered May 21 '17 at 19:09

This is how you can change the background color for selected indicator in UISegmentControl

extension UISegmentedControl{
    func removeBorders() {
        setBackgroundImage(imageWithColor(color: .clear), for: .normal, barMetrics: .default)
        setBackgroundImage(imageWithColor(color: .gray), for: .selected, barMetrics: .default)
        setDividerImage(imageWithColor(color: UIColor.clear), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
    }

    // create a 1x1 image with this color
    private func imageWithColor(color: UIColor) -> UIImage {
        let rect = CGRect(x: 0.0, y: 0.0, width:  1.0, height: 1.0)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        context!.setFillColor(color.cgColor);
        context!.fill(rect);
        let image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return image!
    }
}

As you can see in removeBorders function you are setting background image based on color for normal and selected state. So here you can use whatever color you like.

Thank you very much! I'll give it a shot as soon as I get back to my PC, thanks again! — Blackroche, May 21 '17 at 19:14

UISegmentedControl Borders/Highlighted State

1 Answers1