结合了ProgressView的UISlider

Question

是否有苹果屋制作的方式来获得带有ProgressView的UISlider.这被许多流应用程序使用,例如本机quicktimeplayer或youtube.(只是为了确定:我只对可视化感兴趣)

西蒙欢呼

Answer 1

这是您所描述的简单版本.

从某种意义上来说,它是"简单的",我并不打算尝试添加阴影和其他细微之处.但它很容易构建,如果你愿意,你可以调整它以更微妙的方式绘制.例如,您可以制作自己的图像并将其用作滑块的拇指.

这实际上是一个UISlider子类,它位于绘制温度计的UIView子类(MyTherm)之上,另外还有两个绘制数字的UILabel.

UISlider子类消除了内置轨道,因此它后面的温度计显示出来.但UISlider的拇指(旋钮)仍然可以按正常方式拖动,您可以将其设置为自定义图像,当用户拖动它时获取Value Changed事件,依此类推.以下是UISlider子类的代码,它消除了自己的轨道:

- (CGRect)trackRectForBounds:(CGRect)bounds {
    CGRect result = [super trackRectForBounds:bounds];
    result.size.height = 0;
    return result;
}

温度计是自定义UIView子类MyTherm的一个实例.我在笔尖中实例化它并取消选中它的不透明并给它一个Clear Color的背景颜色.它有一个value属性,所以它知道要填充温度计多少.这是它的drawRect:代码:

- (void)drawRect:(CGRect)rect {
    CGContextRef c = UIGraphicsGetCurrentContext();
    [[UIColor whiteColor] set];
    CGFloat ins = 2.0;
    CGRect r = CGRectInset(self.bounds, ins, ins);
    CGFloat radius = r.size.height / 2.0;
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, CGRectGetMaxX(r) - radius, ins);
    CGPathAddArc(path, NULL, radius+ins, radius+ins, radius, -M_PI/2.0, M_PI/2.0, true);
    CGPathAddArc(path, NULL, CGRectGetMaxX(r) - radius, radius+ins, radius, M_PI/2.0, -M_PI/2.0, true);
    CGPathCloseSubpath(path);
    CGContextAddPath(c, path);
    CGContextSetLineWidth(c, 2);
    CGContextStrokePath(c);
    CGContextAddPath(c, path);
    CGContextClip(c);
    CGContextFillRect(c, CGRectMake(r.origin.x, r.origin.y, r.size.width * self.value, r.size.height));
}

要更改温度计值,请将MyTherm实例更改为value0到1之间的数字,并告诉它重绘自身setNeedsDisplay.

Answer 2

这可以使用标准控件.

在Interface Builder中,UISlider立即将您放在您的顶部UIProgressView并使它们大小相同.

在UISlider背景水平线上称为轨道,诀窍是使其不可见.我们这样做是有一个透明的PNG和UISlider方法setMinimumTrackImage:forState:和setMaximumTrackImage:forState:.

在viewDidLoad视图控制器的方法中添加:

[self.slider setMinimumTrackImage:[UIImage imageNamed:@"transparent.png"] forState:UIControlStateNormal];
[self.slider setMaximumTrackImage:[UIImage imageNamed:@"transparent.png"] forState:UIControlStateNormal];

在哪里self.slider指你的UISlider.

我已经在Xcode中测试了代码,这将为您提供一个带有独立进度条的滑块.

Answer 3

适合我设计的解决方案：

class SliderBuffering:UISlider {
    let bufferProgress =  UIProgressView(progressViewStyle: .Default)

    override init (frame : CGRect) {
        super.init(frame : frame)
    }

    convenience init () {
        self.init(frame:CGRect.zero)
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    func setup() {
        self.minimumTrackTintColor = UIColor.clearColor()
        self.maximumTrackTintColor = UIColor.clearColor()
        bufferProgress.backgroundColor = UIColor.clearColor()
        bufferProgress.userInteractionEnabled = false
        bufferProgress.progress = 0.0
        bufferProgress.progressTintColor = UIColor.lightGrayColor().colorWithAlphaComponent(0.5)
        bufferProgress.trackTintColor = UIColor.blackColor().colorWithAlphaComponent(0.5)
        self.addSubview(bufferProgress)
    }
}