iOS UISlider

In this tutorial, we’ll be discussing and implementing the UISlider in our iOS Application.

在本教程中，我们将在iOS应用程序中讨论和实现UISlider。

UISlider (UISlider)

A UISlider is a control that allows the user to select a value from a range of values horizontally by dragging the thumb to the position desired.

UISlider是一种控件，它允许用户通过将拇指拖动到所需位置来从水平值范围中选择一个值。

Some use cases where a UISlider is used:

使用UISlider的一些用例：

• Changing the Volume
  改变音量
• Changing the Brightness
  改变亮度
• Changing the current seek of the Video
  更改视频的当前搜索

To create a new UISlider UI in your application, most importantly you need to specify the range of values.
The isContinous property is used to set whether the slider is continous through the range of values or not.

要在应用程序中创建新的UISlider UI，最重要的是，您需要指定值的范围。
isContinous属性用于设置滑块在值范围内是否连续。

That means, when the isContinous is set to false, the value change would be notified to the target action method only when you release the thumb.

这意味着，当isContinous设置为false时，仅当释放拇指时，值更改才会通知给目标操作方法。

We can set UIImage at either end of the UISlider.

我们可以在UISlider的任一端设置UIImage。

• minimumValueImage and maximumValueImage are used to set the image at either end.
  minimumValueImage和maximumValueImage用于在任一端设置图像。
• minimumTrackTintColor is used to set the color of the track till the thumb’s current position.
  minimumTrackTintColor用于设置轨迹的颜色，直到拇指的当前位置为止。
• maximumTrackTintColor is used to set the color of the track from the current thumb position till the end of the track.
  maximumTrackTintColor用于设置从当前拇指位置到轨道末端的轨道颜色。
• thumbTintColor is used to set the tint color property on the thumb of the UISlider
  thumbTintColor用于在UISlider的拇指上设置色调颜色属性
• currentThumbImage is used to set the image to be rendered on the thumb.
  currentThumbImage用于设置要在拇指上渲染的图像。
• setThumbImage is used to set the image for a specific event.
  setThumbImage用于设置特定事件的图像。

获取价值 (Accessing the Values)

To access the value of the UISlider we can do the following:

要访问UISlider的值，我们可以执行以下操作：

• var value: Float: The slider’s current value.
  var value: Float ：滑块的当前值。
• func setValue(Float, animated: Bool): Sets the slider’s current value, allowing you to animate the change visually.
  func setValue(Float, animated: Bool) animation func setValue(Float, animated: Bool) ：设置滑块的当前值，使您可以在视觉上对更改进行动画处理。
• minimumValue maximumValue is used to get and set the min and max values in Float for the UISlider.
  minimumValue maximumValue用于获取和设置Float中UISlider的最小值和最大值。

In the following section, we’ll be creating UISlider. Both programmatically and using the Interface Builder in our Storyboard.

在下一节中，我们将创建UISlider。 在我们的情节提要中以编程方式和使用Interface Builder均可。

Let’s get started!

让我们开始吧！

项目情节提要 (Project Storyboard)

The Main.storyboard of our XCode project looks like this:

我们的XCode项目的Main.storyboard如下所示：

The IBAction for the event type Value changed can be created as:

事件类型“值已更改”的IBAction可以创建为：

码 (Code)

The code for the ViewController.swift is given below:

下面给出了ViewController.swift的代码：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var mySlider: UISlider!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        createSliderProgrammatically()
        
    }

    @IBAction func mySliderValueChanged(_ sender: Any) {
        
        if (sender as! UISlider).tag == 101{
            myLabel.text = ("Programmatic Slider value is: \((sender as! UISlider).value)")
        }
        else{
            myLabel.text = ("Slider value is: \((sender as! UISlider).value)")
        }
    }
    
    func createSliderProgrammatically()
    {
        let mySlider = UISlider(frame:CGRect(x: 10, y: 100, width: 300, height: 20))
        mySlider.minimumValue = 0
        mySlider.maximumValue = 100
        mySlider.isContinuous = false
        mySlider.tag = 101
        mySlider.tintColor = UIColor.green
        mySlider.minimumTrackTintColor = UIColor.black
        mySlider.maximumTrackTintColor = UIColor.red
        mySlider.minimumValueImage = UIImage(named: "ic_launcher")
        mySlider.maximumValueImage = UIImage(named: "ic_launcher")
        mySlider.setThumbImage(UIImage(named: "ic_launcher"), for: UIControl.State.normal)
        mySlider.addTarget(self, action: #selector(ViewController.mySliderValueChanged(_:)), for: .valueChanged)
        
        self.view.addSubview(mySlider)
    }
    
}

In the above code, we’ve added a programmatically created UISlider at the top of our layout.
We’ve set the UIImage from the Assets folder.

在上面的代码中，我们在布局的顶部添加了以编程方式创建的UISlider。
我们已经从Assets文件夹中设置了UIImage。

To differentiate between the two UISliders we’ve set a tag on one of them.
The value displayed on the Label would be of the type.

为了区分两个UISlider，我们在其中一个上设置了标签。
标签上显示的值将是该类型。

The output of the application in action is given below:

实际应用程序的输出如下：

The values are displayed as a Float.

值显示为浮点数。

In order to make them snap to an integer, we can do the following in our above Swift class.

为了使它们捕捉到整数，我们可以在上面的Swift类中执行以下操作。

@IBAction func mySliderValueChanged(_ sender: Any) {
        
        let uiSlider = sender as! UISlider
        
        let step:Float = 1
        let roundedStepValue = round(uiSlider.value / step) * step
        uiSlider.value = roundedStepValue
        
        if (sender as! UISlider).tag == 101{
            myLabel.text = ("Programmatic Slider value is: \((uiSlider).value)")
        }
        else{
            myLabel.text = ("Slider value is: \((uiSlider).value)")
        }
    }

The output now looks like:

现在的输出如下所示：

That brings an end to this tutorial. You can download the project from the link below:

这样就结束了本教程。 您可以从下面的链接下载项目：

iOSUISlider iOSUI滑块

翻译自: https://www.journaldev.com/22833/ios-uislider