Segmented Controls (UISegmentedControl)

What is UISegmentedControl?

UISegmentedControl is a UI component in iOS that allows users to select between multiple options within a single horizontal control. It is commonly used for filtering content or switching between views.

---

1. Key Features of UISegmentedControl

✅ Allows multiple segments with different options
✅ Supports text and images as segment titles
✅ Automatically resizes segments for a balanced layout
✅ Provides easy switching between options
✅ Can be customized for different styles and colors

---

2. Adding UISegmentedControl in Storyboard

1. Drag & Drop a UISegmentedControl from the Object Library.
2. Set the segment titles (e.g., “Option 1”, “Option 2”).
3. Add constraints to position it within the view.
4. Create an @IBAction method in the ViewController to handle selection changes.

---

3. Implementing UISegmentedControl Programmatically

import UIKit

class ViewController: UIViewController {
    
    let segmentedControl = UISegmentedControl(items: ["Option 1", "Option 2", "Option 3"])

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

    func setupSegmentedControl() {
        segmentedControl.selectedSegmentIndex = 0 // Default selection
        segmentedControl.addTarget(self, action: #selector(segmentChanged), for: .valueChanged)
        segmentedControl.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(segmentedControl)

        // Constraints
        NSLayoutConstraint.activate([
            segmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            segmentedControl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            segmentedControl.widthAnchor.constraint(equalToConstant: 300),
            segmentedControl.heightAnchor.constraint(equalToConstant: 40)
        ])
    }

    @objc func segmentChanged(_ sender: UISegmentedControl) {
        print("Selected Index: \(sender.selectedSegmentIndex)")
    }
}

✅ This will create a segmented control with three options and print the selected index when changed.

---

4. Customizing UISegmentedControl

4.1 Changing Segment Colors

segmentedControl.selectedSegmentTintColor = .systemBlue // Changes selected segment color
segmentedControl.setTitleTextAttributes([.foregroundColor: UIColor.white], for: .selected) // Text color when selected
segmentedControl.setTitleTextAttributes([.foregroundColor: UIColor.darkGray], for: .normal) // Text color when not selected

4.2 Adding Images in Segments

let segmentedControl = UISegmentedControl(items: [
    UIImage(systemName: "house")!,
    UIImage(systemName: "star")!,
    UIImage(systemName: "gear")!
])

4.3 Changing the Font of Segments

let font = UIFont.systemFont(ofSize: 18, weight: .bold)
segmentedControl.setTitleTextAttributes([NSAttributedString.Key.font: font], for: .normal)

---

5. Handling Segment Selection

You can perform different actions based on the selected segment.

@objc func segmentChanged(_ sender: UISegmentedControl) {
    switch sender.selectedSegmentIndex {
    case 0:
        print("First segment selected")
    case 1:
        print("Second segment selected")
    case 2:
        print("Third segment selected")
    default:
        break
    }
}

---

6. Adding and Removing Segments Dynamically

6.1 Adding a New Segment

segmentedControl.insertSegment(withTitle: "New", at: 2, animated: true)

6.2 Removing a Segment

segmentedControl.removeSegment(at: 1, animated: true)

6.3 Removing All Segments

segmentedControl.removeAllSegments()

---

7. Common Issues & Fixes

❌ Issue: UISegmentedControl Not Visible

✅ Fix: Make sure it has constraints and is inside the view hierarchy.

❌ Issue: Text Color Not Changing

✅ Fix: Use setTitleTextAttributes instead of textColor.

---

8. Conclusion

✔️ UISegmentedControl is useful for toggling between options
✔️ Supports text, images, and custom styles
✔️ Can be programmatically created or added via Storyboard
✔️ Provides real-time selection handling

Would you like a custom implementation for your project? 🚀