UISegmentedControl in UIKit

UISegmentedControl is a versatile component in the UIKit framework, providing a way to offer multiple segments (buttons) that can be used for selecting between different options. In this article, we will explore what UISegmentedControls are, the various functionalities they offer, and provide practical code examples to demonstrate how you can implement and customize them in your iOS projects.

What is a UISegmentedControl?

A UISegmentedControl is a control that is divided into multiple segments, each functioning as a discrete button. It is typically used for displaying a list of options or categories, allowing the user to select one option from the list. When a segment is selected, it changes its appearance to indicate the selection. UISegmentedControls are commonly used in settings pages, filters, and navigation options.

What Can You Do with UISegmentedControls?

UISegmentedControls offer a range of functionalities and customization options. Here are some key things you can do with UISegmentedControls:

• Multiple Segments: Create a segmented control with multiple segments, each representing a different option.
• Custom Titles and Images: Set custom titles and images for each segment.
• Handle Value Changes: Respond to changes in the selected segment using target-action methods.
• Custom Appearance: Customize the appearance of the segmented control, including its tint color, background color, and text attributes.
• Enabled/Disabled State: Enable or disable individual segments based on specific conditions.

Implementing UISegmentedControl in Swift

Let's dive into some code examples to see how you can create, customize, and work with UISegmentedControls in Swift.

To create a simple UISegmentedControl, you need to initialize it with titles or images for each segment. Here is an example:

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // Create a UISegmentedControl with titles
        let items = ["First", "Second", "Third"]
        let segmentedControl = UISegmentedControl(items: items)
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.addTarget(self, action: #selector(segmentedControlChanged(_:)), for: .valueChanged)
        segmentedControl.translatesAutoresizingMaskIntoConstraints = false

        // Add the segmented control to the view
        view.addSubview(segmentedControl)

        // Set Auto Layout constraints
        NSLayoutConstraint.activate([
            segmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            segmentedControl.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }

    @objc func segmentedControlChanged(_ sender: UISegmentedControl) {
        print("Selected segment index: \(sender.selectedSegmentIndex)")
    }
}

In this example, we create a UISegmentedControl with three segments, each with a title. We set the selected segment to the first one and add a target-action method to handle value changes. The segmented control is added to the view and centered using Auto Layout constraints.

Customizing UISegmentedControl Appearance

You can customize the appearance of UISegmentedControl to match the design of your application. Here is an example of customizing the tint color and background color:

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // Create a UISegmentedControl with titles
        let items = ["First", "Second", "Third"]
        let segmentedControl = UISegmentedControl(items: items)
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.addTarget(self, action: #selector(segmentedControlChanged(_:)), for: .valueChanged)
        segmentedControl.translatesAutoresizingMaskIntoConstraints = false

        // Customize appearance
        segmentedControl.tintColor = .white
        segmentedControl.backgroundColor = .darkGray

        // Add the segmented control to the view
        view.addSubview(segmentedControl)

        // Set Auto Layout constraints
        NSLayoutConstraint.activate([
            segmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            segmentedControl.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }

    @objc func segmentedControlChanged(_ sender: UISegmentedControl) {
        print("Selected segment index: \(sender.selectedSegmentIndex)")
    }
}

In this example, we customize the UISegmentedControl by setting its tint color and background color. The tint color changes the color of the selected segment, while the background color changes the color of the entire control.

Using UISegmentedControl with Images

You can create a UISegmentedControl with images instead of titles for each segment. Here is an example:

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // Create a UISegmentedControl with images
        let items = [
            UIImage(systemName: "house"),
            UIImage(systemName: "heart"),
            UIImage(systemName: "gear")
        ]
        let segmentedControl = UISegmentedControl(items: items as [Any])
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.addTarget(self, action: #selector(segmentedControlChanged(_:)), for: .valueChanged)
        segmentedControl.translatesAutoresizingMaskIntoConstraints = false

        // Add the segmented control to the view
        view.addSubview(segmentedControl)

        // Set Auto Layout constraints
        NSLayoutConstraint.activate([
            segmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            segmentedControl.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }

    @objc func segmentedControlChanged(_ sender: UISegmentedControl) {
        print("Selected segment index: \(sender.selectedSegmentIndex)")
    }
}

In this example, we create a UISegmentedControl with three segments, each with an image. We set the selected segment to the first one and add a target-action method to handle value changes. The segmented control is added to the view and centered using Auto Layout constraints.

Enabling and Disabling Segments

You can enable or disable individual segments of a UISegmentedControl based on specific conditions. Here is an example:

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        // Create a UISegmentedControl with titles
        let items = ["First", "Second", "Third"]
        let segmentedControl = UISegmentedControl(items: items)
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.addTarget(self, action: #selector(segmentedControlChanged(_:)), for: .valueChanged)
        segmentedControl.translatesAutoresizingMaskIntoConstraints = false

        // Disable the second segment
        segmentedControl.setEnabled(false, forSegmentAt: 1)

        // Add the segmented control to the view
        view.addSubview(segmentedControl)

        // Set Auto Layout constraints
        NSLayoutConstraint.activate([
            segmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            segmentedControl.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }

    @objc func segmentedControlChanged(_ sender: UISegmentedControl) {
        print("Selected segment index: \(sender.selectedSegmentIndex)")
    }
}

In this example, we disable the second segment of the UISegmentedControl using the setEnabled(_:forSegmentAt:) method. The second segment will not be selectable by the user.

Conclusion

UISegmentedControls are versatile components for providing multiple options or categories in your iOS applications. In this article, we've covered the basics of what UISegmentedControls are, their various functionalities, and provided practical code examples to help you implement and customize them in your own projects. From creating simple segmented controls to customizing their appearance and enabling/disabling segments, mastering UISegmentedControls is essential for building intuitive and user-friendly interfaces.