UISwitch set on/off Image

Question

I want to set my Switch like this:

But I try in ios9 , it does not work. I saw in apple UISwitch Class Reference. It says that :

Discussion In iOS 7, this property has no effect.

How about iOS 9? Any one success?

My Code:

switch1 = UISwitch(frame:CGRectMake(self.view.frame.width/2 - 20, 400, 10, 100))
switch1.on = true
switch1.onTintColor = UIColor.lightGrayColor()
switch1.tintColor = UIColor.greenColor()
switch1.thumbTintColor = UIColor.blackColor()

//set on/off image

switch1.onImage = UIImage(named: "on-switch")
switch1.offImage = UIImage(named: "off-switch")

rob mayoff · Accepted Answer · 2020-02-04T16:52:26.130

25

Use a UIButton instead.

let switchButton = UIButton(type: .Custom)
switchButton.selected = true
switchButton.setImage(UIImage(named: "on-switch"), forState: .Selected)
switchButton.setImage(UIImage(named: "off-switch"), forState: .Normal)

Use switchButton.isSelected instead of switch1.on. You'll have to toggle switchButton.isSelected when it is tapped, which you can do like this:

switchButton.isSelected.toggle()

edited Feb 04 '20 at 16:52

answered Apr 29 '16 at 03:10

rob mayoff

375,296
67
796
848

Thanks for this suggestion! It's a bit misleading to have the UISwitch onImage and offImage in Auto Layout, without any warning. – Greg Hilston Aug 31 '17 at 14:03
Wish i bumped into this earlier instead of spending ages trying to use 3rd party library or doing my own ahah, works like a charm ! – thibaut noah Jul 19 '19 at 12:55

score 1 · Answer 2 · answered Jul 06 '20 at 09:39

For iOS 13, you could do this way:

   let switcher = UISwitch()
    switcher.addTarget(self, action: #selector(pressed), for: .valueChanged)
    

 @objc func pressed(sender: UISwitch) {
        let color = UIColor(patternImage: UIImage(named: sender.isOn ? "on.png": "off.png")!)
        if sender.isOn {
            sender.onTintColor = color
        } else {
            sender.tintColor = color
            sender.subviews[0].subviews[0].backgroundColor = color
        }
    }

NOTE: your image should look like:

Then the final result is:

score 0 · Answer 3 · answered Feb 04 '20 at 16:54

Not an exact answer to your question, but if you want a completely custom button switch programmatically (that you can add text to), this will work too:

 import UIKit

 class RDHiddenVisibleButton: UIButton {

    // Hidden / Visible Button Function
    var isOn = false

    override init(frame: CGRect) {
        super.init(frame: frame)
        initButton()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        initButton()
    }

    func initButton() {
        layer.borderWidth = 2.0
        layer.borderColor = Colors.radiusGreen.cgColor
        layer.cornerRadius = frame.size.height/2

        setTitleColor(Colors.radiusGreen, for: .normal)
        addTarget(self, action: #selector(RDHiddenVisibleButton.buttonPressed), for: .touchUpInside)

    }

@objc func buttonPressed() {
        activateButton(bool: !isOn)
    }

    func activateButton(bool: Bool) {

        isOn = bool

        let color = bool ? Colors.radiusGreen : .clear
        let title = bool ? "Hidden" : "Visible"
        let titleColor = bool ? . white : Colors.radiusGreen

        setTitle(title, for: .normal)
        setTitleColor(titleColor, for: .normal)
        backgroundColor = color
    }
}

UISwitch set on/off Image

3 Answers3

Linked

Related