我需要一个在手柄上有值的 UISlider

Question

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

我的意思的演示图像：

有没有可以做到的豆荚？

Answer 1

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

第1步：

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

但是 UISlidersetMinimumTrackImage期望 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)

第四步 ：

为您的滑块创建一个 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 的边是方形的！！！！

如何使滑块边缘变圆？

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

由于编写路径以绘制半圆并将其转换为图像将花费大量时间：PI正在创建具有圆角半径的圆形图像并利用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 看起来如何？