enum DevTechieCourseCategories: String, CaseIterable, Identifiable { case swiftUI, uiKit, ml, swift var id: Self { self } var name: String { switch self { case .swift: return "Swift" case .ml: return "Machine Learning" case .swiftUI: return "SwiftUI" case .uiKit: return "UIKit" } } }
struct DevTechiePickerExample: View { @State private var selectedCategory: DevTechieCourseCategories = .swiftUI var body: some View { NavigationStack { Picker("Course Categories", selection: $selectedCategory) { } .navigationTitle("DevTechie.com") } } }
Text(DevTechieCourseCategories.swiftUI.name) .tag(DevTechieCourseCategories.swiftUI)Text(DevTechieCourseCategories.uiKit.name) .tag(DevTechieCourseCategories.uiKit)Text(DevTechieCourseCategories.ml.name) .tag(DevTechieCourseCategories.ml)Text(DevTechieCourseCategories.swift.name) .tag(DevTechieCourseCategories.swift)
struct DevTechiePickerExample: View { @State private var selectedCategory: DevTechieCourseCategories = .swiftUI var body: some View { NavigationStack { Picker("Course Categories", selection: $selectedCategory) { Text(DevTechieCourseCategories.swiftUI.name) .tag(DevTechieCourseCategories.swiftUI) Text(DevTechieCourseCategories.uiKit.name) .tag(DevTechieCourseCategories.uiKit) Text(DevTechieCourseCategories.ml.name) .tag(DevTechieCourseCategories.ml) Text(DevTechieCourseCategories.swift.name) .tag(DevTechieCourseCategories.swift) } .navigationTitle("DevTechie.com") } } }
Note that the selection property actually looks at the tag property in Picker content to observe and reflect the change.
struct DevTechiePickerExample: View { @State private var selectedCategory: DevTechieCourseCategories = .swiftUI var body: some View { NavigationStack { Picker("Course Categories", selection: $selectedCategory) { ForEach(DevTechieCourseCategories.allCases) { category in Text(category.name) .tag(category) } } .navigationTitle("DevTechie.com") } } }
Note: By default on iOS(starting iOS 15) default picker style is menu style. Also starting iOS 16, we get up down chevron for the label.
struct DevTechiePickerExample: View { @State private var selectedCategory: DevTechieCourseCategories = .swiftUI var body: some View { NavigationStack { List { Picker("Course Categories", selection: $selectedCategory) { ForEach(DevTechieCourseCategories.allCases) { category in Text(category.name) .tag(category) } } } .navigationTitle("DevTechie.com") } } }
enum DevTechieCourse: String, CaseIterable, Identifiable { case materingSwiftUI4, machineLearningIniOS, learnSwiftByExample, buildStravaCloneInUiKit var id: Self { self } var name: String { switch self { case .materingSwiftUI4: return "Mastering SwiftUI 4" case .machineLearningIniOS: return "Machine Learning in iOS" case .buildStravaCloneInUiKit: return "Build Strava Clone in UIKit" case .learnSwiftByExample: return "Learn Swift By Example" } } }
extension DevTechieCourseCategories { var suggestedCourse: DevTechieCourse { switch self { case .swiftUI: return .materingSwiftUI4 case .ml: return .machineLearningIniOS case .swift: return .learnSwiftByExample case .uiKit: return .buildStravaCloneInUiKit } } }
@State private var suggestedCourse = DevTechieCourse.materingSwiftUI4
Picker("Course Categories", selection: $suggestedCourse)
Text(category.name).tag(category.suggestedCourse)
Section { Text(suggestedCourse.name) .foregroundColor(.secondary) } header: { Text("Suggested Course") }
enum DevTechieCourseCategories: String, CaseIterable, Identifiable { case swiftUI, uiKit, ml, swift var id: Self { self } var name: String { switch self { case .swift: return "Swift" case .ml: return "Machine Learning" case .swiftUI: return "SwiftUI" case .uiKit: return "UIKit" } } }enum DevTechieCourse: String, CaseIterable, Identifiable { case materingSwiftUI4, machineLearningIniOS, learnSwiftByExample, buildStravaCloneInUiKit var id: Self { self } var name: String { switch self { case .materingSwiftUI4: return "Mastering SwiftUI 4" case .machineLearningIniOS: return "Machine Learning in iOS" case .buildStravaCloneInUiKit: return "Build Strava Clone in UIKit" case .learnSwiftByExample: return "Learn Swift By Example" } } }extension DevTechieCourseCategories { var suggestedCourse: DevTechieCourse { switch self { case .swiftUI: return .materingSwiftUI4 case .ml: return .machineLearningIniOS case .swift: return .learnSwiftByExample case .uiKit: return .buildStravaCloneInUiKit } } }struct DevTechiePickerExample: View { @State private var suggestedCourse = DevTechieCourse.materingSwiftUI4 var body: some View { NavigationStack { List { Picker("Course Categories", selection: $suggestedCourse) { ForEach(DevTechieCourseCategories.allCases) { category in Text(category.name) .tag(category.suggestedCourse) } } Section { Text(suggestedCourse.name) .foregroundColor(.secondary) } header: { Text("Suggested Course") }} .navigationTitle("DevTechie.com") } } }
This example shows that Picker is bound to DevTechieCourse type while the options are all DevTechieCourseCategory instances. Each option uses the tag modifier to associate the suggested course with the category it displays.
struct DevTechiePickerExample: View { @State private var suggestedCourse = DevTechieCourse.materingSwiftUI4 var body: some View { NavigationStack { List { Picker("Course Categories", selection: $suggestedCourse) { ForEach(DevTechieCourseCategories.allCases) { category in Text(category.name) .tag(category.suggestedCourse) } } .pickerStyle(.segmented) Section { Text(suggestedCourse.name) .foregroundColor(.secondary) } header: { Text("Suggested Course") }} .navigationTitle("DevTechie.com") } } }
.pickerStyle(.wheel)
.pickerStyle(.inline)
.pickerStyle(.inline)
enum DevTechieCourseCategories: String, CaseIterable, Identifiable { case swiftUI, uiKit, ml, swift case flutter, kotlin var id: Self { self } var name: String { switch self { case .swift: return "Swift" case .ml: return "Machine Learning" case .swiftUI: return "SwiftUI" case .uiKit: return "UIKit" case .flutter: return "Flutter" case .kotlin: return "Kotlin" } } }
enum DevTechieCourse: String, CaseIterable, Identifiable { case materingSwiftUI4, machineLearningIniOS, learnSwiftByExample, buildStravaCloneInUiKit case flutterDevForiOS, androidWithKotlin var id: Self { self } var name: String { switch self { case .materingSwiftUI4: return "Mastering SwiftUI 4" case .machineLearningIniOS: return "Machine Learning in iOS" case .buildStravaCloneInUiKit: return "Build Strava Clone in UIKit" case .learnSwiftByExample: return "Learn Swift By Example"case .flutterDevForiOS: return "Flutter Dev for iOS" case .androidWithKotlin: return "Learn Android with Kotlin" } } }extension DevTechieCourseCategories { var suggestedCourse: DevTechieCourse { switch self { case .swiftUI: return .materingSwiftUI4 case .ml: return .machineLearningIniOS case .swift: return .learnSwiftByExample case .uiKit: return .buildStravaCloneInUiKit case .flutter: return .flutterDevForiOS case .kotlin: return .androidWithKotlin } } }
var category1 = [DevTechieCourseCategories.swiftUI, .swift, .ml, .uiKit] var category2 = [DevTechieCourseCategories.flutter, .kotlin]
Section { ForEach(category1) { category in Text(category.name) .tag(category.suggestedCourse) } } header: { Text("iOS & Related") }Section { ForEach(category2) { category in Text(category.name) .tag(category.suggestedCourse) } } header: { Text("Others") }
enum DevTechieCourseCategories: String, CaseIterable, Identifiable { case swiftUI, uiKit, ml, swift case flutter, kotlin var id: Self { self } var name: String { switch self { case .swift: return "Swift" case .ml: return "Machine Learning" case .swiftUI: return "SwiftUI" case .uiKit: return "UIKit" case .flutter: return "Flutter" case .kotlin: return "Kotlin" } } }enum DevTechieCourse: String, CaseIterable, Identifiable { case materingSwiftUI4, machineLearningIniOS, learnSwiftByExample, buildStravaCloneInUiKit case flutterDevForiOS, androidWithKotlin var id: Self { self } var name: String { switch self { case .materingSwiftUI4: return "Mastering SwiftUI 4" case .machineLearningIniOS: return "Machine Learning in iOS" case .buildStravaCloneInUiKit: return "Build Strava Clone in UIKit" case .learnSwiftByExample: return "Learn Swift By Example"case .flutterDevForiOS: return "Flutter Dev for iOS" case .androidWithKotlin: return "Learn Android with Kotlin" } } }extension DevTechieCourseCategories { var suggestedCourse: DevTechieCourse { switch self { case .swiftUI: return .materingSwiftUI4 case .ml: return .machineLearningIniOS case .swift: return .learnSwiftByExample case .uiKit: return .buildStravaCloneInUiKit case .flutter: return .flutterDevForiOS case .kotlin: return .androidWithKotlin } } }struct DevTechiePickerExample: View { @State private var suggestedCourse = DevTechieCourse.materingSwiftUI4 var category1 = [DevTechieCourseCategories.swiftUI, .swift, .ml, .uiKit] var category2 = [DevTechieCourseCategories.flutter, .kotlin] var body: some View { NavigationStack { List { Picker("Course Categories", selection: $suggestedCourse) { Section { ForEach(category1) { category in Text(category.name) .tag(category.suggestedCourse) } } header: { Text("iOS & Related") }Section { ForEach(category2) { category in Text(category.name) .tag(category.suggestedCourse) } } header: { Text("Others") } } Section { Text(suggestedCourse.name) .foregroundColor(.secondary) } header: { Text("Suggested Course") }} .navigationTitle("DevTechie.com") } } }
Section { ForEach(category1) { category in HStack { Text(category.name) Spacer() Image(systemName: "graduationcap.fill") } .tag(category.suggestedCourse) } } header: { Text("iOS & Related") }
Note: Picker selection seems to keep image around even for the entries where there is no image (Flutterand Kotlin are the example here). It could be a bug or feature 😉
With that we have reached the end of this article. Thank you once again for reading. Don’t forget to follow 😍. Also subscribe our newsletter at https://www.devtechie.com