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

Question

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

我的意思的演示图像：

有没有可以做到的pod？

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 步：

根据你的图片，我们可以得出结论，滑块的缩略图需要自定义。但是我们不能将它创建为静态图像，因为它的文本应该根据进度更改，不是吗？？

所以让我们创建一个方法，returns 基于 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是怎样的呢？？

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

I need a UISlider with value on the handle

uislider

ios

cocoapods

swift