如何使用步进滑块在滑块拇指上添加 UILabel?
how to add UILabel over slider thumb with step slider?
我有一个包含 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 固定在故事板中,当我在滑块中移动拇指时,一毫秒后,它又回到了固定位置!我该如何解决?!
我尝试以编程方式添加我的 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)
这个解决方案适合我:
@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)
}
我已经创建了 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)
}
}
你可以这样使用它:-
第 1 步:- 在 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()
}
我有一个包含 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 固定在故事板中,当我在滑块中移动拇指时,一毫秒后,它又回到了固定位置!我该如何解决?!
我尝试以编程方式添加我的 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)
这个解决方案适合我:
@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)
}
我已经创建了 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)
}
}
你可以这样使用它:-
第 1 步:- 在 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()
}