我需要一个在句柄上有值的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，并将您创建的图像设置为slider :)，最好在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方向偏右!!!!

如何使滑块边缘变圆？

因为我们使用代码创建的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怎么样？