CODEWITHSUNDEEP
iphoneobjective-cios7uiimageviewuiswitch
Krishna1251
Krishna1251

Reputation: 177

how to change the thumb image in UISwitch in ios7?

i need a to change the Thumb image of UISwitch in ios 7, i googled a lot and find nothing..any suggestions or code will be appreciated,below is my required functionality.

enter image description here

enter image description here

i need to change Default UISwitch Thumb image to my Image.

Thanks in Advance.

Upvotes: 11

Views: 8495

Answers (4)

Prabh Kaur
Prabh Kaur

Reputation: 36

I have created a switch class named ImageSwitch (You can simply download and drag and drop that class into your code or you can refer below)

import UIKit

class ImageSwitch: UISwitch {
    
    @IBInspectable var thumbImage: UIImage? {
        didSet {
            updateView()
        }
    }
    
    var thumbSize = CGSize.zero
    var onPoint = CGPoint.zero
    var offPoint = CGPoint.zero
    var imageView: UIImageView?
    
    
    func updateView() {
        if let thumbImage = thumbImage {
            imageView = UIImageView(image: thumbImage)
            imageView?.backgroundColor = .white
            imageView?.contentMode = .center
            thumbSize = CGSize(width: self.bounds.size.height - 2, height: self.bounds.height - 2)
            let yPostition = (self.bounds.size.height - thumbSize.height) / 2
            onPoint = CGPoint(x: self.bounds.size.width - thumbSize.width - 1, y: yPostition)
            offPoint = CGPoint(x: 1, y: yPostition)
            imageView?.frame = CGRect(origin: offPoint, size: thumbSize)
            imageView?.layer.cornerRadius = thumbSize.height * 0.5
            self.addSubview(imageView ?? UIImageView(image: thumbImage))
        }
    }
    
    func updateThumbPosition() {
        DispatchQueue.main.async {
            self.imageView?.frame = CGRect(origin: self.isOn ? self.onPoint : self.offPoint, size: self.thumbSize)
        }
    }
}

Add an UISwitch to the storyboard and assign its Custom Class to ImageSwitch. Assign the image you want to set as a thumb image to switch.

Add IBOutlet of the same in your viewController and add its target for the valueChanged event and call ImageSwitch’s updateThumbPosition() to update the position of the thumb(as its name suggests) whenever the user clicks on the switch to turn it off/on.

imageSwitch.addTarget(self, action: #selector(switchValueDidChange(_:)), for: .valueChanged)


@objc func switchValueDidChange(_ sender: ImageSwitch!) {
sender.updateThumbPosition()
//Other things you want to do....
}

And that's it! You can also check the same here.

Upvotes: 0

CoolPineapple
CoolPineapple

Reputation: 385

I know this is an old question, but just in case anyone else comes looking for a solution to this, I've come up with a way to do it that's only mildly hacky.

You can access the image view used for the thumb using this sequence:

(mySlider.subviews.first?.subviews.last?.subviews.last as? UIImageView)

This means you can set the thumb image to any custom image you want by:

(mySlider.subviews.first?.subviews.last?.subviews.last as? UIImageView)?.image = UIImage(named: "myCustomImage")

Now here's the hacky part - that default image view isn't one solid image, it's an image with a transparent background and an off-center solid colored circle. So if you want your thumb image to match the size and placement of the default thumb image, your image needs to match up with this screenshot (just in terms of placement of the circle - size of the image is irrelevant):

enter image description here

The gray part of the image should be transparent and the white part should be whatever you want for the thumb. Then set the image using the above code and it's good to go!

Upvotes: 0

Johnykutty
Johnykutty

Reputation: 12859

You can do its by a tricky method.

[switchControl setThumbTintColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"Thumb.png"]]];

The Thumb.png should be in correct size. According to me its around 50X50 for retina screen. Note that you can't change the size of switch. That is it can't be bigger that its actual size.

If you want a control that can change its size, you need to create your own control

Upvotes: 6

Fogmeister
Fogmeister

Reputation: 77661

To get something like you have in your image you'll have to create that yourself from scratch.

There are various options. You could use a composite view using a couple images one for the background and one for the circle.

I'd probably use PaintCode to draw it as a single view and then edit it to make it dynamic.

I have an example of doing this on my blog... http://www.oliverfoggin.com/paint-code-slider/

Upvotes: 0

Related Questions