In this tutorial, we’ll be discussing and implementing the UISegmentedControl in our iOS Application.
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.
This way each Button is responsible for a different Segment on the screen.
Following are the helper functions for a UISegmentedControl:
setImage(UIImage?, forSegmentAt: Int): Sets an image at the given position on the segmented control.imageForSegment(at: Int): Returns the image for a specific segmentsetTitle(String?, forSegmentAt: Int): Sets the title at the segment position.titleForSegment(at: Int): Returns the title of the specified segment position.insertSegment(withTitle: String?, at: Int, animated: Bool): Inserts a segment at a specific position in the UISegmentControl and sets a title.removeAllSegments(): Removes all segment buttons from the UISegmentControlsetEnabled(Bool, forSegmentAt: Int): Enables the segment at the position specified.isEnabledForSegment(at: Int): Returns whether the segment specified is enabled or not.setWidth(CGFloat, forSegmentAt: Int): Sets the width of the specified segment of the Segment Control.
There are a few properties as well such as tintColor, numberOfSegments.
These are self-explanatory.
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.
In order to create segments with different widths, we can either use the setWidth function on each of the segments or use:
|
1 2 3 |
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.
Project Storyboard
In the right-hand side Attributes Inspector, we can add more segments to the 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.
As it’s fairly common with other UI Controls in iOS, the valueChanged event gets triggered for the IBAction function to be executed.
The code for the ViewController.swift class is given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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.
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
This brings an end to this tutorial. You can download the project from the link below: