In this tutorial, we’ll be discussing and implementing the UISegmentedControl in our iOS Application.
在本教程中,我们将在iOS应用程序中讨论和实现UISegmentedControl。
UISegmentedControl (UISegmentedControl)
A UISegmentedControl is a horizontal bar which consists of discrete Buttons. These buttons are used to show/hide content or to show different contents when each of the Buttons is clicked.
UISegmentedControl是由不连续的Button组成的水平条。 当单击每个按钮时,这些按钮用于显示/隐藏内容或显示不同的内容。
This way each Button is responsible for a different Segment on the screen.
这样,每个按钮负责屏幕上的不同段。
Following are the helper functions for a UISegmentedControl:
以下是UISegmentedControl的辅助函数:
setImage(UIImage?, forSegmentAt: Int)
: Sets an image at the given position on the segmented control.setImage(UIImage?, forSegmentAt: Int)
:在分段控件上的给定位置设置图像。imageForSegment(at: Int)
: Returns the image for a specific segmentimageForSegment(at: Int)
:返回特定段的图像setTitle(String?, forSegmentAt: Int)
: Sets the title at the segment position.setTitle(String?, forSegmentAt: Int)
:在段位置设置标题。titleForSegment(at: Int)
: Returns the title of the specified segment position.titleForSegment(at: Int)
:返回指定段位置的标题。insertSegment(withTitle: String?, at: Int, animated: Bool)
: Inserts a segment at a specific position in the UISegmentControl and sets a title.insertSegment(withTitle: String?, at: Int, animated: Bool)
:在UISegmentControl中的特定位置插入一个段并设置一个标题。removeAllSegments()
: Removes all segment buttons from the UISegmentControlremoveAllSegments()
:从UISegmentControl移除所有细分按钮setEnabled(Bool, forSegmentAt: Int)
: Enables the segment at the position specified.setEnabled(Bool, forSegmentAt: Int)
:在指定位置启用细分。isEnabledForSegment(at: Int)
: Returns whether the segment specified is enabled or not.isEnabledForSegment(at: Int)
:返回指定段是否启用。setWidth(CGFloat, forSegmentAt: Int)
: Sets the width of the specified segment of the Segment Control.setWidth(CGFloat, forSegmentAt: Int)
:设置段控件的指定段的宽度。
There are a few properties as well such as tintColor
, numberOfSegments
.
These are self-explanatory.
还有一些属性,例如tintColor
, numberOfSegments
。
这些是不言自明的。
By default, the segments in the UISegment Control have equal width.
Sometimes, a particular Segment in the SegmentedControl can have a longer title. This would squash that title content.
默认情况下,UISegment控件中的段具有相等的宽度。
有时,SegmentedControl中的特定Segment可以具有更长的标题。 这将挤压标题内容。
In order to create segments with different widths, we can either use the setWidth function on each of the segments or use:
为了创建具有不同宽度的线段,我们可以在每个线段上使用setWidth函数,或者使用:
segmentedControl.apportionsSegmentWidthsByContent = true
In the next section, we’ll be creating a new XCode Project with a simple iOS Application that showcases the different use cases of UISegmentedControl.
在下一部分中,我们将使用一个简单的iOS应用程序创建一个新的XCode项目,该项目展示了UISegmentedControl的不同用例。
项目情节提要 (Project Storyboard)
In the right-hand side Attributes Inspector, we can add more segments to the UISegmentedControl.
在右侧的“属性”检查器中,我们可以向UISegmentedControl中添加更多细分。
We have added the IBOutlet of the UISegmentedControl to the ViewController file. The IBAction gets triggered whenever a different Segment in the UISegmentedControl is clicked.
我们已经将UISegmentedControl的IBOutlet添加到ViewController文件中。 每当在UISegmentedControl中单击其他细分时,都会触发IBAction。
As it’s fairly common with other UI Controls in iOS, the valueChanged
event gets triggered for the IBAction function to be executed.
由于与iOS中的其他UI控件相当普遍,因此触发了valueChanged
事件以执行IBAction函数。
The code for the ViewController.swift class is given below:
下面给出了ViewController.swift类的代码:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var segmentControl1: UISegmentedControl!
@IBOutlet weak var segmentedControl2: UISegmentedControl!
@IBOutlet weak var labelOne: UILabel!
@IBAction func segmentControlAction(_ sender: Any) {
let sControl = sender as! UISegmentedControl
if sControl.tag == 101
{
sControl.backgroundColor = UIColor.brown
labelOne.text = sControl.titleForSegment(at: sControl.selectedSegmentIndex)
}
else{
sControl.backgroundColor = UIColor.black
if sControl.selectedSegmentIndex == 0
{
sControl.tintColor = UIColor.red
sControl.insertSegment(withTitle: "New", at: sControl.numberOfSegments-1, animated: true)
}
else{
sControl.tintColor = UIColor.orange
}
labelOne.text = sControl.titleForSegment(at: sControl.selectedSegmentIndex)
}
}
override func viewDidLoad() {
super.viewDidLoad()
segmentedControl2.selectedSegmentIndex = 1
segmentedControl2.apportionsSegmentWidthsByContent = true
segmentControl1.tag = 101
}
}
In the above code, each of the UISegmentedConrol is connected to the same IBAction.
We’ve set a tag on one of the controls in the viewDidLoad method.
在上面的代码中,每个UISegmentedConrol连接到相同的IBAction。
我们已经在viewDidLoad方法的其中一个控件上设置了标签。
Inside the IBAction we check for the UISegmentedControl clicked and change the label text and also the tintColor of the UISegmentedControl as shown in the output below
在IBAction内部,我们检查是否单击了UISegmentedControl,并更改了标签文本以及UISegmentedControl的tintColor,如下面的输出所示。
This brings an end to this tutorial. You can download the project from the link below:
本教程到此结束。 您可以从下面的链接下载项目:
翻译自: https://www.journaldev.com/22872/ios-uisegmentedcontrol