Change UISwitch color to off

Question

I found out that we can change the appearance of the UISwitch button in the "on" state, but can we also change the color of the UISwitch in the "off" state?

Answer 1

Try using

yourSwitch.backgroundColor = [UIColor whiteColor]; youSwitch.layer.cornerRadius = 16.0; 

All thanks @Barry Wyckoff.

Answer 2

My C # swift2 solution:

 let onColor = _your_on_state_color let offColor = _your_off_state_color let mSwitch = UISwitch(frame: CGRectZero) mSwitch.on = true /*For on state*/ mSwitch.onTintColor = onColor /*For off state*/ mSwitch.tintColor = offColor mSwitch.layer.cornerRadius = mSwitch.frame.height / 2 mSwitch.backgroundColor = offColor 

Result:

Answer 3

You can use the tintColor property on the switch.

 switch.tintColor = [UIColor redColor]; // the "off" color switch.onTintColor = [UIColor greenColor]; // the "on" color 

Note: this requires iOS 5+

Answer 4

Swift IBDesignable

 import UIKit @IBDesignable class UISwitchCustom: UISwitch { @IBInspectable var OffTint: UIColor? { didSet { self.tintColor = OffTint self.layer.cornerRadius = 16 self.backgroundColor = OffTint } } } 

set class in identity inspector

change color from attribute inspector

Exit

Answer 5

The best way to control the background color and size of UISwitch

At the moment this is Swift 2.3 code

 import Foundation import UIKit @IBDesignable class UICustomSwitch : UISwitch { @IBInspectable var OnColor : UIColor! = UIColor.blueColor() @IBInspectable var OffColor : UIColor! = UIColor.grayColor() @IBInspectable var Scale : CGFloat! = 1.0 override init(frame: CGRect) { super.init(frame: frame) self.setUpCustomUserInterface() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) self.setUpCustomUserInterface() } func setUpCustomUserInterface() { //clip the background color self.layer.cornerRadius = 16 self.layer.masksToBounds = true //Scale down to make it smaller in look self.transform = CGAffineTransformMakeScale(self.Scale, self.Scale); //add target to get user interation to update user-interface accordingly self.addTarget(self, action: #selector(UICustomSwitch.updateUI), forControlEvents: UIControlEvents.ValueChanged) //set onTintColor : is necessary to make it colored self.onTintColor = self.OnColor //setup to initial state self.updateUI() } //to track programatic update override func setOn(on: Bool, animated: Bool) { super.setOn(on, animated: true) updateUI() } //Update user-interface according to on/off state func updateUI() { if self.on == true { self.backgroundColor = self.OnColor } else { self.backgroundColor = self.OffColor } } } 

Answer 6

In Swift 4+:

off state:

 switch.tintColor = UIColor.blue 

on condition:

 switch.onTintColor = UIColor.red 

Answer 7

Swift 4 is the easiest and fastest way to get it in 3 steps:

 // background color is the color of the background of the switch switchControl.backgroundColor = UIColor.white.withAlphaComponent(0.9) // tint color is the color of the border when the switch is off, use // clear if you want it the same as the background, or different otherwise switchControl.tintColor = UIColor.clear // and make sure that the background color will stay in border of the switch switchControl.layer.cornerRadius = switchControl.bounds.height / 2 

If you manually resize the switch (for example, using autolayout), you will also have to update switch.layer.cornerRadius , for example, by overriding layoutSubviews and after calling the super-update of the corner radius:

 override func layoutSubviews() { super.layoutSubviews() switchControl.layer.cornerRadius = switchControl.bounds.height / 2 } 

Answer 8

UISwitch offTintColor is transparent, so everything behind the switch is offTintColor . Therefore, instead of masking the background color, it is enough to draw the image of the switch behind the switch (this implementation assumes that the switch is positioned using automatic placement):

 func putColor(_ color: UIColor, behindSwitch sw: UISwitch) { guard sw.superview != nil else {return} let onswitch = UISwitch() onswitch.isOn = true let r = UIGraphicsImageRenderer(bounds:sw.bounds) let im = r.image { ctx in onswitch.layer.render(in: ctx.cgContext) }.withRenderingMode(.alwaysTemplate) let iv = UIImageView(image:im) iv.tintColor = color sw.superview!.insertSubview(iv, belowSubview: sw) iv.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ iv.topAnchor.constraint(equalTo: sw.topAnchor), iv.bottomAnchor.constraint(equalTo: sw.bottomAnchor), iv.leadingAnchor.constraint(equalTo: sw.leadingAnchor), iv.trailingAnchor.constraint(equalTo: sw.trailingAnchor), ]) } 

