Mastering UISegmentedControl in UIKit: A Developer's Guide

Introduction to UISegmentedControl

The UISegmentedControl is a standard UI element in UIKit that presents users with a horizontal list of mutually exclusive options. It's ideal for situations where you want the user to select one choice from a small, predefined set, such as viewing options (e.g., "List" vs. "Grid"), filtering content (e.g., "All" vs. "Favorites"), or switching modes within an application.

UISegmentedControl inherits from UIControl, which means it participates in the target-action mechanism, allowing you to easily respond to user selections. It's a highly customizable control, letting you define both the number of segments and their content, which can be either text or images.

When to use UISegmentedControl

• Switching Views/Modes: Quickly toggle between different display styles or operational modes within a screen.
• Filtering Content: Offer simple filters for data displayed in a list or collection.
• Defining Scope: Allow users to choose a specific scope for an action or data display.

Key Considerations

• Limited Options: Best for 2-5 options. More than that can become visually cluttered and difficult to tap accurately.
• Mutually Exclusive: Only one segment can be selected at a time, making it unsuitable for multiple-choice selections.
• Always Visible: All options are always visible, which is different from a dropdown menu. Ensure your segment titles are concise and clear.

Basic Setup and Initialization

You can initialize a UISegmentedControl either programmatically or by adding it to your storyboard or XIB file. Programmatic setup offers greater flexibility and is often preferred for dynamic interfaces. When creating it programmatically, you typically provide an array of titles or images for the segments.

Let's walk through creating a UISegmentedControl with textual segments and adding it to a view controller. You'll then configure its initial selected segment and set up its Auto Layout constraints.

import UIKit

class ViewController: UIViewController {

    let segmentedControl = UISegmentedControl(items: ["First", "Second", "Third"])

    override func viewDidLoad() {
        super.viewDidLoad()
        setupSegmentedControl()
    }

