How to change the size of UISlider thumb image in iOS?

Question

I want to set the size of UISlider thumb in 32x32, but the thumb didn't show correct size or correct shape.

How can I solve it?

code1:try to resize UIImage

let slider1 = UISlider(frame: CGRect(x:140, y:140, width:274/2, height:32))
slider1.minimumValue = 0
slider1.maximumValue = 1
slider1.value = 0.5
slider1.minimumTrackTintColor = UIColor.clear

let upThumbImage : UIImage = UIImage(named: "Handle_64x64")!
let size = CGSize(width: 32, height: 32)
UIGraphicsBeginImageContext(size)
upThumbImage.draw(in: CGRect(x:0, y:0, width:size.width, height:size.height))
let resizeImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

slider1.setThumbImage(resizeImage, for: .normal)

slider1.addTarget(self, action: #selector(self. slider1Changed(sender:)), for: UIControlEvents.valueChanged)
upView.addSubview(slider1)

result:size is correct, but the resolution of image is bad

code2:try to set image as UIColor

let slider1 = UISlider(frame: CGRect(x:140, y:140, width:274/2, height:32))
slider1.minimumValue = 0
slider1.maximumValue = 1
slider1.value = 0.5
slider1.minimumTrackTintColor = UIColor.clear

let thumbTintColor = UIColor(patternImage: UIImage(named: "Handle_64x64")!)
slider1.thumbTintColor = thumbTintColor

slider1.addTarget(self, action: #selector(self. slider1Changed(sender:)), for: UIControlEvents.valueChanged)
upView.addSubview(slider1)

result:size and shape are not correct

code3:use image that original size is 32x32 (This time I use different image, but the size is 32x32)

let slider1 = UISlider(frame: CGRect(x:140, y:140, width:274/2, height:32))
    slider1.minimumValue = 0
    slider1.maximumValue = 1
    slider1.value = 0.5
    slider1.minimumTrackTintColor = UIColor.clear

    let thumbTintColor = UIColor(patternImage: UIImage(named: "Handle_32x32")!)
    slider1.thumbTintColor = thumbTintColor

    slider1.addTarget(self, action: #selector(self. slider1Changed(sender:)), for: UIControlEvents.valueChanged)
    upView.addSubview(slider1)

result:size and shape are not correct

Your second code simply uses the image as a color and that probably is not the way to go. My feeling is that your first code will give you what you want, you just need to tweak it a bit. Is your image by chance 64 x 64 as the name suggests? If yes, and you are re-drawing it as 32 x 32 as your code indicates, the scaling down probably is the reason for the bad quality image. You should be able to fix that in several different ways - one would be to try a 32 x 32 original image. — Fahim, Mar 27 '17 at 02:06
For more information about the image scaling and the quality issue, take a look at the following SO thread - http://stackoverflow.com/questions/14729021/drawinrect-losing-quality-of-image-resolution — Fahim, Mar 27 '17 at 02:07
@Fahim (again! :-)) has a useful comment. I'll only add that when setting a thumb image like you are, consider making that image an asset - 1X, 2X, 3X. Besides scaling as suggested, remember about Retina devices. (A solid cold works well no matter what, but you are working with something that is not.) — , Mar 27 '17 at 02:28
Thank you for your comments. I updated code (code3) that I set new image (original size is 32x32). But it didn't work well... — K.K.D, Mar 27 '17 at 03:18
"result:size is correct, but the resolution of image is bad" Because you are calling `UIGraphicsBeginImageContext`. That is a terrible idea. Never never do that! Call `UIGraphicsBeginImageContextWithOptions`! — matt, Mar 27 '17 at 03:23
@matt thank you for your comment. I replaced UIGraphicsBeginImageContext to UIGraphicsBeginImageContextWithOptions(size, false, 1.0). But the resolution is still bad. Is this code wrong? — K.K.D, Mar 27 '17 at 03:37

How to change the size of UISlider thumb image in iOS?

0 Answers0