我需要一个手柄上有值的 UISlider [关闭]

Question

我需要在我的 iOS 应用程序中创建一个UISlider，并使用手柄中滑块的值。

我的意思的演示图像：

有没有可以做到的豆荚？

Answer 1

您不需要任何第三方控件，也不需要自己创建滑块。您仍然可以使用 UISlider 并根据需要对其进行自定义:)

第 1 步：

正如我们所见，我们需要设置最小轨道的颜色，因为它不是默认的白色，不是吗？？？它有点橙色，我不知道它的确切冷却器，因此将其设置为红色。你设置任何你想要的颜色:)

但是 UISlider 的 setMinimumTrackImage 期望 UIImage 不是颜色。所以让我们从颜色创建一个 UIImage 。我将它创建为一个惰性变量，因为我希望它只创建一次:)

let minColor : UIImage = {
    let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
    UIGraphicsBeginImageContext(rect.size)
    let context = UIGraphicsGetCurrentContext()
    context?.setFillColor(UIColor.red.cgColor)
    context?.fill(rect)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image!
}()

代码非常简单。我相信不需要解释:)

第 2 步：

从您的图像中，我们可以得出结论，滑块的拇指图像需要自定义。但是我们不能将它创建为静态图像，因为它的文本应该根据进度而变化，不是吗？？

所以让我们创建一个基于 UISlider 进度返回缩略图的方法:)

func progressImage(with progress : Float) -> UIImage {
    let layer = CALayer()
    layer.backgroundColor = UIColor.green.cgColor
    layer.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
    layer.cornerRadius = 25

    let label = UILabel(frame: layer.frame)
    label.text = "\(progress)"
    layer.addSublayer(label.layer)
    label.textAlignment = .center
    label.tag = 100

    UIGraphicsBeginImageContext(layer.frame.size)
    layer.render(in: UIGraphicsGetCurrentContext()!)

    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image!
}

第 3 步

创建一个 UISlider 的 IBOutlet 并将您创建的图像设置为滑块 :) 最好在 ViewDidLoad 中。

self.myslider.setMinimumTrackImage(minColor, for: UIControlState.normal)
        self.myslider.setMinimumTrackImage(minColor, for: UIControlState.selected)
        self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.normal)
        self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.selected)

第 4 步：

为您的滑块创建一个 IBAction，然后编写

@IBAction func sliderMoved(_ sender: Any) {
    self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.normal)
    self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.selected)
}

最终输出

编辑

不太确定有多少人注意到它，但如果你仔细查看了 o/p，你会发现在设置最小轨道图像时，UISlider 的边是方形的！！！！

如何让 Slider 边缘变圆？？

这是因为我们使用代码创建的 UIImage 正在返回方形图像，另一方面，如果我们在左侧滑块上有带有曲线的半球形（半圆形）图像会正确显示 :)

作为绘制半圆并将其转换为图像的写入路径将花费大量时间：P 我正在创建具有圆角半径的圆形图像并利用 withCapInsets 仅重复图像的一部分，我有兴趣使图像看起来像半圆：D

在我们回答之前让我们回答另一个问题：P

如何增加滑块的高度???

创建滑块的子类并覆盖

class MySlider: UISlider {
    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(x: bounds.origin.x, y: bounds.origin.y, width: bounds.size.width, height: 10)
    }
}

如您所见，我将 UISlider 的高度返回为 10。

现在让我们回到上一个问题。 如何使 UISlider 边缘曲线化？？

如下修改你的 minColor 惰性变量声明:)

let minColor : UIImage = {
    let layer = CALayer()
    layer.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
    layer.cornerRadius = 5
    layer.backgroundColor = UIColor.red.cgColor
    UIGraphicsBeginImageContext(layer.frame.size)
    layer.render(in: UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image!
}()

在这里做什么？？？创建一个宽度和高度为 10 的图层，将角半径设置为 5，使其成为半径为 5 的圆：）仅此而已。

更改代码以在 viewDidLoad 中设置滑块图像，如下所示：)

self.myslider.setMinimumTrackImage(minColor.resizableImage(withCapInsets: UIEdgeInsetsMake(3, 5, 5, 4)), for: UIControlState.normal)
        self.myslider.setMinimumTrackImage(minColor.resizableImage(withCapInsets: UIEdgeInsetsMake(3, 5, 5, 4)), for: UIControlState.selected)
        self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.normal)
        self.myslider.setThumbImage(self.progressImage(with: self.myslider.value), for: UIControlState.selected)

那些 UIEdgeInsetsMake(3, 5, 5, 4) 是什么？

我只精心制作了图像的一部分（没有任何曲线的部分）并要求 iOS 重复它:) 就是这样:)

那么最终的 O/P 是什么样的？