    func setupSegmentedControl() {
        segmentedControl.selectedSegmentIndex = 0 // Select the first segment by default
        segmentedControl.translatesAutoresizingMaskIntoConstraints = false // Enable Auto Layout

        view.addSubview(segmentedControl)

        NSLayoutConstraint.activate([
            segmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            segmentedControl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            segmentedControl.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            segmentedControl.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
}

In the example above, we create an instance of UISegmentedControl with three segments. We then set its selectedSegmentIndex to 0 to ensure a default selection. Crucially, translatesAutoresizingMaskIntoConstraints is set to false to use Auto Layout for positioning, and then we define constraints to center it horizontally and pin it to the top safe area with leading and trailing indents.

Compatibility Notes

UISegmentedControl has been available since iOS 2.0. Its core functionality remains consistent across modern iOS versions (iOS 13+).

import UIKit

class SegmentedControlExampleViewController: UIViewController {

    let segmentedControl = UISegmentedControl(items: ["Red", "Green", "Blue"])
    let colorLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        setupSegmentedControl()
        setupColorLabel()
        updateColorLabel()
    }

    func setupSegmentedControl() {
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.translatesAutoresizingMaskIntoConstraints = false

        // Add target for value changed event
        segmentedControl.addTarget(self, action: #selector(segmentedControlValueChanged(_:)), for: .valueChanged)

        view.addSubview(segmentedControl)

        NSLayoutConstraint.activate([
            segmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            segmentedControl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
            segmentedControl.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            segmentedControl.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }

    func setupColorLabel() {
        colorLabel.textAlignment = .center
        colorLabel.font = UIFont.preferredFont(forTextStyle: .title1)
        colorLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(colorLabel)

        NSLayoutConstraint.activate([
            colorLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            colorLabel.topAnchor.constraint(equalTo: segmentedControl.bottomAnchor, constant: 40)
        ])
    }

    @objc func segmentedControlValueChanged(_ sender: UISegmentedControl) {
        updateColorLabel()
    }

    func updateColorLabel() {
        let selectedIndex = segmentedControl.selectedSegmentIndex
        let selectedTitle = segmentedControl.titleForSegment(at: selectedIndex) ?? "None"
        colorLabel.text = "Selected: \(selectedTitle)"

        switch selectedIndex {
        case 0:
            view.backgroundColor = .systemRed
        case 1:
            view.backgroundColor = .systemGreen
        case 2:
            view.backgroundColor = .systemBlue
        default:
            view.backgroundColor = .systemBackground
        }
    }
}

Handling User Interaction

To make your UISegmentedControl interactive, you need to respond to the valueChanged event. This event fires whenever the user taps a different segment. You achieve this using the target-action mechanism, which is a fundamental pattern in UIKit for handling control events.

When the valueChanged event occurs, the associated target object's specified action method is called. This method typically takes the sender of the event (the UISegmentedControl itself) as an argument, allowing you to query its selectedSegmentIndex property to determine which segment is currently active.

// Inside your ViewController or relevant class

// Add this line in setupSegmentedControl() or viewDidLoad()
segmentedControl.addTarget(self, action: #selector(segmentedControlValueChanged(_:)), for: .valueChanged)

// Implement the action method
@objc func segmentedControlValueChanged(_ sender: UISegmentedControl) {
    let selectedIndex = sender.selectedSegmentIndex
    if let selectedTitle = sender.titleForSegment(at: selectedIndex) {
        print("Selected segment: \(selectedTitle) at index \(selectedIndex)")
        // Perform actions based on the selected segment
        switch selectedIndex {
        case 0:
            // Handle selection of the first segment
            break
        case 1:
            // Handle selection of the second segment
            break
        default:
            break
        }
    }
}

Remember to declare your action method with the @objc attribute if your class is not inheriting from NSObject or if you're using it in an Objective-C runtime context. This ensures the method is visible to the Objective-C runtime mechanisms that power target-action.

Programmatic Selection

You can also programmatically control which segment is selected using the selectedSegmentIndex property:

segmentedControl.selectedSegmentIndex = 1 // Programmatically selects the second segment

Setting selectedSegmentIndex programmatically does not trigger the valueChanged event. If you need to trigger the same logic as a user tap, you must call your action method explicitly after setting the index, or encapsulate the common logic in a separate helper method.

Customizing Appearance (Styling)

While UISegmentedControl has a clean, default appearance, UIKit provides ample opportunities for customization to match your app's branding. You can adjust colors, fonts, background images, and even the divider images between segments.

Tint Color (iOS 13+)

For modern iOS versions, the selectedSegmentTintColor property is the primary way to customize the background color of the selected segment. The overall tint of the unselected segments and borders will often derive from the control's tintColor.

// For selected segment background
segmentedControl.selectedSegmentTintColor = .systemTeal

// For overall unselected text and borders
segmentedControl.tintColor = .orange // This has less universal effect in iOS 13+ than before

Segment Content

You can set titles or images for each segment. Mixing titles and images within the same control is generally discouraged for visual consistency.

// Setting titles (already shown in initialization)
segmentedControl.setTitle("Settings", forSegmentAt: 0)

// Setting images (iOS 2.0+)
let gearImage = UIImage(systemName: "gear") // SF Symbols available iOS 13+
segmentedControl.setImage(gearImage, forSegmentAt: 1)

// Removing a segment (iOS 2.0+)
segmentedControl.removeSegment(at: 2, animated: true)

// Inserting a segment (iOS 2.0+)
segmentedControl.insertSegment(withTitle: "New", at: 2, animated: true)

Text Attributes (iOS 5.0+)

You can customize the text appearance for different control states (normal, highlighted, selected, disabled).

let normalTextAttributes: [NSAttributedString.Key: Any] = [
    .foregroundColor: UIColor.label, // Or .systemGray
    .font: UIFont.systemFont(ofSize: 14, weight: .regular)
]
let selectedTextAttributes: [NSAttributedString.Key: Any] = [
    .foregroundColor: UIColor.white, // Or a contrasting color
    .font: UIFont.systemFont(ofSize: 14, weight: .semibold)
]

segmentedControl.setTitleTextAttributes(normalTextAttributes, for: .normal)
segmentedControl.setTitleTextAttributes(selectedTextAttributes, for: .selected)

Background and Divider Images (iOS 5.0+)

For more advanced visual customization, you can set background images for segments in different states and provide custom divider images.

// Example: Custom background image for normal state
// Note: This requires correctly sized images. Stretching may occur.
// segmentedControl.setBackgroundImage(UIImage(named: "normalSegmentBackground"), for: .normal, barMetrics: .default)

// Example: Custom divider image
// segmentedControl.setDividerImage(UIImage(named: "segmentDivider"), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)

These background and divider image properties offer granular control, but often selectedSegmentTintColor and setTitleTextAttributes provide sufficient styling for most modern iOS apps.

UISegmentedControl in Storyboards/XIBs

Integrating UISegmentedControl using Interface Builder (Storyboards or XIBs) is straightforward. You drag the component from the Object Library onto your canvas and then configure its properties in the Attributes Inspector.

1. Drag and Drop: Find "Segmented Control" in the Object Library and drag it onto your view controller's view.
2. Number of Segments: In the Attributes Inspector, you can adjust the Segments count. Each segment gets its own input field for Title and can optionally have an Image.
3. Default Selection: Set the Selected segment index. Remember that segmented controls should always have a default selection.
4. Auto Layout: Use Auto Layout to position and size your segmented control appropriately within its superview.
5. Connections: To handle valueChanged events, drag from the segmented control to your view controller in the Assistant Editor while holding Control. Select Action as the Connection type, provide a name for your method (e.g., segmentChanged), and choose Value Changed as the Event.

This automatically generates an @IBAction method in your view controller, allowing you to write Swift code to respond to user interactions just as with programmatic setup.

Best Practices and Advanced Tips

To ensure your UISegmentedControl provides an excellent user experience, consider these best practices and advanced tips:

• Provide a Default Selection: Users should always see one segment selected when a segmented control appears. This signals that it's an active control and prevents ambiguity.

• Fewer is Better: Aim for 2-5 segments. More options can make segments too small, difficult to tap, and the text hard to read. If you need more options, consider a different UI element like a UIPickerView or a table view with selection.

• Clear and Concise Titles/Images: Use short, descriptive text or easily recognizable icons. Avoid jargon.

• Consistent Content Type: Stick to either all text segments or all image segments. Mixing them can look inconsistent.

• Accessibility: UISegmentedControl is inherently accessible. VoiceOver users will hear the selected segment and can easily swipe to navigate and activate other segments. Ensure your segment titles are descriptive.

• Dynamic Segment Management: If your segments need to change based on application state or user data, you can programmatically add or remove segments using insertSegment(withTitle:at:animated:), insertSegment(withImage:at:animated:), and removeSegment(at:animated:).

  swift

  Copy

  func updateSegmentsForUserType(isProUser: Bool) {
      if isProUser && segmentedControl.numberOfSegments == 2 {
          segmentedControl.insertSegment(withTitle: "Pro Features", at: 2, animated: true)
      } else if !isProUser && segmentedControl.numberOfSegments == 3 {
          segmentedControl.removeSegment(at: 2, animated: true)
          if segmentedControl.selectedSegmentIndex == 2 {
              segmentedControl.selectedSegmentIndex = 0 // Reset selection if 'Pro Features' was selected
          }
      }
  }
  

By following these guidelines, you can create effective and user-friendly UISegmentedControl instances in your UIKit applications.