带有自定义缩略图图像和文本的滑块

Question

嗨，

我正在尝试通过更改缩略图图像并在图片上添加标签来自定义滑块。为此，在我看来，我为滑块拇指设置了图像：

class SliderView: NibLoadingView {
    @IBOutlet weak var slider: ThumbTextSlider!
   
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        contentView = legacyLoadXib()
        setup()
    }
    
    override func setup() {
        super.setup()
        
        self.slider.setThumbImage(UIImage(named: "onb_cc_slider_thumb")!, for: .normal)
        self.slider.thumbTextLabel.font = UIFont(name: Fonts.SanFranciscoDisplayRegular, size: 14)
    }
}

在 ThumbTextSlider class 中，我将文本标签设置如下：

class ThumbTextSlider: UISlider {
    var thumbTextLabel: UILabel = UILabel()
    
    private var thumbFrame: CGRect {
        return thumbRect(forBounds: bounds, trackRect: trackRect(forBounds: bounds), value: value)
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        thumbTextLabel.frame = thumbFrame
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        addSubview(thumbTextLabel)
        thumbTextLabel.layer.zPosition = layer.zPosition + 1
    }
}

我做测试的时候结果有点不一样

如何，我可以解决这个问题吗？预期结果：亲切的问候

Answer 1

这篇class可能会对您有所帮助。在 class 而不是我创建的图像中，您可以用拇指图像替换图像。

class ThumbTextSlider: UISlider {
    private var thumbTextLabel: UILabel = UILabel()
    
    private var thumbFrame: CGRect {
        return thumbRect(forBounds: bounds, trackRect: trackRect(forBounds: bounds), value: value)
    }
    
    private lazy var thumbView: UIView = {
        let thumb = UIView()
        return thumb
    }()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        thumbTextLabel.frame = CGRect(x: thumbFrame.origin.x, y: thumbFrame.origin.y, width: thumbFrame.size.width, height: thumbFrame.size.height)
        self.setValue()
    }
    
    private func setValue() {
        thumbTextLabel.text = self.value.description
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
        addSubview(thumbTextLabel)
        thumbTextLabel.textAlignment = .center
        thumbTextLabel.textColor = .blue
        thumbTextLabel.adjustsFontSizeToFitWidth = true
        thumbTextLabel.layer.zPosition = layer.zPosition + 1
        
        let thumb = thumbImage()
        setThumbImage(thumb, for: .normal)
    }
    
    private func thumbImage() -> UIImage {
        let width = 100
        thumbView.frame = CGRect(x: 0, y: 15, width: width, height: 30)
        thumbView.layer.cornerRadius = 15
        
        let renderer = UIGraphicsImageRenderer(bounds: thumbView.bounds)
        return renderer.image { rendererContext in
            rendererContext.cgContext.setShadow(offset: .zero, blur: 5, color: UIColor.black.cgColor)
            thumbView.backgroundColor = .red
            thumbView.layer.render(in: rendererContext.cgContext)
        }
    }
    
    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(origin: bounds.origin, size: CGSize(width: bounds.width, height: 5))
    }
}

带有自定义缩略图图像和文本的滑块

Slider with custom thumb image and text

slider

uiview

uislider

swift