0

I'm making a custom UISlider with thumb like this:

enter image description here

But here is what I get:

enter image description here

I want my thumb show with full height of the grey container, my image has size 160x160 for @2x. But when set into UISlider it doesn't act like that. Here is the view debugging:

enter image description hereenter image description here

I'm use a custom class for this UISlider, where's wrong in the code?:

class CustomSlider: UISlider {

    @IBInspectable var trackHeight: CGFloat = 0.0001

//    @IBInspectable var thumbRadius: CGFloat = 20

    // Custom thumb view which will be converted to UIImage
    // and set as thumb. You can customize it's colors, border, etc.
    private lazy var thumbView: UIView = {
        let thumb = UIImageView()
//        thumb.backgroundColor = .white
//        thumb.layer.borderWidth = 0.4
//        thumb.layer.borderColor = UIColor.white.cgColor
        thumb.image = UIImage(named: "icon_slider")
        
        return thumb
    }()

    override func awakeFromNib() {
        super.awakeFromNib()
        let thumb = thumbImage()

        setThumbImage(thumb, for: .normal)
    }

    private func thumbImage() -> UIImage {

        thumbView.frame = CGRect(x: 0, y: 50/2, width: 50, height: 50)
//        thumbView.dropShadow(color: .red, opacity: 1, offSet: CGSize(width: -1, height: 1), radius: 3, scale: true)
        thumbView.layer.cornerRadius = 4
        thumbView.layer.masksToBounds = true
        // Convert thumbView to UIImage
        if #available(iOS 10.0, *) {
            let renderer = UIGraphicsImageRenderer(bounds: thumbView.bounds)
            return renderer.image { rendererContext in
                thumbView.layer.render(in: rendererContext.cgContext)
            }
        } else {
            UIGraphicsBeginImageContext(thumbView.frame.size)
            self.layer.render(in:UIGraphicsGetCurrentContext()!)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return UIImage(cgImage: image!.cgImage!)
        }
        
    }

    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        // Set custom track height
        // As seen here: https://stackoverflow.com/a/49428606/7235585
        var newRect = super.trackRect(forBounds: bounds)
        newRect.size.height = trackHeight
        return newRect
    }

}
Bad_Developer
  • 537
  • 5
  • 20
  • “my image has size 160x160 for @2x” But you’ve set the thumb view to 50x50. Hard to see what the surprise is here. Can you explain? – matt Aug 07 '20 at 16:33
  • because the container I've put the slider has height = 50. So I set the frame of thumbView same to it. The frame is fit with container size, but the image inside doesn't – Bad_Developer Aug 07 '20 at 16:41
  • Could it because of the weird part where you `thumbView.layer.render(in:` into itself? If your goal is to downsize the image to 50x50, that is not how. – matt Aug 07 '20 at 16:44
  • oh sorry, I have to update my question. And yes, my goal is fit the image with the frame of thumbView – Bad_Developer Aug 07 '20 at 17:05
  • So just draw the image into the context at the size of the context (50 by 50). – matt Aug 07 '20 at 17:12
  • I tried, but the image still not fit with the frame – Bad_Developer Aug 08 '20 at 01:49

0 Answers0