Picker and segmented control in SwiftUI on iOS

Picker is used for presenting a selection consisting of multiple options. UISegmentedControl which is known from UIKit is just a different picker style in SwiftUI. Let’s take a quick look on how to create a form with two items: picker with default style and picker with segmented style.

Creating a from

Form should be typically presented in a NavigationView which enables picker to present a list of items on a separate view in the navigation stack. Using the code below, we can create a form view which has a familiar visual style.

	var body: some View {
	NavigationView {
	Form {
	Section {
	makeFruitPicker()
	makePlanetPicker()
	}.navigationBarTitle("Pickers")
	}
	}.navigationViewStyle(StackNavigationViewStyle())
	}

view raw ContentViewAndForm.swift hosted with ❤ by GitHub

Setting up a picker and providing data with enum

Creating a picker requires specifying a title, a binding for selection, and function for providing a content. In the example below, we are using ForEach for creating views on demand. The number of options is defined by the number of items in the array. Each string is also used as identification of the view provided by the ForEach.

	@State private var selectedPlanet = ""
	let planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Neptune", "Uranus"]
	func makePlanetPicker() -> some View {
	Picker("Planets", selection: $selectedPlanet) {
	ForEach(planets, id: \.self) { planet in
	Text(planet)
	}.navigationBarTitle("Planets")
	}
	}

view raw ContentViewAndPicker.swift hosted with ❤ by GitHub

Picker with SegmentedPickerStyle

An enum which is conforming to CaseIterable protocol is a convenient way for defining data for a picker. In the example below, data is identified by enum case’s rawValue and each view has a tag equal to enum’s case. Without a tag, selection would not be displayed because there would not be a connection between the selection binding and the view returned by ForEach.

	enum Fruit: String, CaseIterable {
	case apple, orange, pear
	}
	func makeFruitPicker() -> some View {
	Picker("Fruits", selection: $selectedFruit) {
	ForEach(Fruit.allCases, id: \.rawValue) { fruit in
	Text(fruit.rawValue).tag(fruit)
	}
	}.pickerStyle(SegmentedPickerStyle())
	}

view raw ContentViewAndSegmentedPickerStyle.swift hosted with ❤ by GitHub

Summary

Creating a form view which uses the familiar style from iOS requires only a little bit of code in SwiftUI. Adding pickers and segmented controls, which are used a lot in forms, are pretty easy to set up.

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.