How to change the colors of a segment in a UISegmentedControl in iOS 13? How to change the colors of a segment in a UISegmentedControl in iOS 13? ios ios

How to change the colors of a segment in a UISegmentedControl in iOS 13?


As of iOS 13b3, there is now a selectedSegmentTintColor on UISegmentedControl.

To change the overall color of the segmented control use its backgroundColor.

To change the color of the selected segment use selectedSegmentTintColor.

To change the color/font of the unselected segment titles, use setTitleTextAttributes with a state of .normal/UIControlStateNormal.

To change the color/font of the selected segment titles, use setTitleTextAttributes with a state of .selected/UIControlStateSelected.

If you create a segmented control with images, if the images are created as template images, then the segmented control's tintColor will be used to color the images. But this has a problem. If you set the tintColor to the same color as selectedSegmentTintColor then the image won't be visible in the selected segment. If you set the tintColor to the same color as backgroundColor, then the images on the unselected segments won't be visible. This means your segmented control with images must use 3 different colors for everything to be visible. Or you can use non-template images and not set the tintColor.

Under iOS 12 or earlier, simply set the segmented control's tintColor or rely on the app's overall tint color.


As of Xcode 11 beta 3

There is now the selectedSegmentTintColor property on UISegmentedControl.

See rmaddy's answer


To get back iOS 12 appearance

I wasn't able to tint the color of the selected segment, hopefully it will be fixed in an upcoming beta.

Setting the background image of the selected state doesn't work without setting the background image of the normal state (which removes all the iOS 13 styling)

But I was able to get it back to the iOS 12 appearance (or near enough, I wasn't able to return the corner radius to its smaller size).

It's not ideal, but a bright white segmented control looks a bit out of place in our app.

(Didn't realise UIImage(color:) was an extension method in our codebase. But the code to implement it is around the web)

extension UISegmentedControl {    /// Tint color doesn't have any effect on iOS 13.    func ensureiOS12Style() {        if #available(iOS 13, *) {            let tintColorImage = UIImage(color: tintColor)            // Must set the background image for normal to something (even clear) else the rest won't work            setBackgroundImage(UIImage(color: backgroundColor ?? .clear), for: .normal, barMetrics: .default)            setBackgroundImage(tintColorImage, for: .selected, barMetrics: .default)            setBackgroundImage(UIImage(color: tintColor.withAlphaComponent(0.2)), for: .highlighted, barMetrics: .default)            setBackgroundImage(tintColorImage, for: [.highlighted, .selected], barMetrics: .default)            setTitleTextAttributes([.foregroundColor: tintColor, NSAttributedString.Key.font: UIFont.systemFont(ofSize: 13, weight: .regular)], for: .normal)            setDividerImage(tintColorImage, forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)            layer.borderWidth = 1            layer.borderColor = tintColor.cgColor        }    }}

Image showing the effect of the above code


IOS 13 and Swift 5.0 (Xcode 11.0)Segment Control 100% Working

enter image description here

enter image description here

 if #available(iOS 13.0, *) {      yoursegmentedControl.backgroundColor = UIColor.black      yoursegmentedControl.layer.borderColor = UIColor.white.cgColor      yoursegmentedControl.selectedSegmentTintColor = UIColor.white      yoursegmentedControl.layer.borderWidth = 1      let titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]          yoursegmentedControl.setTitleTextAttributes(titleTextAttributes, for:.normal)      let titleTextAttributes1 = [NSAttributedString.Key.foregroundColor: UIColor.black]      yoursegmentedControl.setTitleTextAttributes(titleTextAttributes1, for:.selected)  } else {              // Fallback on earlier versions}