Segmented Control Tutorial in iOS8 with Swift

A segmented control displays a list of options that a user can choose from. Each segment sort of looks like a radio button, the segments remains “pressed” even after the user selects the control. In this tutorial we create 2 segments inside a UISegmentedController. Each segment will display a different text value on a label. This tutorial makes use of Xcode 6 and is build for iOS8.

Update: October 18, 2016. The rewritten version in Swift for iOS 10 and Xcode 8 is available here.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftSegmentedControlTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Go to the storyboard. In Xcode 6 view controllers are now square by default, so that you can create one user interface use just for multiple devices. In iOS8 you can layout the storyboard using constraints and size classes. Since this app is only going to be for the iPhone, you can disable size classes. In the File Inspector untick Use Size Classes.

Choose Keep size class data for: iPhone, and click Disable Size Classes.

Drag a Segmented Control to the main view. Also drag a Label to the view. Select the label give it a text of First Segment selected. Also, in the Attributes Inspector set text Text Alignment to center, The Storyboard should look like this. 

Select the Assistant Editor and open ViewController.swift. Ctrl and drag from the Segmented Control to the ViewController.swift and create the following Outlet.

Ctrl and drag from the Label to the ViewController.swift class and create the following Outlet.

Again, Ctrl and drag from the Segmented Control to the ViewController.swift class and create the following Action.

The indexChanged method is called when the segment index is changed by the user. Implement this method.

@IBAction indexChanged(sender:UISegmentedControl)
{ 
  switch segmentedControl.selectedSegmentIndex 
  { 
    case 0: 
      textLabel.text = "First selected"; 
    case 1: 
      textLabel.text = "Second Segment selected";
    default: 
      break; 
  } 
}

A segmented control displays a list of options that a user can choose from. Each segment sort of looks like a radio button, the segments remains “pressed” even after the user selects the control. In this tutorial we create 2 segments inside a UISegmentedController. Each segment will display a different text value on a label.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftSegmentedControlTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

When the selectedSegmentIndex is changed, the text of the label will be updated. The first segment has an index of 0 and the second segment has an index of 1. Build and Run the project and the text will be updated 

You can download the source code of the iOS8SwiftSegmentedControlTutorial at the ioscreator repository on github.