SwiftUI — Basic components.

A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

You have 2 free member-only stories left this month. Sign up for Medium and get an extra one.

Member-only story
Search Medium Write Sign up Sign In

SwiftUI — Basic components

To make Medium work, we log user data. By using Medium, you agree to our Privacy Policy,
including cookie policy.

A simple introduction to UI components in SwiftUI

Lucas Pelizza · Follow

Published in Better Programming · 4 min read · Jul 27, 2019

424

SwiftUI
Betterapps.Lesscode.

I’m going to present a series of UI components using SwiftUI.

Each component will be described in a few simple lines. You

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 1 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

might find this article useful as a guide.

Contents
User Inputs: Toggle, Slider, TextField, picker, datePicker
and SegmentedControl

Containers: Scrollview, Table and Form

Presenters: Alert, ActionSheet and Popover

SwiftUI example project

Toggle
The purpose of Toggle is simple: it is used to bind a property. In
some cases, we can use it to alter the screen, showing or hiding
other views.

1 struct ContentView : View {

2 @State private var isPushEnable = false
3
4 var body: some View {
5 Form {
6 Section {
7 Toggle(isOn: $isPushEnable) {
8 Text("Push Notification")
9 }
10
11 if isPushEnable {
12 Text("Schedule Notification")
13 }
14 }
15 }
16 }

SwiftUI — Toggle

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 2 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

iPhone screenshot

TextField
To use a TextField we just need to specify a placeholder(String)
and a binding.

1 struct ContentView : View {

2 @State private var username: String = ""
3 var body: some View {
4 Form {

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 3 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

5 Section {
6 TextField("Username", text: $username)
7 }
8 }
9 }
10 }

SwiftUI — TextField

Picker

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 4 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

Picker has a plus in SwiftUI. Using it inside a Form the app will
navigate to a detail view with the option list.

If we want to show the picker with the classic inline style, we

just add the line .pickerStyle(.wheel) .

1 struct ContentView : View {

2 var fruits = ["Apple", "Apricot", "Banana", "Pear"]
3 @State var selectedFruit = 0
4
5 var body: some View {
6 NavigationView {
7 Form {
8 Section {
9 Picker(selection: $selectedFruit, label: Text("Fruit")) {
10 ForEach(0 ..< fruits.count) {
11 Text(self.fruits[$0]).tag($0)
12 }
13 }
14 }
15 }.navigationBarTitle(Text("Select your Fruit"))
16 }
17 }
SwiftUI — Picker

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 5 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

Segmented Control
Segmented control is a nice tool to show different views on the
same screen.

1 struct ContentView : View {

2 var colors = ["Blue", "Yellow", "Red"]
3
4 @State private var selectedColor = 0
5 var body: some View {
https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 6 sur 24
SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

5 var body: some View {

6 VStack {
7 SegmentedControl(selection: $selectedColor) {
8 ForEach(0..<colors.count) { index in
9 Text(self.colors[index]).tag(index)
10 }
11 }
12 }
13 }

SwiftUI — SegmentedControl

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 7 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

Containers

ScrollView
Implement it via the ScrollView view:

1 struct ContentView : View {

2 var colors: [Color] = [.blue, .red, .yellow, .pink]
3 @State private var selectedColor = 0
4
5 var body: some View {
6 ScrollView(.horizontal) {
7 HStack(spacing: 0) {
8 ForEach(0..<colors.count) { index in
9 Rectangle().frame(width: 300, height: 300)
10 .foregroundColor(self.colors[index])
11 }
12 }.frame(height: 600)
13 }
14 }

SwiftUI — ScrollView

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 8 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

List of Items
To show a table in SwiftUI we should use a List view. The List
can show static or dynamic content based on your needs.
However, it is simple to use because we don’t need to write a lot
of code to register the cell or to tell it how many rows there are,
etc.

Using an array of objects (identifiable protocol) and a subview

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 9 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

inside the content block:

1 struct ColorInfo: Identifiable {

2 var id = UUID()
3 var color: Color
4 var name: String
5 }
6
7 struct ContentView : View {
8 var colors = [ColorInfo(color: .red, name: "Red"),
9 ColorInfo(color: .blue, name: "Blue"),
10 ColorInfo(color: .yellow, name: "Yellow")]
11
12 var body: some View {
13 NavigationView {
14 List (colors) { colorInfo in
15 Text(colorInfo.name)
16 .foregroundColor(colorInfo.color)
17 }.navigationBarTitle(Text("List of Colors"))
18 }

SwiftUI — List

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 10 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

Form
SwiftUI’s forms work as containers, so we can add other views
inside them and they will automatically adapt their behaviour
and styling.

We can separate input components with the Section view:

1 struct ContentView : View {

2 var colors = ["Red", "Green", "Blue"]

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 11 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

3 @State var enableNotifications = false

4 @State var username: String = ""
5 @State var selectedColor = 0
6
7 var body: some View {
8 NavigationView {
9 Form {
10 Section {
11 TextField("Username", text: $username)
12 }
13 Section {
14 Toggle(isOn: $enableNotifications) {
15 Text("Enable Notifications")
16 }
17 SegmentedControl(selection: $selectedColor) {
18 ForEach(0 ..< colors.count) {
19 Text(self.colors[$0]).tag($0)
20 }
21 }
22 }
23 Section {
24 Button(action: {}) {
25 Text("Save")
26 }
27 }
28 }.navigationBarTitle(Text("Settings"))
SwiftUI — Form

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 12 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

Presentation
This section shows some of the methods we have to present the
information.

Alert
To create a simple alert we must define a title and message, and
add a dismiss button.

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 13 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

To show the alert we add a bindable condition that determines

whether the alert should be visible or not.

For example, the following code uses a showingAlert (Boolean)

that tracks whether the alert should be shown or not:

1 struct ContentView : View {

2 @State var showingAlert = false
3
4 var body: some View {
5 Button(action: {
6 self.showingAlert = true
7 }) {
8 Text("Show Alert")
9 }.presentation($showingAlert) {
10 Alert(title: Text("Important title"), message: Text("message"), dismissButton
11 }
12 }
13 }
SwiftUI — Alert

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 14 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

ActionSheet
The ActionSheet has the same implementation as Alert.

1 struct ContentView : View {

2 @State var showingSheet = false
3
4 var body: some View {
5 Button(action: {
6 self.showingSheet = true
7 }) {
8 Text("Show Action Sheet")

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 15 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

8 Text("Show Action Sheet")

9 }.presentation($showingSheet) {
10 ActionSheet(title: Text("Action title"), message: Text("description
11 self.showingSheet = false
12 })])
13 }
14 }

SwiftUI — ActionSheet

Popover

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 16 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

Following the same logic that Alert uses, if we want to show a

popover we have to pass a boolean Binding to control the
visibility of the Popover and specify the content:

1 struct ContentView : View {

2 @State var showingPopover = false
3
4 var body: some View {
5 Button(action: {
6 self.showingPopover = true
7 }) {
8 Text("Show new view")
9 }.popover(isPresented: $showingPopover){
10 HStack {
11 Text("New Popover")
12 }.frame(width: 500, height: 500)
13 .background(Color.red)
14 }
15 }

SwiftUI — Popover

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 17 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

SwiftUI Application
If you want to see the previous examples and other components
of SwiftUI, I have created an example project where we can see
how to create an application using SwiftUI. This is the
repository link:
https://github.com/lucasPelizza/SimpleSwiftUIExample/tree/ma
ster

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 18 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

SwiftUI Examples

Final words
I hope that this article was helpful for you!

IOS Swiftui Swift Swiftui Example Swiftui Project

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 19 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

Written by Lucas Pelizza Follow

61 Followers · Writer for Better Programming

iOS Engineer. #Swift fanboy

More from Lucas Pelizza and Better Programming

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 20 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

Lucas Pelizza in Better Programming Timothy Mugayi in Better Programming

How to Build a Service-Agnostic How To Build Your Own Custom

Analytics Layer Into Your iOS App ChatGPT With Custom…
Regardless of what analytics services you Knowledge
Feed Base
your ChatGPT bot with custom
use, fire your event once and log it in the… data sources
right service
· 3 min read · May 27, 2020 · 11 min read · Apr 7

171 3.9K 91

Maximilian Strauss in Better Programming Lucas Pelizza in Better Programming

GPT4All: Running an Open- Gitflow—Little changes that help

source ChatGPT Clone on Your… all the team
Laptop
The open-source chatbot that was trained Improving use of the repository
on ChatGPT output

· 6 min read · Apr 17 · 4 min read · Jul 30, 2019

1.4K 20 472 2

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 21 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

See all from Lucas Pelizza See all from Better Programming

Recommended from Medium

Michal Malewicz The PyCoach in Artificial Corner

There are FIVE levels of UI skill. You’re Using ChatGPT Wrong!

Only level 4+ gets you hired. Here’s How to Be Ahead of 99% …
ChatGPT Users
Master ChatGPT by learning prompt
engineering.

· 6 min read · Apr 25 · 7 min read · Mar 17

1.1K 13 16.5K 292

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 22 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

Alexander Nguyen in Level Up Coding Christina Sa in UX Planet

Why I Keep Failing Candidates The UX Design Case Study That

During Google Interviews… Got Me Hired
They don’t meet the bar. Getting a job in UX design is tough, but one
particular case study helped me stand out…
from the crowd. I designed a non-
· 4 min read · Apr 13 · 8 min read · Mar 16
traditional…

3.1K 99 3.4K 40

Aleid ter Weel in Better Advice Timothy Mugayi in Better Programming

10 Things To Do In The Evening How To Build Your Own Custom

Instead Of Watching Netflix ChatGPT With Custom…
Device-free habits to increase your Knowledge
Feed Base
your ChatGPT bot with custom
productivity and happiness. data sources

· 5 min read · Feb 15, 2022 · 11 min read · Apr 7

17.3K 226 3.9K 91

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 23 sur 24

SwiftUI — Basic components. A simple introduction to UI components… | by Lucas Pelizza | Better Programming 08/05/2023 02:00

See more recommendations

Help Status Writers Blog Careers Privacy Terms About Text to speech

https://betterprogramming.pub/swiftui-basic-components-ac2c62dc7b95 Page 24 sur 24