我需要一个带有手柄值的UISlider [英] I need a UISlider with value on the handle

问题描述

我需要在我的iOS应用程序中使用句柄中滑块的值制作 UISlider 。

I need to make a UISlider in my iOS App with the value of the slider in the handle.

演示我的意思形象：

有吗一个可以做到这一点的吊舱？

Is there a pod that could do it?

推荐答案

你既不需要任何第三方控制，也不需要在你的拥有。您仍然可以使用UISlider并根据您的需要进行自定义：）

You dont need neither any third party control nor you will have to create a slider on your own. You can still use the UISlider and customise it as per your need :)

第1步：

我们可以看到我们需要设置最小轨道的颜色，因为它不是默认的白色不是吗???它有点橙色，我不知道它的确切冷却因此我将它设置为红色。你设置你想要的任何颜色：）

As we can see we need to set the colour for minimum track and as it is not default white isn't it ??? Its somewhat orange, I dont know exact coolor of it hence am setting it to red. You set whatever colour you want :)

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

But UISlider's setMinimumTrackImage expects a UIImage not colour. So lets create a UIImage from colour. Am creating it as a lazy variable, because I want it to be created only once :)

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!
}()

代码非常简单。我相信没有必要解释：）

Code is pretty simple. I believe no need to explain that :)

第2步：

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

From your image, we can conclude that the thumb image of slider needs to be custom. But we can't create it as static image, because its text should change based on progress isn't it ??

因此，我们创建一个基于UISlider进度返回拇指图像的方法：）

So lets create a method that returns thumb image based on UISlider progress :)

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中。

Create a IBOutlet of UISlider and set the images you have created to slider :) preferably in 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你的滑块，写一下

Create a IBAction for your slider, and write

@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方向正常！

Not really sure how many noticed it, but if you have seen the o/p carefully you can see that on setting minimum track image makes the UISlider sides square!!!!

如何使Slider边缘变圆？

因为UIImage那个我们创建使用代码返回方形图像，另一方面，如果我们有半球（半圆）图像左侧曲线左侧滑块将正确显示：）

Its because the UIImage that we created using the code was returning the square image, on the other hand if we had semi sphere (semi circle) image with curve on left side slider would have shown properly :)

绘制半圆并将其转换为图像的路径需要花费大量时间：PI创建具有圆角半径的圆形图像并利用 withCapInsets 重复o nly图像的一部分有兴趣使图像看起来像半圆：D

As writing path to draw semi circle and converting that to image will take lot of time :P I am creating circular image with corner radius and exploiting withCapInsets to repeat only the part of the image am interested in making the image look like semi circle :D

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

Before we answer that lets answer another question :P

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

创建滑块的子类，并覆盖

Create a subclass of your slider, and override

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。

As you can see am returning the height of UISlider to be 10.

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

Now lets go back to previous question. How to make UISlider edges curve ??

修改你的minColor惰性变量声明如下：）

modify your minColor lazy variable declaration as below :)

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的圆圈:)这就是全部。

What am doing here ??? Create a layer of width and height 10, set corner radius to 5 which makes it a circle of radius 5 :) Thats all.

更改代码以设置滑块图像viewDidLoad如下：）

Change your code to set slider images in viewDidLoad as below :)

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重复它:)全部：）

I am carefully crafting only the part of the image (part which does not have any curve) and asking iOS to repeat it :) Thats all :)

最终的O / P怎么样？

这篇关于我需要一个带有手柄值的UISlider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！