如何使用步进滑块在滑块拇指上添加 UILabel?

Posted

技术标签:

【中文标题】如何使用步进滑块在滑块拇指上添加 UILabel?【英文标题】:how to add UILabel over slider thumb with step slider? 【发布时间】:2018-05-20 09:15:48 【问题描述】:

我有一个有 5 个部分的滑块,我想为这些部分跨过它!我这样做了:

@IBAction func changeCostSlider(_ sender: UISlider) 
    sender.value = roundf(costSlider.value)

我还想在滑块的拇指上添加一个标签,我尝试将此代码添加到上面的代码中:

let trackRect: CGRect  = costSlider.trackRect(forBounds: costSlider.bounds)
    let thumbRect: CGRect  = costSlider.thumbRect(forBounds: costSlider.bounds , trackRect: trackRect, value: costSlider.value)
    let x = thumbRect.origin.x + costSlider.frame.origin.x
    let y = costSlider.frame.origin.y - 20
    sliderLabel.center = CGPoint(x: x, y: y)

但是当我移动滑块时,我的标签会从我在情节提要中放置标签的位置跳出,并且有一些滞后!有人对如何将此标签添加到我的步进滑块并正常工作有任何建议吗?!

我认为我的问题是我将 UILable 固定在 storyborad 中,当我在滑块中移动拇指时,一毫秒,它会回到固定位置!怎么解决?!

我尝试以编程方式添加我的 UILabel,但在我触摸拇指之前它无法正常工作!它是如何完成的:

var sliderLableP = UILabel()
@IBAction func changeCostSlider(_ sender: UISlider) 
    sender.value = roundf(costSlider.value)
    print(costSlider.value)
    let trackRect: CGRect  = costSlider.trackRect(forBounds: costSlider.bounds)
    let thumbRect: CGRect  = costSlider.thumbRect(forBounds: costSlider.bounds , trackRect: trackRect, value: costSlider.value)
    let x = thumbRect.origin.x + costSlider.frame.origin.x
    let y = costSlider.frame.origin.y - 20
    sliderLableP.center = CGPoint(x: x, y: y)

在我的 viewDidLoad 中我添加了这个:

sliderLableP = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 20))
    let trackRect: CGRect  = costSlider.trackRect(forBounds: costSlider.bounds)
    let thumbRect: CGRect  = costSlider.thumbRect(forBounds: costSlider.bounds , trackRect: trackRect, value: costSlider.value)
    let x = thumbRect.origin.x + costSlider.frame.origin.x
    let y = costSlider.frame.origin.y - 20
    sliderLableP.center = CGPoint(x: x, y: y)
    sliderLableP.textAlignment = NSTextAlignment.center
    sliderLableP.textColor = UIColor.blue
    self.containerView.addSubview(sliderLableP)
    containerView.bringSubview(toFront: sliderLableP)

【问题讨论】:

【参考方案1】:

这个解决方案对我有用:

@IBAction func changeCostSlider(_ sender: UISlider) 
    sender.value = roundf(sender.value)

    let trackRect = sender.trackRect(forBounds: sender.frame)
    let thumbRect = sender.thumbRect(forBounds: sender.bounds, trackRect: trackRect, value: sender.value)
    self.sliderLabel.center = CGPoint(x: thumbRect.midX, y: self.sliderLabel.center.y)

【讨论】:

我认为我的问题是我将 UILable 固定在 storyborad 中,当我在滑块中移动拇指时,它会回到固定位置!你能帮我修一下吗?! 你在使用自动布局吗? 不!我用我自己的约束来固定我的标签!我尝试以编程方式添加我的标签,跳转问题解决了,但我的标签直到我触摸拇指并移动它才显示! :( 请告诉我你是如何以编程方式添加标签的 我已将我所做的添加到我的代码中!非常感谢您的时间和帮助!【参考方案2】:

我创建了 UISlider 的扩展。

extension UISlider 

    func setThumbValueWithLabel() -> CGPoint 
    
        let slidertTrack : CGRect = self.trackRect(forBounds: self.bounds)
        let sliderFrm : CGRect = self.thumbRect(forBounds: self.bounds, trackRect: slidertTrack, value: self.value)
        return CGPoint(x: sliderFrm.origin.x + self.frame.origin.x + 8, y: self.frame.origin.y - 20)
    

你可以这样使用它:-

step1:- 在 UISlider 的 .valueChanged 属性上添加一个目标动作。

self.slider.addTarget(self, action: #selector(sliderValueChanged),for: .valueChanged)
    

step2:- 在sliderValueChanged() 方法上,使用扩展方法。

@objc private func sliderValueChanged(_ sender: UISlider) 
    
    self.yourLabel.text = Int(sender.value).description
    self.yourLabel.center = sender.setThumbValueWithLabel() 

【讨论】:

以上是关于如何使用步进滑块在滑块拇指上添加 UILabel?的主要内容,如果未能解决你的问题,请参考以下文章

Jquery滑块在按钮单击时更新滑块位置时停止滑动

如何在不移动滑块拇指色调的情况下将多种颜色应用于uislider轨道?

如何垂直移动带有滑块的UILabel

如何在滑块上创建这种效果?

如何将另一个图像添加到滑块的拇指或如何添加两个拇指图像?

flexslider 中的 GIF 滑块,如何仅在滑块上开始 gif