在 UISlider Thumb 上的 UILabel

Posted 2023-03-13

【中文标题】在 UISlider Thumb 上的 UILabel

【英文标题】：UILabel Over UISlider Thumb

【发布时间】：2010-08-18 10:10:59

【问题描述】：

如何将 UILabel 放在 UISlider 的拇指上...这样当我移动拇指时...UILabel 也会移动...就像在拇指上一样...

有什么想法吗？？

【参考方案1】：

试试这个

yourLabel = [[UILabel alloc]initWithFrame:....];

//Call this method on Slider value change event

-(void)sliderValueChanged
    CGRect trackRect = [self.slider trackRectForBounds:self.slider.bounds];
    CGRect thumbRect = [self.slider thumbRectForBounds:self.slider.bounds
                               trackRect:trackRect
                                   value:self.slider.value];

    yourLabel.center = CGPointMake(thumbRect.origin.x + self.slider.frame.origin.x,  self.slider.frame.origin.y - 20);

我可以通过使用这个 sn-p 获得最准确的值。

【讨论】：

+1 它将移动标签设置在视图的顶部。您可以为自定义位置调整 lbl.center.y..

感谢您的回答，此行必须是：yourLabel.center = CGPointMake(thumbRect.origin.x + self.slider.frame.origin.x + yourLabel.frame.size.width / 2 .f, self.slider.frame.origin.y - 20);虽然

【参考方案2】：

每个公共 API 都无法使用“旋钮”，因此连接它的机会不大 - 如果它根本就是一个子视图，而不是直接绘制。

因此，您应该将标签添加到与滑块相同的视图中（确保稍后添加它，以便显示在 它之上）。然后，您可以侦听值更改事件并相应地放置标签。你首先需要弄清楚的是端点之间的线性缩放，但应该不会太难。

用代码编辑：

yourLabel = [[UILabel alloc]initWithFrame:....];
// .. configure label
[[yourSlider superview] addSubview:yourLabel];
[yourSlider addTarget:self action:@selector(adjustLabelForSlider:) forControlEvents:UIControlEventValueChanged];


-(void)adjustLabelForSlider:(id)slider

    float value = slider.value;
    float min = slider.minimumValue;
    float max = slider.maximumValue;

    CGFloat newX = ...; // Calculate based on yourSlider.frame and value, min, and max
    CGFloat newY = ...;

    [yourLabel setCenter:CGPointMake(newX,newY)];

注意：未经测试的代码;-)

【参考方案3】：

与 swift3 的答案相同：

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

【参考方案4】：

extension UIImage 
    class func imageWithLabel(_ label: UILabel) -> UIImage 
        UIGraphicsBeginImageContextWithOptions(label.bounds.size, false, 0)
        defer  UIGraphicsEndImageContext() 
        label.layer.render(in: UIGraphicsGetCurrentContext()!)
        return UIGraphicsGetImageFromCurrentImageContext() ?? UIImage()
    


class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate, UITextFieldDelegate, UITextViewDelegate, UIPickerViewDelegate, UIPickerViewDataSource, UIScrollViewDelegate


    func maskRoundedImage(image: UIImage, radius: CGFloat) -> UIImage 
           let imageView: UIImageView = UIImageView(image: image)
           let layer = imageView.layer
           layer.masksToBounds = true
           layer.cornerRadius = radius
           UIGraphicsBeginImageContext(imageView.bounds.size)
           layer.render(in: UIGraphicsGetCurrentContext()!)
           let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
           UIGraphicsEndImageContext()
           return roundedImage!
    
    
    override func viewWillLayoutSubviews() 
        super.viewWillLayoutSubviews()

            let label = UILabel(frame: CGRect(x: 0, y: 0, width: 28, height: 28))
            label.backgroundColor = .black
            label.textAlignment = .center
            label.font =  label.font.withSize(12)
            label.text = String(Int(round( backlightSlider.value * 100 )))
            label.textColor = .white
            var image = UIImage.imageWithLabel(label)
            image = maskRoundedImage(image: image, radius: 14.0)
            backlightSlider.setThumbImage(image, for: .normal)

【讨论】：

感谢您的贡献，但下次可能会添加一些文字。

【参考方案5】：

只需在滑块的拇指上添加一个图像视图，在图像视图上添加一个标签

- (IBAction)valueChangedSlider:(id)sender 
handleView = [_slider.subviews lastObject];
label = [[UILabel alloc] initWithFrame:handleView.bounds];
label = (UILabel*)[handleView viewWithTag:1000];

if (label==nil) 

    label = [[UILabel alloc] initWithFrame:handleView.bounds];

    label.tag = 1000;

    [label setFont:[UIFont systemFontOfSize:12]];
    label.textColor = [UIColor redColor];
    label.backgroundColor = [UIColor clearColor];

    label.textAlignment = NSTextAlignmentCenter;

    [handleView addSubview:label];



label.text = [NSString stringWithFormat:@"%0.2f", self.slider.value];

【参考方案6】：

如果有人在 Swift 中寻找答案，请在此处查看我的答案：- Put Label over UISlider Thumb

它会像魅力一样工作:)

【参考方案7】：

这可能会很有帮助... How to get the center of the thumb image of UISlider