Answer 9

Swift 5:

 import UIKit extension UISwitch { func set(offTint color: UIColor ) { let minSide = min(bounds.size.height, bounds.size.width) layer.cornerRadius = minSide / 2 backgroundColor = color tintColor = color } } 

Answer 10

A safer Swift 3 way without 16pt magic values:

 class ColoredBackgroundSwitch: UISwitch { var offTintColor: UIColor { get { return backgroundColor ?? UIColor.clear } set { backgroundColor = newValue } } override func layoutSubviews() { super.layoutSubviews() let minSide = min(frame.size.height, frame.size.width) layer.cornerRadius = ceil(minSide / 2) } } 

Answer 11

If you need other switches around your application, it might be a good idea to implement @LongPham code inside a custom class. As others have already noted, for the “off” state you will also need to change the background color, because by default it is transparent.

 class mySwitch: UISwitch { required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) //Setting "on" state colour self.onTintColor = UIColor.green //Setting "off" state colour self.tintColor = UIColor.red self.layer.cornerRadius = self.frame.height / 2 self.backgroundColor = UIColor.red } } 

Answer 12

objective category c for use on any UISlider in a project using code or storyboard:

 #import <UIKit/UIKit.h> @interface UISwitch (SAHelper) @property (nonatomic) IBInspectable UIColor *offTint; @end 

implementation

 #import "UISwitch+SAHelper.h" @implementation UISwitch (SAHelper) @dynamic offTint; - (void)setOffTint:(UIColor *)offTint { self.tintColor = offTint; //comment this line to hide border in off state self.layer.cornerRadius = 16; self.backgroundColor = offTint; } @end 

Answer 13

Xcode 11, Swift 4.2

Starting with Matt's solution, I added it to the IBDesignable user control. There is a synchronization problem in that didMoveToSuperview() is called before the offTintColor is set to be processed.

 @IBDesignable public class UISwitchCustom: UISwitch { var switchMask: UIImageView? private var observers = [NSKeyValueObservation]() @IBInspectable dynamic var offTintColor : UIColor! = UIColor.gray { didSet { switchMask?.tintColor = offTintColor } } override init(frame: CGRect) { super.init(frame: frame) initializeObservers() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) initializeObservers() } private func initializeObservers() { observers.append(observe(\.isHidden, options: [.initial]) {(model, change) in self.switchMask?.isHidden = self.isHidden }) } override public func didMoveToSuperview() { addOffColorMask(offTintColor) super.didMoveToSuperview() } private func addOffColorMask(_ color: UIColor) { guard self.superview != nil else {return} let onswitch = UISwitch() onswitch.isOn = true let r = UIGraphicsImageRenderer(bounds:self.bounds) let im = r.image { ctx in onswitch.layer.render(in: ctx.cgContext) }.withRenderingMode(.alwaysTemplate) let iv = UIImageView(image:im) iv.tintColor = color self.superview!.insertSubview(iv, belowSubview: self) iv.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ iv.topAnchor.constraint(equalTo: self.topAnchor), iv.bottomAnchor.constraint(equalTo: self.bottomAnchor), iv.leadingAnchor.constraint(equalTo: self.leadingAnchor), iv.trailingAnchor.constraint(equalTo: self.trailingAnchor), ]) switchMask = iv switchMask?.isHidden = self.isHidden } }