iOS UISegmentedControl

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 segment

    imageForSegment(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 UISegmentControl

    removeAllSegments() :从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.

还有一些属性,例如tintColornumberOfSegments
这些是不言自明的。

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值