iOS UISegmentedControl

Filed Under: iOS

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 segment
  • setTitle(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 UISegmentControl
  • setEnabled(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:


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

ios uisegmentedcontrol output

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:


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

ios uisegmentedcontrol output

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

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages