ios uistepper_iOS UIStepper

ios uistepper

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

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

UIStepper (UIStepper)

UIStepper is a basic UI control element that is used to increment/decrement values. This UI element is commonly used in shopping cart applications to increase or decrease the quantity.

UIStepper是一个基本的UI控件元素，用于增加/减少值。 此UI元素通常在购物车应用程序中用于增加或减少数量。

A UIStepper consists of the following important properties.

UIStepper由以下重要属性组成。

• minimum/maximum values – The upper and lower limits of the UIStepper.
  最小值/最大值– UIStepper的上限和下限。
• stepValue – The increment/decrement value. By default, this is 1. A stepValue property is a Double.
  stepValue –增量/减量值。 默认情况下，该值为1。stepValue属性为Double。
• autorepeat – If this is true, pressing and holding the button would keep incrementing/decrementing the value. Otherwise pressing would increment/decrement only once. By default this is true.
  自动重复–如果为true，则按住该按钮将保持递增/递减值。 否则，按只会增加/减少一次。 默认情况下，这是正确的。
• continuous – If this is true, the value would be changed immediately as soon as the button is touched. By default it is true.
  连续–如果为true，则一旦触摸该按钮，该值将立即更改。 默认情况下为true。
• wrap – When this is true, the UIStepper increments/decrements in cycles. That means that once the minimum value is reached, decrementing further would start from the maximum value and vice-versa.
  When this is false once the UIStepper reaches the min/max you cannot click any further. The buttons get disabled as well.
  wrap –如果为true，则UIStepper以周期为单位递增/递减。 这意味着一旦达到最小值，则将从最大值开始进一步减小，反之亦然。
  如果为false，则一旦UIStepper达到最小值/最大值，您将无法再单击它。 这些按钮也被禁用。

Some more important properties and functions –

一些更重要的属性和功能–

• tintColor – Used to set the color of the key elements of the UIStepper.
  tintColor –用于设置UIStepper的关键元素的颜色。
• setIncrementImage(image:, for:) – Sets the image for the increment button for the state assigned. A UIImage instance is passed. The states can be normal, focused, highlighted.
  setIncrementImage(image:, for:) –为分配的状态设置增量按钮的图像。 传递了一个UIImage实例。 状态可以是正常，集中，突出显示。
• setDecrementImage(image:, for:) – Sets the same for the decrement button.
  setDecrementImage(image:, for:) –为减量按钮设置相同的值。
• setDividerImage() – Used to set the divider image.
  setDividerImage() –用于设置分隔线图像。

The image size must be under 25X25 to fit nicely inside the UIStepper.

图片大小必须小于25X25，才能很好地放入UIStepper中。

We’ll look at the click listener functions in the XCode project that we implement next.

我们将在接下来实现的XCode项目中查看click监听器函数。

实作 (Implementation)

Create a new XCode project. In your Main.storyboard, drag a UIStepper and a Label on the ViewController as shown below:

创建一个新的XCode项目。 在Main.storyboard中，将UIStepper和Label拖到ViewController上，如下所示：

1. Set the constraints on the UIStepper to center horizontal and vertical in the parent. Set the Label to center horizontal and add a vertical spacing to it from the UIStepper. Link these Outlets to the ViewController.swift
   将UIStepper上的约束设置为在父级中水平和垂直居中。 将Label设置为水平居中，并从UIStepper向其添加垂直间距。 将这些插座链接到ViewController.swift
2. In the right pane the attributes can be changed. Or they can be done programmatically.
   在右窗格中，可以更改属性。 或者可以通过编程来完成。

The ViewController.swift code is given below:

下面给出了ViewController.swift代码：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var myStepper: UIStepper!
    override func viewDidLoad() {

        super.viewDidLoad()

    myStepper.addTarget(self, action: #selector(ViewController.stepperValueChanged(_:)), for: .valueChanged)
    }
    
    
    @objc func stepperValueChanged(_ sender:UIStepper!)
    {
        label.text = String(sender.value)
    }
}

Using the addTarget method we set the function to be called when the value of the UIStepper is changed by setting the event to valueChanged.

通过使用addTarget方法，我们通过将事件设置为valueChanged来设置UIStepper的值更改时要调用的函数。

In the stepperValueChanged function, we get the current step value using sender.value and set it on the Label.

在stepperValueChanged函数中，我们使用sender.value获取当前步骤值，并将其设置在Label上。

sender.value is of the type Double, so we’ve converted it into a String.

sender.value的类型为Double，因此我们已将其转换为String。

The output when the application is run on a simulator is:

当应用程序在模拟器上运行时，输出为：

The value is displayed in Decimal(Double). When the UIStepper button is pressed, it keeps incrementing and goes over the maximum value which was 20.

该值以Decimal（Double）显示。 当按下UIStepper按钮时，它会不断增加并超过最大值20。

自动重复并包装。 没有连续。 (autorepeat and wrap. No continuous.)

myStepper.isContinuous = false

无自动重复，无环绕，无连续 (No Autorepeat, No wrap, No continuous)

myStepper.isContinuous = false
myStepper.autorepeat = false
myStepper.wraps = false

As you can see the + button is disabled.

如您所见，+按钮已禁用。

添加色调颜色和阶跃值 (Adding Tint Color and Step Value)

In order to display an Integer value, we need to convert the double to Int first and then to a String.

为了显示Integer值，我们需要先将double转换为Int，然后转换为String。

label.text = String(sender.value)

To add a Tint color and step value, set the following inside the viewDidLoad method.

要添加色调颜色和阶跃值，请在viewDidLoad方法内设置以下内容。

myStepper.tintColor = UIColor.brown
myStepper.stepValue = 2.0

The output of the application in action is :

实际应用程序的输出为：

Let’s create another UIStepper in which we’ll set custom images.

让我们创建另一个UIStepper，在其中设置自定义图像。

以编程方式创建UIStepper (Creating UIStepper Programmatically)

In the following ViewController.swift, we’ve updated the viewDidLoad method to add a custom UIStepper with image assets set on the left, right and divider elements. You can find the images in the project source code attached at the end of this tutorial.

在下面的ViewController.swift中，我们更新了viewDidLoad方法，以添加一个自定义UIStepper，并在左，右和除法器元素上设置了图像资源。 您可以在本教程结尾处随附的项目源代码中找到图像。

We’ve added the AutoLayout constraints programmatically as well:

我们还以编程方式添加了AutoLayout约束：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var myStepper: UIStepper!
    override func viewDidLoad() {

        super.viewDidLoad()

        myStepper.tintColor = UIColor.brown
        myStepper.stepValue = 2.0
        myStepper.addTarget(self, action: #selector(ViewController.stepperValueChanged(_:)), for: .valueChanged)

        
        let customStepper = UIStepper()
        customStepper.minimumValue = 10
        customStepper.maximumValue = 100
        customStepper.tintColor = UIColor.red

        customStepper.setIncrementImage(UIImage(named: "happy.png"), for: .normal)
        customStepper.setDecrementImage(UIImage(named: "sad.png"), for: .normal)
        customStepper.setDividerImage(UIImage(named: "divider.png"), forLeftSegmentState: .normal, rightSegmentState: .normal)
        
        customStepper.translatesAutoresizingMaskIntoConstraints = false
        
        customStepper.addTarget(self, action: #selector(ViewController.stepperValueChanged(_:)), for: .valueChanged)
        
        self.view.addSubview(customStepper)
        
        [
        customStepper.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
        customStepper.topAnchor.constraint(equalTo: myStepper.bottomAnchor, constant: 20)
            ].forEach{$0.isActive = true}
    
    }
    
    
    @objc func stepperValueChanged(_ sender:UIStepper!)
    {
        label.text = String(Int(sender.value))
    }
}

The output of the application in action is given below:

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

As you can see the tintColor gets applied on the images as well.

如您所见，tintColor也将应用于图像。

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

本教程到此结束。 您可以从下面的链接下载项目。

iOSUIStepper iOSUIStepper

翻译自: https://www.journaldev.com/22259/ios-uistepper

ios uistepper