是否可以在UISlider的拇指图像上添加标签？

Question

我想在滑块的拇指上添加一个标签,该标签应该显示滑块的值,并且当拇指向右侧拖动时也会改变.可能吗？？

任何意见或建议将不胜感激.

Answer 1

您可以执行与此示例类似的操作,将文本直接绘制到您的拇指图像.这是一个粗略的例子,因此您需要更改它以使您的项目有意义.

- (IBAction)sliderValueChanged:(id)sender {
    UISlider *aSlider = (UISlider *)sender;
    NSString *strForThumbImage = 
     [NSString stringWithFormat:@"%.0f", aSlider.value * 100]
    UIImage *thumbImage = [self addText:self.thumbImage 
                                   text:strForThumbImage];
    [aSlider setThumbImage:thumbImage forState:aSlider.state];
}

//Add text to UIImage 
-(UIImage *)addText:(UIImage *)img text:(NSString *)text1{ 
    int w = img.size.width; 
    int h = img.size.height; 
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 
    CGContextRef context = CGBitmapContextCreate( NULL, 
                                                  w, 
                                                  h, 
                                                  8, 
                                                  4 * w, 
                                                  colorSpace, 
                                                  kCGImageAlphaPremultipliedFirst); 
    CGContextDrawImage(context, CGRectMake(0, 0, w, h), img.CGImage); 

    char* text= (char *)[text1 cStringUsingEncoding:NSASCIIStringEncoding]; 
    CGContextSelectFont(context, "Arial",12, kCGEncodingMacRoman); 
    CGContextSetTextDrawingMode(context, kCGTextFill); 
    CGContextSetRGBFillColor(context, 0, 0, 0, 1); 
    CGContextShowTextAtPoint(context,3,8,text, strlen(text)); 
    CGImageRef imgCombined = CGBitmapContextCreateImage(context); 

    CGContextRelease(context); 
    CGColorSpaceRelease(colorSpace); 

    UIImage *retImage = [UIImage imageWithCGImage:imgCombined]; 
    CGImageRelease(imgCombined); 

    return retImage; 
}

Answer 2

我从滑块(UIImageView)抓取拇指图像并添加我的标签.干净整洁.

UIImageView *handleView = [slider.subviews lastObject];
UILabel *label = [[UILabel alloc] initWithFrame:handleView.bounds];
label.backgroundColor = [UIColor clearColor];
label.textAlignment = NSTextAlignmentCenter;
[handleView addSubview:label];
self.sliderLabel = label;

然后在需要时更改label.text.

注意:UISlider的子视图顺序将来可能会发生变化,但拇指不太可能不再是最顶层的视图,因为它始终是滑块中的主要交互点.

Swift 3 - 更详细的例子(在IB中链接你的滑块)

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var slider: UISlider!
    var sliderLabel: UILabel?

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        if let handleView = slider.subviews.last as? UIImageView {
            let label = UILabel(frame: handleView.bounds)
            label.backgroundColor = .clear
            label.textAlignment = .center
            handleView.addSubview(label)

            self.sliderLabel = label
            //set label font, size, color, etc.
            label.text = "!!"
        }
    }
}

Answer 3

Swift 3.2中自定义类的简单实现。这对我来说很好。

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
    thumbTextLabel.text = Double(value).roundTo(places: 1).description
}

override func awakeFromNib() {
    super.awakeFromNib()
    addSubview(thumbTextLabel)
    thumbTextLabel.textAlignment = .center
    thumbTextLabel.layer.zPosition = layer.zPosition + 1
}
}

希望对您有所帮助:)