How to set backgroundColor of UISegmentedControl to white in iOS 13

Question

iOS 13 introduced some changes to the UISegmentedControl including a really nice animation when switching the selected segment. However I'm noticing that it's not displaying the backgroundColor property correctly, it always seems to have a bit of a tint to it.

I've seen questions that answer how to set the selectedSegmentTintColor and such but I'm struggling to set the backgroundColor to say .white, no matter what I do it always shows up a bit of a gray even though there's no tintColor or similar setting applied. Setting the backgroundColor to other colors shows the same behavior but its most obvious with white. Adding to the mystery is that while this difference shows up on both iOS 13 simulators and a physical device running iOS 13, the visual debugger (in XCode 11 GM2) does not show this difference!

Here's a couple screenshots showing that even though the backgroundColor of the UISegmentedControl is set to the same as the backgroundColor of the view shown behind it they are slightly different.

Device running iOS 13 (white backgroundColor)

Same view/code shown in Visual Debugger (white backgroundColor)

Device running iOS 13 (blue backgroundColor)

I've tried the suggestion of applying a backgroundImage as suggested in this SO post: UISegmentedControl iOS 13 clear color but that ends up reverting the style back to how it looked in iOS 12 and you lose the nice animation as well.

Any guidance or suggestions is greatly appreciated! I've also filed a bug report with Apple, will see if anything comes of that.

Answer 1

Use this extension for the existing segment controller in iOS13

        extension UISegmentedControl
        {
            func setOldLayout(tintColor: UIColor)
            {
                let bg = UIImage(color: .clear, size: CGSize(width: 1, height: 32))
                let devider = UIImage(color: tintColor, size: CGSize(width: 1, height: 32))

                //set background images
                self.setBackgroundImage(bg, for: .normal, barMetrics: .default)
                self.setBackgroundImage(devider, for: .selected, barMetrics: .default)

                //set divider color
                self.setDividerImage(devider, forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)

                //set border
                self.layer.borderWidth = 1
                self.layer.borderColor = tintColor.cgColor

                //set label color
                self.setTitleTextAttributes([.foregroundColor: tintColor], for: .normal)
                self.setTitleTextAttributes([.foregroundColor: UIColor.white], for: .selected)
            }
        }
        extension UIImage {
            convenience init(color: UIColor, size: CGSize) {
                UIGraphicsBeginImageContextWithOptions(size, false, 1)
                color.set()
                let ctx = UIGraphicsGetCurrentContext()!
                ctx.fill(CGRect(origin: .zero, size: size))
                let image = UIGraphicsGetImageFromCurrentImageContext()!
                UIGraphicsEndImageContext()

                self.init(data: image.pngData()!)!
            }
        }

Use it directly like this

segmentedControl.setOldLayout(tintColor: .blue)