UISlider 与 ProgressView 相结合 [英] UISlider with ProgressView combined

问题描述

有没有一种苹果自制的方法来获取带有 ProgressView 的 UISlider.这被许多流媒体应用程序使用，例如本机 quicktimeplayer 或 youtube.(只是为了确定:我只对可视化感兴趣)

Is there an apple-house-made way to get a UISlider with a ProgressView. This is used by many streaming applications e.g. native quicktimeplayer or youtube. (Just to be sure: i'm only in the visualization interested)

干杯西蒙

推荐答案

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

Here's a simple version of what you're describing.

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

It is "simple" in the sense that I didn't bother trying to add the shading and other subtleties. But it's easy to construct and you can tweak it to draw in a more subtle way if you like. For example, you could make your own image and use it as the slider's thumb.

这实际上是一个位于绘制温度计的 UIView 子类 (MyTherm) 之上的 UISlider 子类，以及绘制数字的两个 UILabel.

This is actually a UISlider subclass lying on top of a UIView subclass (MyTherm) that draws the thermometer, plus two UILabels that draw the numbers.

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

The UISlider subclass eliminates the built-in track, so that the thermometer behind it shows through. But the UISlider's thumb (knob) is still draggable in the normal way, and you can set it to a custom image, get the Value Changed event when the user drags it, and so on. Here is the code for the UISlider subclass that eliminates its own track:

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

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

The thermometer is an instance of a custom UIView subclass, MyTherm. I instantiated it in the nib and unchecked its Opaque and gave it a background color of Clear Color. It has a value property so it knows how much to fill the thermometer. Here's its drawRect: code:

- (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 实例的 value 更改为 0 到 1 之间的数字，并使用 setNeedsDisplay 告诉它重新绘制自身.

To change the thermometer value, change the MyTherm instance's value to a number between 0 and 1, and tell it to redraw itself with setNeedsDisplay.

这篇关于UISlider 与 ProgressView 相结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！