Swift 具有自定义拇指图像和文本的滑块

Hy

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

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 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
    }
}

当我做测试时，结果有点不同

如何解决这个问题？ 预期结果：

---

亲切问候

这门课可能会对你有所帮助。在类中，我创建了一个图像，你们可以用你们的拇指图像代替它

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))
    }
}

---

这门课可能会对你有所帮助。在类中，我创建了一个图像，你们可以用你们的拇指图像代替它

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))
    }
}

---

请附上desire result slider图像好吗？desire设计是带有文本的正确图像。问题是左侧的用户仍然可以看到Stanard拇指和图像behindI附加了预期结果您可以附加Desired result slider图像吗？Desired design是带有文本的右侧图像。问题是左边的用户仍然可以看到Stanard拇指和behindI附加的图像预期结果非常感谢您的帮助。我想我还是做错了什么。1.图像有边框。2.在滑块的左边是另一个图像。你能附上你的输出结果吗？非常感谢你的帮助。我想我还是做错了什么。1.图像有边框。2.在滑块的左侧是另一个图像。您可以附加输出结果吗？