Forms in SwiftUI
DevTechie Inc
DevTechie Inc
Form is a container for grouping controls. Settings app is the best example of forms in action.
SwiftUI applies platform-appropriate styling to views contained inside a form so they can be grouped together. Form has platform-appropriate styles which are specific for controls like buttons, toggle, labels, lists etc. Forms are scrollable so they are great fit to build app’s settings, filters or options view.
Controls in Form can be grouped using the Section view.
Let’s start learning about Forms. We will start with Text views.
struct DevTechieFormExample: View {
var body: some View {
NavigationView {
Form {
Text("Hello and welcome from DevTechie.com")
}
.navigationTitle("DevTechie Settings")
}
}
}
Form cells grow automatically to fit the content being presented.
struct DevTechieFormExample: View {
var body: some View {
NavigationView {
Form {
Text("Hello and welcome from DevTechie.com")
Text("At DevTechie, we believe in learning by example. Here you will find examples which will help you learn app development by building real examples.")
}
.navigationTitle("DevTechie Settings")
}
}
}
We can add sections to the Form.
struct DevTechieFormExample: View {
var body: some View {
NavigationView {
Form {
Text("Hello and welcome from DevTechie.com")
Text("At DevTechie, we believe in learning by example. Here you will find examples which will help you learn app development by building real examples.")
Section(header: Text("SwiftUI Courses")) {
Text("Mastering SwiftUI 3")
Text("Photo Gallery App in SwiftUI 4")
Text("DisneyPlus Clone in SwiftUI")
}
Section(header: Text("UIKit Courses")) {
Text("Music Player in UIKit")
Text("Strava Clone in UIKit")
Text("TableViews in UIKit")
}
}
.navigationTitle("DevTechie Settings")
}
}
}
Sections can be customized for header and footer content.
Section {
Text("Music Player in UIKit")
Text("Strava Clone in UIKit")
Text("TableViews in UIKit")
} header: {
HStack {
Image(systemName: "graduationcap.fill")
Text("UIKit Courses")
}
.foregroundColor(.orange)
} footer: {
Text("50+ video courses and 200+ articles")
}
We can add Picker and Toggle views in the Form.
struct DevTechieFormExample: View {
@State private var selection = ""
@State private var showEmail = false
var body: some View {
NavigationView {
Form {
Text("Hello and welcome from DevTechie.com")
Text("At DevTechie, we believe in learning by example. Here you will find examples which will help you learn app development by building real examples.")
Section(header: Text("Profile Preferences")) {
Picker("Email Visibility", selection: $selection) {
Text("Only Me").tag("me")
Text("Connections").tag("connections")
Text("Global").tag("global")
}
Toggle("Show email", isOn: $showEmail)
}
Section(header: Text("SwiftUI Courses")) {
Text("Mastering SwiftUI 3")
Text("Photo Gallery App in SwiftUI 4")
Text("DisneyPlus Clone in SwiftUI")
}
Section {
Text("Music Player in UIKit")
Text("Strava Clone in UIKit")
Text("TableViews in UIKit")
} header: {
HStack {
Image(systemName: "graduationcap.fill")
Text("UIKit Courses")
}
.foregroundColor(.orange)
} footer: {
Text("50+ video courses and 200+ articles")
}
}
.navigationTitle("DevTechie Settings")
}
}
}
DatePicker is also supported in Form.
struct DevTechieFormExample: View {
@State private var selection = ""
@State private var showEmail = false
@State private var date = Date()
var body: some View {
NavigationView {
Form {
Text("Hello and welcome from DevTechie.com")
Text("At DevTechie, we believe in learning by example. Here you will find examples which will help you learn app development by building real examples.")
Section(header: Text("Profile Preferences")) {
Picker("Email Visibility", selection: $selection) {
Text("Only Me").tag("me")
Text("Connections").tag("connections")
Text("Global").tag("global")
}
Toggle("Show email", isOn: $showEmail)
DatePicker("Today's date", selection: $date)
}
Section(header: Text("SwiftUI Courses")) {
Text("Mastering SwiftUI 3")
Text("Photo Gallery App in SwiftUI 4")
Text("DisneyPlus Clone in SwiftUI")
}
Section {
Text("Music Player in UIKit")
Text("Strava Clone in UIKit")
Text("TableViews in UIKit")
} header: {
HStack {
Image(systemName: "graduationcap.fill")
Text("UIKit Courses")
}
.foregroundColor(.orange)
} footer: {
Text("50+ video courses and 200+ articles")
}
}
.navigationTitle("DevTechie Settings")
}
}
}
Starting iOS 15, Sections have headerProminence modifier to make section header prominent.
Section(header: Text("Profile Preferences")) {
Picker("Email Visibility", selection: $selection) {
Text("Only Me").tag("me")
Text("Connections").tag("connections")
Text("Global").tag("global")
}
Toggle("Show email", isOn: $showEmail)
}.headerProminence(.increased)
We can add custom background to Form views with the help of listRowBackground modifier.
struct DevTechieFormExample: View {
@State private var selection = ""
@State private var showEmail = false
var body: some View {
NavigationView {
Form {
Text("Hello and welcome from DevTechie.com")
Text("At DevTechie, we believe in learning by example. Here you will find examples which will help you learn app development by building real examples.")
Section(header: Text("Profile Preferences").foregroundColor(.mint)) {
Picker("Email Visibility", selection: $selection) {
Text("Only Me").tag("me")
Text("Connections").tag("connections")
Text("Global").tag("global")
}
Toggle("Show email", isOn: $showEmail)
}
.headerProminence(.increased)
.foregroundColor(.white)
.listRowBackground(Color.mint)
Section(header: Text("SwiftUI Courses").foregroundColor(.indigo)) {
Text("Mastering SwiftUI 3")
Text("Photo Gallery App in SwiftUI 4")
Text("DisneyPlus Clone in SwiftUI")
}
.foregroundColor(.white)
.listRowBackground(Color.indigo)
Section {
Group {
Text("Music Player in UIKit")
Text("Strava Clone in UIKit")
Text("TableViews in UIKit")
}
.foregroundColor(.white)
.listRowBackground(Color.orange)
} header: {
HStack {
Image(systemName: "graduationcap.fill")
Text("UIKit Courses")
}
.foregroundColor(.orange)
} footer: {
Text("50+ video courses and 200+ articles")
}
}
.navigationTitle("DevTechie Settings")
}
}
}
We can add DisclosureGroup into the Form as well.
struct DevTechieFormExample: View {
@State private var selection = ""
@State private var showEmail = false
var body: some View {
NavigationView {
Form {
Text("Hello and welcome from DevTechie.com")
Text("At DevTechie, we believe in learning by example. Here you will find examples which will help you learn app development by building real examples.")
Section(header: Text("Profile").foregroundColor(.mint)) {
DisclosureGroup("Preferences") {
Picker("Email Visibility", selection: $selection) {
Text("Only Me").tag("me")
Text("Connections").tag("connections")
Text("Global").tag("global")
}
Toggle("Show email", isOn: $showEmail)
}
}
.headerProminence(.increased)
.foregroundColor(.white)
.listRowBackground(Color.mint)
Section(header: Text("SwiftUI").foregroundColor(.indigo)) {
DisclosureGroup("Video Courses") {
Text("Mastering SwiftUI 3")
Text("Photo Gallery App in SwiftUI 4")
Text("DisneyPlus Clone in SwiftUI")
}
}
.foregroundColor(.white)
.listRowBackground(Color.indigo)
Section {
DisclosureGroup("Video Courses") {
Text("Music Player in UIKit")
Text("Strava Clone in UIKit")
Text("TableViews in UIKit")
}
.foregroundColor(.white)
.listRowBackground(Color.orange)
} header: {
HStack {
Image(systemName: "graduationcap.fill")
Text("UIKit")
}
.foregroundColor(.orange)
} footer: {
Text("50+ video courses and 200+ articles")
}
}
.navigationTitle("DevTechie Settings")
}
}
}
With that we have reached the end of this article. Thank you once again for reading. Don’t forget to subscribe our newsletter at https://www.devtechie.com