SUAL TIME - SAVING REFERENCE

Z
L
S
O
!

SwiftUl Views

Quick Start

Mark Moeykens FREE SAMPLE

Big Mountain Studio
 IN
N TA
M OU
G
BI

Studio

Version : 14 -JANUARY-2024

2023 Big Mountain Studio LLC - All Rights Reserved

www.bigmountainstudio.com 2
 Special Thanks from Big Mountain Studio

As a new member of Big Mountain Studio you now get 10% off all of our SwiftUI books !

SWIFTDATA
SWIFTUI

SWIFTUI
VISUALREFERENCE GUIDE
Visual ReferenceGuide VISUAL PICTURE BOOK REFERENCE
YOUR VISUAL TIME-SAVING REFERENCE SwiftD VISUAL TIME-SAVING REFERENCE
Workin wi SwiftU View VISUALTIME-SAVING REFERENCE ata
g th l s
Working with Data SwiftUl Views Master SwiftData Mastery
Data y

MASTERYI
VIEWS
DATA

UI ery
in Swiftl Mastery WIFTUI DEVELOPERS BigMountainStudio in Swift
UI
ECODING BigMountainStudio BigM ELOPERS BigMountainStudio
MarkMoeykens Mark Moeykens Ma Mo kens
rk ey

$34 $30.60 $55 $49.50 $97 $ 87.30

ANIMATIONS

MASTERY

COMBINE
SWIFTUI

18DAL PICTURE BOOKREFERENCE COMPLETE THE COMPLETEXCODEPROJECT

CORE
Visual ReferenceGuide

DATA
VISUAL TIME-SAVING REFERENCE Core Data VISUAL TIME-SAVING REFERENCE Combi VISUAL TIME-SAVING REFERENCE
SwiftUl ne
Animations SwiftUl Animations Maste Core Data Mastery Mastery Combine Mastery
ry

MASTERY
iOS 16

Animation Parts Example UI in SwiftU UI

Mastery y
XTBOOK in Swiftl
Big BigMountainStudio LOPERS BigMountainStudio BigM FTUIDEVELOPERS BigMountainStudio
rk ey ke ns Mark Moeykens
Ma Mo Mark Moeykens 四个四介-

$55 $49.50 $97 $87.30 $147 $ 117.60

CLICK HERE TO GET 10% OFF

3
 Are you new to Swift and SwiftUI ?

Are you a complete beginner to the

Swift language?

My good friend Chris Ching has you

covered !
Make an App
DAY
Before using my reference books you
should have an understanding of the
1
Swift language and how to get around
Xcode. in 8 Days

Chris does a great job of getting

absolute beginners introduced to the
world of Swift and SwiftUl programming
codewithchris
with his amazing and free program .

START THE FREE CHALLENGE TODAY

4
 Book Quick Links

XD CONVENTIONS EFFECT MODIFIERS ( MASTERY BOOK).

SWIFTUI CUSTOM STYLING ( MASTERY BOOK),

SEE YOUR WORK IMAGE MODIFIERS ( MASTERY BOOK).

LAYOUT VIEWS GESTURES ( MASTERY BOOK).

CONTROL VIEWS OTHER MODIFIERS ( MASTERY BOOK).

OTHER VIEWS ( MASTERY BOOK). IMPORTING VIEWS_( MASTERY BOOK).

PAINTS (MASTERY BOOK). ACCESSIBILITY ( MASTERY BOOK).

CONTROLS MODIFIERS ( MASTERY BOOK).

SAVE 10% ON ALL BIG MOUNTAIN STUDIO

LAYOUT MODIFIERS ( MASTERY BOOK). $ BOOKS

www.bigmountainstudio.com 5
HOW TO USE
This is a visual REFERENCE GUIDE. Find a screenshot of something you
want to learn more about or produce in your app and then read it and look
at the code.

Read what is on the screenshots to learn more about the views and what
they can do.
You can also read the book from beginning to end. The choice is yours.

6
 Conventions

CONVENTIONS

www.bigmountainstudio.com 7
 Conventions
Embedded Videos
The ePUB version of the book supports embedded videos.

The PDF version does not.

This play button indicates that this is a playable

video in the ePUB format.

But in PDF it renders as simply a screenshot.

Note: In some ePUB readers you might have to

tap TWICE (2) to play the video.

0:00

www.bigmountainstudio.com 8
 Conventions

Custom Code Color Theme

༡
I created a code color theme based off of another color theme called "Gruvbox ".

If you like this color theme and would like to use it in Xcode then you can find it on my GitHub as a gist here .

Fonts & Colors

alt ee
option
General Accounts Behaviors Navigation Fonts & Colors Text Editing Key Bindings Source Control Components Locations Server & Bots

Theme Source Editor Console

Basic Plain Text
Civic Comments
Documentation Markup
Classic (Dark) Documentation Markup Keywords
Classic (Light) Marks
Customized Dusk Strings
Characters
Default (Dark) Numbers
Default (Light) Keywords
Dusk Preprocessor Statements
URLs
Gruvbox Attributes
High Contrast (Dark) Type Declarations
Other Declarations
High Contrast (Light) Project Class Names
Low Key Project Function and Method Names
Midnight Project Constants
Presentation (Dark) Project Type Names
Project Instance Variables and Globals
Presentation (Light) Project Preprocessor Macros
Presentation Large (Dark) Other Class Names
Presentation Large (Light) SF Mono Regular - 11.0 T Normal Spacing | Vertical Bar Cursor
Printing
Sunset
+ Background Current Line Selection Cursor Invisibles

www.bigmountainstudio.com 9
SWIFTU

10
 Basic Concepts

Basic Concepts

If you are absolutely new to SwiftUI, you should definitely read through this chapter to establish some basic concepts that
you can think with.

www.bigmountainstudio.com 11
 Basic Concepts

Views And Modifiers

༡
6:31

In SwiftUl , you build a UI with Views and then you View

change those views with Modifiers . Modifiers:
Large title text size

Views & Modifiers

View
Concepts
Modifiers:
Title text size Building a UI with SwiftUI
View
• Gray text color consists of using Views and
Modifiers . Traditional methods Modifiers :

used controls and properties. Title text size

• Orange background color
With SwiftUl , you add a view
View and then set properties with Stretched to fit device width
modifiers .
Modifiers :
. Title text size
White text color Button With Shadow
· Orange background
color
• Rounded corners
Shadow

www.bigmountainstudio.com 12
 Basic Concepts

Containers - Vertical Layout Container

Views can be organized in containers. Some

containers organize views in one direction. This is
called Stack.

Here is an example of a Vertical Stack or as SwiftUI

calls it, a “VStack”.

Stacks are views too. They are views that can have
modifiers applied to them.

www.bigmountainstudio.com 13
 Basic Concepts

Horizontal Layout Container

There is another stack that can organize views

horizontally.

SwiftUI calls this horizontal stack an HStack.

www.bigmountainstudio.com 14
 Basic Concepts

Depth Layout Container

Another stack view will organize your views so they

are one on top of another.

This is called the Depth Stack or ZStack.

www.bigmountainstudio.com 15
 Basic Concepts

Grid Layout Container iOS 14

In the second version of SwiftUI, the grid container

view was introduced. There is one for horizontal and
vertical layouts.

www.bigmountainstudio.com 16
 Basic Concepts

Layout Examples

Now that you know these layout stacks, you can start to guess
how views like these might be arranged using SwiftUI.

VStack

HStack

In this book, you will be seeing hundreds of layout examples.

Pretty soon, it will become a natural ability of yours to recognize
layout.

www.bigmountainstudio.com 17
 Basic Concepts

Relationships - Parent & Child

It is common in programming to express a hierarchy Parent View (HStack)

of objects as a parent and child relationship.

In this book, I use this concept to express

relationships with SwiftUI views.

In this example, you have an HStack view that

contains two child views within it. The HStack is the
It is beneficial to know that Apple refers to child views
parent. that have no children of their own as “leaf views”.

These two child views are leaf views because they

contain no other views within them.

Child Views inside

Leaf View

www.bigmountainstudio.com 18
 Basic Concepts

Relationships - And Modifiers

Some modifiers can be set on the parent view and it

will also apply to all children in the container.

In this example, the font size is set on the parent and

the child views use it.
Text View (Child)
The “Parent” text does not use the font size because
Overriding Modifiers:
it overrides it with a larger font size.
• Font size of 50 points

VStack View (Parent)

Modifiers applied to all child views:
• Font size of 30 points

www.bigmountainstudio.com 19
 Understanding the Syntax

Understanding the Syntax

If you have used Swift in the past, then the SwiftUI syntax may look a little different.

It may not be readily apparent just how this code can even compile. This chapter is to help you understand how the code is
able to work.

www.bigmountainstudio.com 20
 Understanding the Syntax

The View

༡
struct BasicSyntax : View {
10:43
var body : some View {

Text ( " Hello World ! " ) // Adds a text view to the screen

Views in SwiftUI are structs that conform to

the View protocol . If " body " is a property, then where is the "get "
and "return " syntax?

There is just one property to implement , In Swift , these are optional under certain
the body property. circumstances .

Hello World!
This is where you design your screens . If not needed , they are usually not used to keep
the code clean or simpler.

www.bigmountainstudio.com 21
 Understanding the Syntax

Property Getters

༡
struct Person {
Properties can have a getter and setter. But when a
// Computed read - only property ( no setter , value is not stored )
property has no setter, it's called a " read - only"
var personType : String {
property. get {
And when the property does not store a value , it is return " human "
}
called a "computed " property.
}
This is because the value is computed or generated
}
every time the property is read .
In this example, personType is a computed read- only
property.

// Change 1 - Remove the return

struct Person {
var personType : String {
get {
You can further simplify this
" human "
property in two ways : }
} Now, when looking at this property
1. When the code inside the get is a single expression } again, you can better understand
(one thing ) , the getter will just return it and see that it is written without
automatically. You can remove return . the extra get and return keywords .
See "Change 1 " in the code example.
struct BasicSyntax : View {
2. When a property is read - only ( no setter) , we can // Change 2 Remove the get var body : some View {
remove the get . var personType : String {
Text ( " Hello World ! " )
" human "
Just know that these changes are optional . } }
} }

www.bigmountainstudio.com 22
 Understanding the Syntax
SwiftUI With Property Getters

Since these property changes are optional, you can, for example, write the previous SwiftUI syntax
with a get and return inside the body property. This might look more familiar to you now:

// SwiftUI with the get and return keywords

struct BasicSyntax: View {

var body: some View {

get {

return Text("Hello World!")

Looking at this code again, you notice the some keyword here.

Normally, when defining a type for a property, you wouldnʼt see this word.

So, what does the some keyword do?

www.bigmountainstudio.com 23
 Understanding the Syntax

Opaque Types

struct BasicSyntax : View {

10:43 The View returned from the body property is called an
var body : some View {
"Opaque Type".

Text ( " Hello World ! " ) The keyword some is specifying that it is an opaque type .

What exactly is an opaque type?

Well, the English definition for the word "opaque ", when referring to languages , means " hard or
Hello World! impossible to understand ."

In the code example, it is " hard or impossible to understand " which type of view is being returned but
at least you know it is a view.

When this View ( BasicSyntax) is used by iOS to draw the screen , it doesn't have to know that the type
Text is being returned . It is OK with just knowing that some View is being returned and can use that
view to draw the screen .

And so you can return anything in that body property as long as it conforms to the View protocol .

For more information on Opaque Types, I recommend referring to the Swift Programming Language
documentation.

www.bigmountainstudio.com 24
 Understanding the Syntax

Understanding Opaque Types

༡
Here is a way to help you understand opaque types .

Let's say you have a box of books .

You know there are books inside , but you don't know exactly which
books they are . You can't see the titles of the books .

That is like an opaque type in Swift .

It hides the details of what is inside, but you know they are books and
you can do things with them, like put them on the book shelf.

Box of Views
Some Views
In this case, you have a box of different views .

They could be text , images , views for layout , etc.

You don't care which specific type it is as long as it is a View.

There is another important thing to know

about opaque types too ...

L

www.bigmountainstudio.com 25
 Understanding the Syntax

Opaque Types ( some Keyword )

7:52 You already know from the previous page that what is returned from the body property is something
that conforms to the View protocol .

But what you also need to know is when returning an opaque type ( using the some keyword ) , is that all
possible return types must all be of the same type .
In most cases you are only returning one type . But you might have a scenario like this :

struct Understanding TheSomeKeyword : View {

var isYellow = true

// The keyword " some " tells us that whatever we return , it has to :
// 1. Conform to the View protocol
// 2. Has to ALWAYS be the same type of View that is returned .
var body : some View {

// ERROR : Function declares an opaque return type , but the return statements
in its body do not have matching underlying types
if isYellow {
return Color.yellow // Color type does not match the Text type
}

return_Text ( " No color yellow " ) Text type does not match the color type
}
}

The body property returns a Color and a Text type. This violates the
X
some keyword.

www.bigmountainstudio.com 26
 Understanding the Syntax

Opaque Types Solution

༡
7:52 The solution would be to change the views returned so they are all the same TYPE . The body now
returns the same type of view (Color) .

struct Understanding TheSomeKeyword Solution : View {

var isYellow = true

// The keyword " some " tells us that whatever we return , it has to :
// 1. Conform to the View protocol
// 2. Has to ALWAYS be the same type of View that is returned .

var body : some View {

if isYellow {
return Color.yellow
}
Now, the body property always returns a Color type.
return Color.clear- This satisfies the some keyword.
}
}

www.bigmountainstudio.com 27
 Understanding the Syntax

View Containers

༡
struct Example : View {
9:48
var body : some View {
VStack {
Text ( " Hello World ! " )
Text ( " This Vertical Stack is using a function builder " Note : If you don't specify
} a VStack here , SwiftUI will
}
use one by default .
}

So far, you have learned that body is a computed read - only property and can only return ONE object
that is some View. What if you want to show multiple views though?

You learned earlier about the concept of "container " views . These are views that can contain other
Hello World!
This Vertical Stack is using a function builder views . Remember, the body property can only return one view. You will get an error if you try to return
more than one view in the body property.

In the example above , the VStack (Vertical Stack) is that one view being returned . And that vertical
stack is a container with two more views inside of it .

The VStack is using a " trailing closure ," which just means that it is a code block that is passed into the
initializer to be run by the VStack. You have probably seen this before in Swift , this is not new.

What is new in Swift is the ability to create multiple, new views within the constructor like this . Before
we get into this though , let's better understand how this constructor works .

www.bigmountainstudio.com 28
 Understanding the Syntax

View Container Initialization

༡
struct Example : View {
In Swift, you usually see parentheses during var body : some View {
initialization but with a trailing closure , the VStack {
parentheses are optional . Text ( " Hello World ! " )
You can add them and the code will still work just Text ( " This Vertical Stack is using a function builder " )
fine. }
}

See "Change 1" in the code example. }

This change may start looking more familiar to you . // Change 1 - Add parentheses and parameter name
struct Example : View {
var body : some View {
VStack ( content : {
Text ( " Hello World ! " )
Text ( " This Vertical Stack is using a function builder " )
})
How does the VStack know how to accept the }
multiple views like this? }
This is new in Swift . To better understand this , take
a look at the VStack's initializer.

// VStack initializer
The alignment and spacing parameters are optional ,
init ( alignment : HorizontalAlignment = .center ,
that is why you don't see them in the examples
spacing : CGFloat ? = nil ,
above. But notice before the content parameter
@ViewBuilder content : ( ) -> Content )
there is @ViewBuilder syntax .

This is what allows you to declare multiple views

within the content parameter's closure .

www.bigmountainstudio.com 29
 Understanding the Syntax

@ViewBuilder Parameter Attribute

༡
struct ViewBuilderExample : View {
The @ViewBuilder parameter attribute allows var body : some View {
Swift to build multiple child views from within VStack {
Text ( " View 1 " )
a closure .
Text ( " View 2 " )
iOS 17
Text ( " View 3" )
Text ( " View 4 " )
Text ( " View 5" ) You can now have more than 10
Text ( " View 6 " ) views.
Text ( " View 7" )
Text ( " View 8" )
Text ( " View 9 " )
Text ( " View 10 " )
How many child views can I build within a
Text ( " View 11 " ) // Will no longer cause an error
closure?
}
Before iOS 17 there was a limit of 10 views. With }
iOS 17, there is no longer a limit . }

struct ViewBuilderExample : View {

var body : some View {
VStack {
// Text views 1 - 5
Text ( " View 6" )
? Text ( " View 7")
Text ( " View 8" )
Text ( " View 9 " )
What if I need to support iOS 16 or prior? VStack {
Then you will be limited to 10 views. Text ( " View 10 " )
You can workaround this by nesting more Text ( "View 11 " )
}
views though . Take a look at this example .
}

www.bigmountainstudio.com 30
 My Template

If you are completely new to SwiftUI you may wonder what a lot of this code means right at the beginning of the book. I
have “templates” that contains a title, subtitle and a short description on most SwiftUI screens.

I will take you through step-by-step on how I build this template that I use throughout the book. I will describe each one
only briefly because each modifier I apply to the views here are described in more detail throughout the book within their
own sections.

www.bigmountainstudio.com 31
 MyTemplate

My Basic Template

7:30
Here is my basic template I use throughout the book to explain views and modifiers .

In the next pages I'm going to explain how this is built in SwiftUI . I want to make sure you understand
these parts because you will see them everywhere in this book .

I want to remove any confusion right at the beginning so it doesn't get in your way to learning the
topics in the book .

Let's start with the title .

Title

Subtitle

Short description of what I am

demonstrating goes here .

(Content of what I am
demonstrating goes here .)

www.bigmountainstudio.com 32
 My Template

Starting with the Title

struct Title: View {
var body: some View {

Text("Title") // Create text on the screen

.font(.largeTitle) // Use a font modifier to make text larger

}
}

Here, you have a Text view. You want to make it larger so you use the font modifier so you can set the
size to a SwiftUI preset size called largeTitle (this is the largest preset size).

There are more ways you can change the size of text that are covered in this book in the Control Views
chapter, in the section called Text.

www.bigmountainstudio.com 33
 My Template

Add a VStack
struct AddVStack: View {
var body: some View {
// Only one view can be returned from the body property.
// Add 20 points between views within this container.
VStack(spacing: 20) { // VStack is a container view that can hold up to 10 views
Text("Title")
.font(.largeTitle)
}
}
}

VStack
Spacing
The body property can only return one view.
The VStack has an optional parameter you can
You will get an error if you have two views. use in its initializer to specify how many points
of spacing you want in between views. (Note:
So, you need to use a container view that will spacing does not add spacing to the top or
contain multiple views. The vertical stack bottom of the VStack.)
(VStack) is the perfect choice here.

Now you can add up to 9 more views to the Now, letʼs add the subtitle
VStack.
text.

www.bigmountainstudio.com 34
 My Template

Adding the Subtitle

༡
struct Subtitle : View {
7:13 var body : some View {
VStack ( spacing : 20 ) {
Text ( " Title " )
· font ( .largeTitle )

Text ( " Subtitle " )

font ( .title ) // Set to be the second largest font .
. foregroundColor ( Color.gray ) // Change text color to gray .
}
}

Title

Subtitle Subtitle

The subtitle is another text view. This time , you set the size to be the second largest preset size with
the title parameter.

Finally, you modify the view to change the text color to gray. (Note: instead of using Color.gray you
can also use just .gray.)

Now , let's add the description text .

365

www.bigmountainstudio.com
 MyTemplate

Add the Description with a Background Color

༡
struct Description1 : View {
7:35 var body : some View {
VStack ( spacing : 20 ) {
Text ( " Title " )
· font ( .largeTitle )

Text ( " Subtitle " )

.font ( .title )
. foregroundColor ( .gray )

Text ( " Short description of what I am demonstrating goes here . " )

.font ( .title )
. foregroundColor ( Color.white )
Title .background ( Color.blue ) // Add the color blue behind the text .
}
Subtitle
}
}
Short description of what I am
demonstrating goes here .
With the description text view, you are now familiar with the font and foregroundColor modifiers . But now
you want to add a color behind the text . So you use the background modifier to set a color.

The important thing to notice here is it is not a backgroundColor modifier. That does not exist . It is a
background modifier because it adds a layer behind the view.

Color.blue is actually a view. So the background modifier is adding a blue view on a layer behind the text .

We want this view to extend to the edges of the screen . So let's add that next.

www.bigmountainstudio.com 36
 My Template

Adding a Frame Modifier

༡
struct Description2 : View {
7:53
var body : some View {
VStack ( spacing : 20 ) {
Text ( " Title " )
.font ( .largeTitle )

Text ( " Subtitle " )

.font ( .title )
.foregroundColor ( .gray )

Text ( " Short description of what I am demonstrating goes here . " )

.frame ( maxWidth : .infinity ) // Extend until you can't go anymore .
Title
.font ( .title )
. foregroundColor ( Color.white )
Subtitle
.background ( Color.blue )
Short description of what I am }
demonstrating goes here . }
}

To extend the text to the edges of the device , we use the frame modifier. You don't need to set a fixed
value . Instead , you can just modify the text view and say its frame's maximum width can extend to
infinity until it hits its parent's frame and then will stop . Its parent's frame is the VStack .

This is looking good . It would look better though if there was more space around the text that pushed

out the blue background .

www.bigmountainstudio.com 37
 My Template

Add Padding Around the Text View

༡
struct Description3 : View {
9:12
var body : some View {
VStack ( spacing : 20 ) {
Text ( " Title " )
· font ( .largeTitle )

Text ( " Subtitle " )

.font ( .title )
.foregroundColor ( .gray )

Text ( " Short description of what I am demonstrating goes here . " )

.frame (maxWidth : .infinity )
Title .font ( .title )
. foregroundColor ( Color.white )
Subtitle .padding ( ) // Add space all around the text
.background ( Color.blue )
}
Short description of what I am
}
demonstrating goes here .
}

Padding

Use the padding modifier to add space around a view. Remember, the order of modifiers matter. You
can add the padding modifier anywhere as long as it is BEFORE the background modifier. If it was after
the background , it would add space around the blue background . We want the space between the text
and the background .

www.bigmountainstudio.com 38
 MyTemplate

Version 2 of the Template

༡
struct Version2 : View {
9:19
var body : some View {
VStack ( spacing : 20 ) {
HeaderView ( " Title " ,
subtitle : " Subtitle " ,
desc : " Short description of what I am demonstrating goes here . " ,
back : .purple , textColor : white )
}
.font ( .title )
}
}
Title

Subtitle

Short description of what I am

Version 2
demonstrating goes here .
When I updated the book with SwiftUI 2 , I wanted a more efficient way of adding a title , subtitle and
description .

So I made my own view, called HeaderView, where I can pass in the information and it will format it .

As you can see , this saves repetitive code and space .

If you're interested in how this is done , look in the Xcode project that comes with the paid book bundle
for the file "HeaderView.swift ".

www.bigmountainstudio.com 39
 SwiftUI Basics

Now that you understand this basic template I use for demonstrating topics, I will start using it. Be sure to read what is on
each screenshot (or find the text in the code to read).

www.bigmountainstudio.com 40
 SwiftUI Basics
Scope and Overriding
struct Refactoring: View {
struct RefactoringBefore: View {
Many times, if you have a var body: some View {
var body: some View {
VStack(spacing: 20) {
modifier being applied to VStack(spacing: 20) {
many views, you can move Text("Refactoring")
Text("Refactoring")
.font(.largeTitle)
.font(.largeTitle) it to a parent view so it is
applied to all child views Text("Reusing Modifiers")
Text("Reusing Modifiers") within the parent. .foregroundStyle(.gray)
.font(.title)
.foregroundStyle(Color.gray) Text("You can put common modifiers on
the parent views to be applied to all the child
Text("You can put common modifiers on views.")
the parent views to be applied to all the child .frame(maxWidth: .infinity)
views.") .foregroundStyle(Color.white)
.font(.title) .padding()
.frame(maxWidth: .infinity) .background(Color.blue)
.foregroundStyle(Color.white) }
.padding() .font(.title) // This font style will be
.background(Color.blue) applied to ALL text views inside the VStack.
} }
} }
}

❓
Why isn't the first Text view affected?
The first Text view has its own font
modifier. This means it overrides the
parent modifier.

www.bigmountainstudio.com 41
 SwiftUl Basics

Short Introduction to Symbols

༡
struct Symbols Intro : View {
12:31 24 var body : some View {
VStack ( spacing : 20 ) {
Images Text ( " Images " )
font ( .largeTitle )
Using SF Symbols Text ( " Using SF Symbols " )
. foregroundColor ( .gray )

You will see I use icons or Text ( " You will see I use icons or symbols to add clarity to what I'm demonstrating .
symbols to add clarity to what These come from Apple's new symbol font library which you can browse using an
I'm demonstrating . These come app called ' SF Symbols ' . " )
.frame ( maxWidth : .infinity )
from Apple's new symbol font
.padding ( )
library which you can browse .background ( Color.blue )
using an app called ' SF . foregroundColor ( Color.white )
Symbols ' .
// Use " systemName " when you want to use " SF Symbols "
Image ( systemName : " hand . thumbsup.fill " )
.font ( .largeTitle ) // Make the symbol larger

SF Pro Text - Light - 15.0d5e5 Image ( " SF Symbols " ) // Regular image from Assets.xcassets
SF ProText Light >>
}
.font ( .title )
. ignores SafeArea ( edges : .bottom ) // Ignore the bottom screen bord
hand. }
hand.thumbsup hand.
thumbsup.fill thumbsdown }

hand. Even though an Image view is used to initialize a symbol , you use the font modifier to change its size .
thumbsdown.fill
These symbols actually come from fonts . So use font modifiers to change them . There is a whole
section that covers this . Go here to download and install the SF Symbols app .

www.bigmountainstudio.com 42
 SwiftUl Basics

Layers

༡
VStack ( spacing : 40 ) {
10:54 Text ( " Layers " )
.font ( .largeTitle )

Text ( " The Basics " )

. foregroundColor ( .gray )
Layers
Text ( " With SwiftUI views , you can add layers on top ( .overlay ) and behind ( .background ) the
The Basics view. " )
.frame ( maxWidth : .infinity )
.padding ( )
With SwiftUl views , you can .background ( Color.blue )
. foregroundColor ( Color.white )
add layers on top ( .overlay) and
behind ( .background ) the view.
Image ( " yosemite " ) // Show an image from Assets.xcassets
opacity ( 0.7 ) // Make image only 70% solid
.background ( Color.red.opacity ( 0.3 ) ) // Layer behind image
Yosemite .background ( Color.yellow.opacity ( 0.3 ) ) // Layer behind red
.background ( Color.blue.opacity ( 0.3 ) ) // Layer behind yellow
.overlay (Text ( " Yosemite " ) ) // Layer on top of image

Image ( " Layers " )

}
.font ( .title )
e
Yosemit

I use layers ( background and overlay) early in the book so I want to make sure you understand this
concept .

Both of these modifiers are explained in detail in their own sections .

www.bigmountainstudio.com 43
 SwiftUl Basics

Short Introduction to Shapes

༡
struct Shapes : View {
3:39 var body : some View {
VStack ( spacing : 15 ) {
Text ( " Shapes " )
· font ( .largeTitle )

Text ( " Short Introduction " )

.foregroundStyle ( Color.gray )

Shapes
Text ( " I'll make shapes , give them color and put them behind other views just for
Short Introduction
decoration . " )
.frame ( maxWidth : .infinity )
I'll make shapes , give them .padding ( )
.background ( Color.blue ) Rounded Rectangle is a common
color and put them behind
other views just for . foregroundStyle ( Color.white ) shape.

decoration .
Text ( " This text has a rounded rectangle behind it " )
. foregroundStyle ( Color.white )

This text has a rounded .padding ( )

.background {
rectangle behind it
RoundedRectangle ( cornerRadius : 20 ) // Create the shape
.fill ( Color.blue ) // Make the shape blue
}
padding ( )
}
.font ( .title )
}
}

www.bigmountainstudio.com 44
 Layout Behavior

In SwiftUI, you may wonder why some views layout differently than others. You can observe two behaviors when it comes to
the size and layout of views:
1. Some views pull in to be as small as possible to fit their content. (I will refer to these as “pull-in” views.)
2. Some views push out to fill all available space. (I will refer to these as “push-out” views.)
Knowing these two behaviors can help you predict what will happen when using the different views.

www.bigmountainstudio.com 45
 Layout Behavior
КЯ
Some Views Pull In KY

struct ViewSizes_Pull_In : View {

9:34 var body : some View {
VStack ( spacing : 20 ) {
Text ( " Layout Behavior " ) . font ( .largeTitle )
Text ( " Views that Pull In " ) . foregroundColor ( .gray )
Text ( " Some views minimize their frame size so it is only as big as the
content within it . " )
Layout Behavior .frame ( maxWidth : .infinity )
.padding ( )
Views that Pull In
.background ( Color.purple )
· foregroundColor ( Color.white )
Some views minimize their
frame size so it is only as big as Image ( systemName : " arrow.down.to.line.alt " )
the content within it.
HStack { // Order views horizontally
Image ( systemName : " arrow.right.to.line.alt " )
Text ( " Text views pull in " )
Image ( systemName : " arrow.left.to.line.alt " )
Text views pull in K
}
不
Image ( systemName : "arrow.up.to.line.alt " )
Pull-In views tend to center
themselves within their parent Text ( " Pull - In views tend to center themselves within their parent container

container view. view . " )

.frame ( maxWidth : .infinity )
.padding ( )
.background ( Color.purple )
. foregroundColor ( Color.white )
} .font ( .title )
}
}

www.bigmountainstudio.com 46
 Layout Behavior
КЯ
Some Views Push Out KY

struct ViewSizes_Push_Out : View {

9:35 var body : some View {
VStack ( spacing : 20 ) {
Layout Behavior
Text ( " Layout Behavior " )
Views that Push Out Text ( " Views that Push Out " )
.font ( .title ) .foregroundColor ( .gray )
Text ( " Some views will push out to fill up all available space within their parent . " )
Some views will push out to fill
.frame ( maxWidth : .infinity ) .padding ( ) . font ( .title )
up all available space within .background ( Color.purple )
their parent .
Colors are push - out views .
Color.purple
к

// Add 5 layers on top of the color view

7
.overlay (
Image ( systemName : " arrow.up.left " )
.padding ( ) // Add spacing around the symbol
, alignment : .topLeading ) // Align within the layer
.overlay (
Image ( systemName : " arrow.up.right " )
.padding ( ) , alignment : .topTrailing )
.overlay (
Colors are Push - Out views
Image ( systemName : " arrow.down.left " )
.padding ( ) , alignment : .bottomLeading )
.overlay (
Image ( systemName : " arrow.down.right " )
.padding ( ) , alignment : .bottomTrailing )
.overlay ( Text ( " Colors are Push - Out views " ) )
} .font ( .largeTitle ) // Make all text and symbols larger
}
K }
7

For the most part , I will be telling you if a view is a push - out view or a pull - in view at the
beginning of the sections .

www.bigmountainstudio.com 47
SEE YOUR WORK

48
 Previe Option
w s

As you practice these examples, you might want to see your SwiftUl working on different devices in different modes , including light or dark
mode or with different accessibility settings .

You can do all of this without even having to launch the Simulator.

When using SwiftUl , you get a preview canvas that will show you how your views will render.

www.bigmountainstudio.com 49
 Preview Options

The Canvas - What is it?

The canvas is the area next to the code that shows

you a preview of how your SwiftUI will look. You

might also hear this called the " Preview" or

"Preview Canvas".

If you do not see this pane , click on the Editor

Preview Options button on the top right of your code

window and click Canvas:

or

Code
Canvas MO

Show Editor Only +

or
✓ Canvas XX+
10
Assistant
Preview Canvas Layout arc

Minimap
Authors AOA
Code Coverage

Invisibles

www.bigmountainstudio.com 50
 Preview Options

0 Introduction

struct Previews_Intro : View {

9:32 var body : some View {
VStack ( spacing : 20 ) {
Text ( " Previews " )
font ( .largeTitle )

Text ( " Introduction " )

. foregroundColor ( .gray )

Text ( " Xcode looks for a struct that conforms to the PreviewProvider protocol and

Previews accesses its previews property to display a view on the Canvas . " )
.frame ( maxWidth : .infinity )
Introduction .padding ( )
.background ( Color.red )
. foregroundColor ( .white )
Xcode looks for a struct that
conforms to the } .font ( .title )
PreviewProvider protocol and }
accesses its previews property
to display a view on the
Canvas. // Xcode looks for PreviewProvider struct
struct Previews_Intro_Previews : PreviewProvider {
// It will access this property to get a view to show in the Canvas ( if the Canvas is shown )
static var previews : some View {
// Instantiate and return your view inside this property to see a preview of it
Previews_Intro ( )
}
}

www.bigmountainstudio.com 51
 Preview Options

#Preview iOS 17

The preview syntax has evolved into less code .

Before iOS 17

struct Previews_Intro_Previews : PreviewProvider { What are Swift macros?

static var previews : some View {
Swift macros allow developers to save time when
Previews_Intro ( )
coding .
}
}
In the field of Computing , the word " macro " means ,
"a single instruction that expands automatically
into a set of instructions to perform a particular
task".

In Swift , you can type in simple keywords like

"#Preview" and these macros will then transform
iOS 17 and after
the code Into more code before it gets compiled .
#Preview {
Previews_Intro ( ) A macro is kind of like a command that you can
} write and Swift will know all the things it has to do
(or code it has to generate ) before your code gets
compiled .
After iOS 17, the previews use the #Preview macro
that hides a lot of other code that makes this all
work. To know if a keyword is a macro or not , right-

You will see both examples of these in the companion click it in Xcode and if you see the option " Expand
project . Macro", then you know it's a macro .

www.bigmountainstudio.com 52
 Preview Options

Dark Mode

struct Preview_DarkMode : View {

3:25 www.
var body : some View {

VStack ( spacing : 20 ) {
Text ( " Previews " ) . font ( .largeTitle )

Text ( " Dark Mode " ) . foregroundStyle ( .gray )

Text ( " By default , your preview will show in light mode . To see it in
dark mode , you can use the environment modifier . " )

.frame ( maxWidth : .infinity )

.padding ( )
Previews
.background ( Color.red )
Dark Mode . foregroundStyle ( .white )

By default, your preview will

} .font ( .title )
show in light mode . To see it in
}
dark mode, you can use the
environment modifier. }

#Preview {
Preview_DarkMode ( )
.preferredColorScheme ( .dark )
}

www.bigmountainstudio.com 53
 Preview Options

Light & Dark Modes Together 0

Preview Light And Dark Mode

Previews Previews

Light & Dark Modes Together Light & Dark Modes Together

Use Color Scheme Variants to Use Color Scheme Variants to

see light and dark modes see light and dark modes
together. together.

Look in the corner for preview options and select

"Color Scheme Variants ".

✓ Color Scheme Variants

Orientation Variants
Dark
Dynamic Type Variants
288

www.bigmountainstudio.com 54
 Preview Options

Changing Devices

Automatic

Recent
iPhone 14 Pro iPhone
iPhone 14 Pro iPhone 14 Pro
By default , your canvas will use the iPad mini 6th generation iPhone 14 Pro Max
simulator you currently have selected iPhone 14
iPhone Dynamic Island
(upper left in Xcode) . You can preview a iPhone 14 Plus
iPhone Touch ID
different device by selecting a different iPhone SE 3rd generation
iPad 11- inch
option from the canvas . iPad
iPad 12.9 - inch
iPad Pro 11 -inch, 4th generation
More iPad Pro 12.9 -inch , 6th generation

000 iPad 10th generation

000 iPad mini 6th generation v
iPad Air 5th generation
iPad mini 6th generation

www.bigmountainstudio.com 55
 Preview Options
Dynamic Type Variants

While designing the UI of your app you will want to

make sure it looks good for all sizes of type (which a
user can change in the Settings app).

Look in the corner for preview options and select

“Dynamic Type Variants”.

www.bigmountainstudio.com 56
 Preview Options

Orientation Variants 0

马 Preview Interface Orientation

Previews
Previews Previews
PreviewInterfaceOrientation
PreviewInterfaceOrientation PreviewInterfaceOrientation
Use
previewInterfaceOrientation Use previewInterfaceOrientation to change your preview to Use previewInterfaceOrientation to change your preview to
to change your preview to landscape mode ( right or left) . landscape mode (right or left) .
landscape mode ( right or
left).

Landscape (left) Landscape (right)

You can also select the

Color Scheme Variants
'Orientation Variants ' option to get
✓ Orientation Variants
a quick preview of what your app
Dynamic Type Variants
looks like in landscape mode.

557

www.bigmountainstudio.com
 Preview Options

Canvas Device Settings

Previews

Canvas Device Settings

Use canvase device settings to change your

preview's color scheme , orientation , and

dynamic type .

Canvas Device Settings

Color Scheme
Light Appearance Dark Appearance Landscape Left XXX Large
Dark Appearance
Note: The changes you make in the
Orientation
Canvas Device Settings will apply to ALL
Portrait canvases .
Landscape Left
Landscape Right

Dynamic Type

XXX Large

omatic - iPhone 14 Pro

www.bigmountainstudio.com 58
 Preview Options

Environment Overrides

Environment Overrides
If you prefer to see your work in the Simulator then you can access many of the options
Interface Style mentioned through the Environment Overrides options .

This button will show up when you run your app in the debugging toolbar at the bottom
Light Dark of Xcode.

Text

Dynamic Type A A
Accessibility Medium

Accessibility

Increase Contrast
Reduce Transparency
Bold Text
Reduce Motion
On/OffLabels
Button Shapes
Grayscale
Smart Invert
Differentiate Without Color

00 100Views

www.bigmountainstudio.com 59
LAYOUT VIEWS

60
 Layout Views
Chapter Quick Links

VStack GeometryReader

LazyVStack LazyHGrid

HStack LazyVGrid

LazyHStack ScrollViewReader

Depth (Z) Stack ControlGroup

Grid Table

Spacer ViewThatFits

www.bigmountainstudio.com 61 Return to Book Quick Links

 VStack

VStack stands for " Vertical Stack ". It is a pull - in container view in which you pass in up to ten views and it will compose

them one below the next , going down the screen .

www.bigmountainstudio.com 62
 VStack

Introduction

struct VStack_Intro : View {

10:10
var body : some View {
VStack ( spacing : 20 ) {
HeaderView ( " VStack " ,
VStack subtitle : " Introduction " ,

Introduction desc : " A VStack will vertically arrange other views within it . " ,
back : blue , textColor : .white )
A VStack will vertically arrange
other views within it. Text ( " View 1 " )
Text ( " View 2 " )
View 1 Text ( " View 3 " )
Text ( " View 4 " )
View 2
Text ( " View 5 " )
View 3 Text ( " View 6 " )
Text ( " View 7" )
View 4
Text ( " View 8" )
View 5 Text ( " View 9" )
}
View 6
.font ( .title )

View 7 }
}
View 8

View 9 In SwiftUl , container views , like the

VStack, can contain as many views
as you like .

www.bigmountainstudio.com 63
 VStack

Spacing

VStack ( spacing : 80 ) Set spacing in the initializer.

10:59 Text ( " VStack " )
font ( .largeTitle )

Text ( " Spacing " )

.font ( .title )
VStack . foregroundColor ( .gray )

Text ( " The VStack initializer allows you to set the spacing between all the views inside the
VStack " )
Spacing .frame ( maxWidth : .infinity )
.padding ()
.background ( Color.blue ) .font ( .title )
. foregroundColor ( .white )
The VStack initializer allows you
to set the spacing between all Image ( systemName : " arrow.up.and.down.circle.fill " )
the views inside the VStack .font ( .largeTitle )

Text ( " The spacing here between all of these views is 80 " )
.font ( .title )
}

The spacing here between all of

these views is 80

www.bigmountainstudio.com 64
 VStack

Alignment

VStack ( spacing : 20 ) {
4:21 4 Text ( " VStack " )
.font ( .largeTitle )
Text ( " Alignment " )
· font ( .title )
foregroundColor ( .gray )
VStack Text ( " By default , views in a VStack are center aligned . " )

Alignment
VStack ( alignment : .leading , spacing : 40 ) { Set alignment in the initializer.
Text ( " Leading Alignment " )
By default , views in a VStack
.font ( .title )
are center aligned . Divider ( ) // Creates a thin line ( Push - out view)
Image ( systemName : " arrow.left " )
}
.padding ( )
Leading Alignment
. foregroundColor ( Color.white )
.background ( Rounded Rectangle ( cornerRadius : 10 )
. foregroundColor ( .blue ) )
.padding ( )

VStack ( alignment : .trailing , spacing : 40 )

Text ( " Trailing Alignment " )
Trailing Alignment .font ( .title )
Divider ( )
Image ( systemName : " arrow.right " )
}
→
.padding ( )
. foregroundColor ( Color.white )
.background ( Rounded Rectangle ( cornerRadius : 10 )
. foregroundColor ( .blue ) )
.padding ( )
}

www.bigmountainstudio.com 65
 This book is a preview of:

SwiftUI Views Mastery

SWIFTUI
MASTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME- SAVINGREFERENCE
ry SwiftUl Views ry
Maste g ntain udio VIFTUI DEVELOPERS BigMountainStudio
Bi Mou St
Mark Moeykens Mastery

Over 1,000 pages of SwiftUI Find out how to implement action sheets , modals , popovers
Over 700 screenshots and video showing you what you can and custom popups
do so you can quickly come back and reference the code Master all the layout modifiers including background and
Learn all the ways to work with and modify images overlay layers, scaling , offsets padding and positioning
See the many ways you can use color as views How do you hide the status bar in SwiftUI ? Find out !
Discover the different gradients and how you can apply them This isjust the tip of the mountain!

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50 !

www.bigmountainstudio.com 66
 iOS 14

LazyVStack

SWIFTUI
HALSTERY Visual ReferenceGuide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste g ntain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mou Stu
k
Mar Moey ke ns
OD

Mastery

This SwiftUl chapter is locked in this

preview.
The Lazy Vertical Stack is site to the VStack . It's " lazy" because if you have views scrolling off the screen , SwiftUI will not
load them unless it needsto show them The Stock door at de
In thin The votekoods all child views when

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50 !
displayed .

www.bigmountainstudio.com 67
 HStack

E
HStack stands for " Horizontal Stack ". It is a pull - in container view in which you pass in up to ten views and it will compose

them side- by- side .

www.bigmountainstudio.com 68
 HStack

Introduction

struct HStack_Intro : View {

10:26
var body : some View {
VStack ( spacing : 40 ) {
HeaderView ( " HStack " ,
subtitle : " Introduction " ,
desc : " An HStack will horizontally arrange other views within it . " ,
back : .orange )

HStack {
Text ( " View 1 " )
HStack
Text ( " View 2 " )
Introduction Text ( " View 3 " )
}
An HStack will horizontally }
arrange other views within it . .font ( .title )
}
}
View 1 View 2 View 3

www.bigmountainstudio.com 69
 HStack

Spacing

VStack ( spacing : 40 ) {
4:36 4 Text ( " HStack " )
.font ( .largeTitle )

Text ( " Spacing " )

.font ( .title )
. foregroundColor ( .gray )
HStack
Text ( " The HStack initializer allows you to set the spacing between all the views inside the
HStack" )
Spacing .frame ( maxWidth : .infinity )
.padding ( )
.background ( Color.orange ) .font ( .title )
The HStack initializer allows . foregroundColor ( .black )
you to set the spacing between
Text ( " Default Spacing " )
all the views inside the HStack . .font ( .title )
HStack {
Image ( systemName : " 1.circle " )
Default Spacing Image ( systemName : " 2.circle " )
Image ( systemName : " 3.circle " )
} .font ( .largeTitle )
(1) (2) (3

Divider ( )
Spacing: 100
Text ( " Spacing : 100 " )
1 2 .font ( .title )
(3)
HStack ( spacing : 100 ) { Set spacing in the initializer.
Image ( systemName : " 1.circle " )
Image ( systemName : " 2.circle " )
Image ( systemName : " 3.circle " )
} .font ( .largeTitle )
}

www.bigmountainstudio.com 70
 HStack

Alignment

Text ( " By default , views within an HStack are vertically aligned in the center . " )
4:38 4
HStack {
HStack
Rectangle ( ) . foregroundColor ( .orange ) .frame ( width : 25 )
Text ( " Leading " )
Vertical Alignment Spacer ( )
Text ( " Center" )
By default , views within an Spacer ()
Text ( " Trailing " )
HStack are vertically aligned in
.padding ( .trailing )
the center. Set alignment in the initializer.
}
.border ( Color.orange )
HStack ( alignment : .top ) {
Rectangle ( ) . foregroundColor ( .orange ) .frame ( width : 25 )
Text ( " Leading " )
Leading Center Trailing
Spacer ()
Text ( " Top " )
Spacer()
Text ( " Trailing " )
Leading Top Trailing .padding ( .trailing )
}
.border ( Color.orange )
HStack ( alignment : .bottom
Rectangle ( ) . foregroundColor ( .orange ) .frame ( width : 25 )
Text ( " Leading " )
Spacer ()
Text ( " Bottom " )
Spacer ()
Text ( " Trailing " )
.padding ( .trailing )
}
Leading Bottom Trailing .border ( Color.orange )

www.bigmountainstudio.com 71
 HStack

Text Alignment

struct HStack_TextAlignment : View {

6:55 var body : some View {
VStack ( spacing : 20 ) {
HeaderView ( " HStack " ,
subtitle : " Text Alignment " ,
desc : " HStacks have another alignment option to help better align the
bottom of text . " ,
HStack back : .orange )

Text Alignment
HStack ( alignment : .bottom ) {
Text ( " Hello " )
HStacks have another
Text ( " amazing " )
alignment option to help better .font ( .largeTitle )
align the bottom of text . Text ( "developer ! " )
}
.font ( .body )
Hello amazing developer !

DescView ( desc : " Notice the bottom of the text isn't really aligned above . Use
Notice the bottom of the text
firstTextBaseline or lastTextBaseline instead : " , back : .orange )
isn't really aligned above. Use
firstTextBaseline or HStack ( alignment : .firstTextBaseline ) {
lastTextBaseline instead : Text ( " Hello " )
Text ( " amazing " )
.font ( .largeTitle )
Hello amazing developer ! Text ( " developer ! " )
This will align the text normally.
}
But what's the difference between first and
.font ( .body )
} last text baseline? See on the next page.
.font ( .title )
}
}

www.bigmountainstudio.com 72
 HStack

First & Last Text Alignment

struct HStack_TextAlignment_FirstLast : View {

6:54
var body : some View {
VStack ( spacing : 20 ) {
HeaderView ( " HStack " ,
HStack subtitle : " First & Last Text Alignment " ,
desc : " The firstTextBaseline will align the bottom of the text on the
First & Last Text Alignment
first lines ( \ "Amazing \ " and \ " Really\ " ) . " ,
back : .orange )
The firstTextBaseline will align
the bottom of the text on the
HStack ( alignment : .firstTextBaseline ) {
first lines ( "Amazing " and
Text ( " Amazing developer " )
" Really" ).
.font ( .title3 )
Text ( " Really amazing developer" )
Amazing Really }
developer amazing
.frame ( width : 250 )
developer
DescView ( desc : " The lastTextBaseline will align the bottom of the text on the last
The lastTextBaseline will align lines (\ " developer\ " and \ " developer\ " ) . " , back : .orange )
the bottom of the text on the
last lines (" developer" and HStack ( alignment : .lastTextBaseline ) {
"developer " ) . Text ( " Amazing developer " )
.font ( .title3 )

Really Text ( " Really amazing developer" )

amazing }
Amazing
.frame ( width : 250 )
developer developer
}
.font ( .title )
}
}

www.bigmountainstudio.com 73
 HStack

Customization

struct HStack_Customizing : View {

10:29 var body : some View {
VStack ( spacing : 20 ) {
HeaderView ( " HStack " ,
subtitle : " Customizing " ,
desc : " HStacks are views that can have modifiers applied to them just
like any other view . " ,
back : .orange )

HStack HStack {
Text ( " Leading " )
Customizing Text ( " Middle " )
Text ( " Trailing " )
}
HStacks are views that can .padding ( )
have modifiers applied to them .border ( Color.orange ) // Create a 2 point border using the color specified
just like any other view. HStack ( spacing : 10 ) {
Image ( systemName : " 1.circle " )
Image ( systemName : " 2.circle " )
Leading Middle Trailing Image ( systemName : " 3.circle " )
} .padding ( )

(3) HStack ( spacing : 20 ) {

Image ( systemName : " a.circle.fill " )
Image ( systemName : " b.circle.fill " )
Image ( systemName : " c.circle.fill " )
A B D E
Image ( systemName : " d.circle.fill " )
Image ( systemName : " e.circle.fill " )
}
.font ( .largeTitle ) .padding ( )
.background ( Rounded Rectangle ( cornerRadius : 10 )
. foregroundColor ( .orange ) )
}
.font ( .title )
}
}

www.bigmountainstudio.com 74
 HStack

Layout Priority

4:49 When using a horizontal stack with text views within it , there's a chance that text might truncate if
you are not allowing them to wrap . In this case, you can prioritize which one will truncate last with
layout priority. The default value is 0. The higher the number, the higher the priority to have enough
space to not be truncated .
HStack

HStack {
Layout Priority
Text ( " SwiftUI " )
.font ( .largeTitle ) . lineLimit ( 1 ) // Don't let text wrap
Use the layoutPriority modifier Image ( " SwiftUI " )
to give priority to the space a .resizable ( )
view needs to show its content . .frame ( width : 80 , height : 80 )
Text ( " Brings Balance " )
.font ( .largeTitle )
.layoutPriority(1) is set on ' Brings Balance '
.layoutPriority ( 1 ) // Truncate las
}
.padding ( [ . horizontal ] )
Sw... Brings Balance
Divider ( )

HStack {
Text ( " SwiftUI " )
SwiftUI Brings Bal ...
.font ( .largeTitle )
.layoutPriority ( 1 ) // Truncate las
.layoutPriority(1 ) is set on 'SwiftUI ' Image ( " SwiftUI " )
· resizable ( )
.frame (width : 80 , height : 80 )
Note: You can learn more
Text ( " Brings Balance " )
.font ( .largeTitle ) . lineLimit ( 1 ) // Don't let text wrap about layout priority in the
} chapter " Layout Modifiers ",
.padding ( .horizontal ) section " LayoutPriority ".

www.bigmountainstudio.com 75
 iOS 14

LazyHStack

SWIFTUI
HALSTERY Visual Reference Guide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUI chapter is locked in this

preview.
The Lazy Horizontal Stack is Sumar to the HStack . It's " lazy" because if you have views scrolling off the screen , SwiftUI will
not load them unless it node to show the The Stock do this. The stock loads all child views

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $ 49.50!
when displayed .

www.bigmountainstudio.com 76
 Depth (Z) Stack

A Depth Stack ( ZStack ) is a pull - in container view. It is a view that overlays its child views on top of each other. ( "Z"
represents the Z - axis which is depth - based in a 3D space . )

You learned earlier about creating layers with the background and overlay modifiers . ZStack is another way to create layers
with views that control their own sizing and spacing .

So , the ZStack is a pull - in container view but you may think it is a push - out view because of the first example but it's
actually the color that is pushing out .

www.bigmountainstudio.com 77
 ZStack

Introduction

ZStack {
5:09 4 // LAYER 1 : Furthest back You set depth by the order of
Color.gray // Yes , Color is a view ! the views inside the ZStack .

// LAYER 2 : This VStack is on top . Note: The Color view is a push-

VStack ( spacing : 20 ) { out view. It is pushing out the
Text ( " ZStack " )
ZStack container view.
.font ( .largeTitle )

Text ( " Introduction " )

ZStack . foregroundColor ( .white )

Introduction
Text ( " ZStacks are great for setting a background color . " )
.frame ( maxWidth : .infinity )
ZStacks are great for setting a .padding ( )
background color. .background ( Color.green )

Text ( " But notice the Color stops at the Safe Areas ( white areas on top and bottom ) . " )
But notice the Color stops at .frame ( maxWidth : .infinity )
the Safe Areas (white areas on .padding ( )
top and bottom ) . .background ( Color.green )
}
.font ( .title )
}

www.bigmountainstudio.com 78
 ZStack

Ignores Safe Area Edges

ZStack {
12:10
Color.gray

(
VStack ( spacing : 20 ) {
Text ( " ZStack" )
.font ( .largeTitle )

Text ( " Edges Ignoring Safe Area " )

.foregroundColor ( .white )

Text ( " Ignoring the Safe Areas will extend a view to fill the whole scene . " )
.frame ( maxWidth : .infinity )
ZStack
.padding ( )
. foregroundColor ( .white )
Ignores Safe Area Edges
.background ( Color.green )

Ignoring the Safe Areas edges }

will extend a view to fill the .font ( .title )
whole scene. }
■ ignoresSafeArea ( .all ) // Ignore the safe areas

Allows views to extend past the safe areas .

Learn more about what Safe Areas are and ways to ignore edges in the chapter " Layout Modifiers " in the
section " Ignores Safe Area ".

www.bigmountainstudio.com 79
 ZStack

Background Problem

struct ZStack_BackgroundColor_Problem : View {

12:14 var body : some View {
ZStack {
Ignores Safe Area Edges Color.gray

Having the ZStack edges VStack ( spacing : 20 ) {

ignoring the safe area edges Text ( " ZStack " ) // This view is under the notch
might be a mistake . .font ( .largeTitle )
You notice that the top Text
Text ( " Ignores Safe Area Edges " )
view is completely under the
. foregroundColor ( .white )
notch .

Text ( " Having the ZStack edges ignoring the safe area edges might be a mistake .
\ nYou notice that the top Text view is completely under the notch . " )
.frame ( maxWidth : .infinity )
.padding ( )
.background ( Color.green )

Spacer ( ) // Added a spacer to push the views up .

}
.font ( .title )
}
■ ignoresSafeArea ( )
}
}

Ignores all Safe Area edges .

88

www.bigmountainstudio.com 80
 ZStack

Background Solution

struct ZStack_BackgroundColor_Solution : View {

12:18 var body : some View {
ZStack {
ZStack
Color.gray
Color Ignores Safe Area Edges .ignoresSafeArea ( ) Have JUST the color ignore the safe areas edges , not
the VStack .

To solve the problem , you want

VStack ( spacing : 20 ) {
just the color (bottom layer) to Text ( " ZStack " )
ignore the safe area edges and .font ( .largeTitle )
fill the screen . Other layers
above it will stay within the Safe Text ( " Color Ignores Safe Area Edges " )
Area. . foregroundColor ( .white )

Text ( " To solve the problem , you want just the color ( bottom layer ) to igore
the safe area edges and fill the screen . Other layers above it will say
within the Safe Area . " )
.frame ( maxWidth : .infinity )
.padding ( )
.background ( Color.green )
Spacer ()
}
.font ( .title )
}
}
}

Remove ignoresSafeArea modifier from the

ZStack and put it just on the color.

www.bigmountainstudio.com 81
 ZStack

Layering

struct ZStack_Layering : View {

8:08
var body : some View {
VStack ( spacing : 20 ) {
HeaderView ( " ZStack " ,
subtitle : " Layering & Aligning " ,
ZStack desc : " ZStacks are great for layering views . For example , putting text on
top of an image . " , back : .green , textColor : .white )
Layering & Aligning
ZStack {
ZStacks are great for layering Image ( " yosemite_large " )
views . For example, putting text .resizable ( ) // Allows image to change size
on top of an image. .scaledToFit ( ) // Keeps image the same aspect ratio when resizing

Rectangle ()
· fill (Color.white.opacity ( 0.6 ) )
.frame ( maxWidth : .infinity , maxHeight : 50 )
Yosemite National Park

Text ( " Yosemite National Park " )

.font ( .title )
.padding ( )
}
But what if you wanted to have
all the views align to the
bottom? DescView ( desc : " But what if you wanted to have all the views align to the bottom ? " ,
back : green , textColor : .white )
}
.font ( .title )
}
}
28

www.bigmountainstudio.com 82
 ZStack

Aligning

struct ZStack_Aligning : View {

8:11
var body : some View {
VStack ( spacing : 20 ) {
HeaderView ( " ZStack " ,
subtitle : " Aligning " ,
ZStack
desc : " The ZStack allows you to align all the views within it . " ,
Aligning back: green , textColor : white )

The ZStack allows you to align ZStack ( alignment : .topLeading ) .

all the views within it. Use the alignment parameter
Image ( " yosemite_large " )
in the ZStack's initializer to
.resizable ( )
set where you want all views
Yosemite National Park .aspectRatio ( contentMode : .fit )
within to be aligned .

Rectangle ( )
.fill ( Color.white.opacity ( 0.6 ) )
.frame ( maxWidth : .infinity , maxHeight : 60 )

Text ( " Yosemite National Park" )

.font ( .title )
.padding ( )
}

Yosemite National Park

ZStack ( alignment : .bottomTrailing )
Image ( " yosemite_large " )
.resizable ()
.aspectRatio ( contentMode : .fit )

www.bigmountainstudio.com 83
 ZStack

Rectangle()
.fill(Color.white.opacity(0.6))
.frame(maxWidth: .infinity, maxHeight: 60)
Alignment Choices
Text("Yosemite National Park")
• center
.font(.title)
.padding() • leading
} • trailing
}
.font(.title) • top
}
}
• bottom
• topLeading
• topTrailing
• bottomLeading
• bottomTrailing

www.bigmountainstudio.com 84
 Grid

iOS 16

Grid

SWIFTUI
HALSTERY Visual Reference Guide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste VIFTUIDEVELOPERS BigMountainStudio
BigMountainStudio
k
Mar Moey ke ns Mastery

This SwiftUl chapter is locked in this

The grid will layout views in ro lumns . What is different preview.grid and other layout views is that it will remember and maintain
the widths of all the views in each row and apply the same width to all views in that same column .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50 !
Grids are pull - in views, they

www.bigmountainstudio.com 85
 Spacer

You may notice that when you add new pull-in views, such as Text views, they appear in the center of the screen. You can
use the Spacer to push these views apart, away from the center of the screen.

www.bigmountainstudio.com 86
 Spacer

<---> Introduction <--->

VStack {
6:55 4 Text ( " Spacer" )
.font ( .largeTitle )
Spacer
Introduction Text ( " Introduction " )
foregroundColor ( .gray )
Spacers push things away
Text ( " Spacers push things away either vertically or horizontally " )
either vertically or horizontally.

↑
Image ( systemName : " arrow.up.circle.fill " )

Spacer () Pushes away vertically when in a VStack .

Image ( systemName : " arrow.down.circle.fill " )

HStack {
Text ( " Horizontal Spacer" )

Image ( systemName : " arrow.left.circle.fill "

Spacer () Pushes away horizontally when in an HStack .

Image ( systemName : " arrow.right.circle.fill " )

}
.padding ( .horizontal )

Color.yellow
Horizontal Spacer .frame ( maxHeight : 50 ) // Height can decrease but not go higher than 50
}
.font ( .title ) // Apply this font to every view within the VStack

www.bigmountainstudio.com 87
 Spacer

<---> <--->
Evenly Spaced

Text ( " Use Spacer to evenly space views horizontally so they look good on any
device . " )
7:07 PM Wed Sep 4 100% ---
Spacer Text ( " After" )

Evenly Spaced HStack {

Spacer ( )
Use Spacer to evenly space views horizontally so they look
good on any device .
VStack ( alignment : .leading )
Text ( " Names " )
Before
.font ( .largeTitle )
Names Color .underline ()
Chase Red Text ( " Chase " )
Rodrigo Orange Text ( " Rodrigo " )
Mark Green Text ( " Mark" )
Evans Blue Text ( " Evans " )
}
After
Spacer ( )
Names Color
Chase Red VStack ( alignment : .leading ) {
Rodrigo Orange Text ( " Color " )
Mark Green .font ( .largeTitle )
Evans Blue .underline ( )
Text ( " Red " )
Text ( " Orange " )
Text ( " Green " )
Text ( " Blue " )
}

Spacer ()
}

www.bigmountainstudio.com 88
 Spacer

<---> Minimum Length <--->

VStack ( spacing : 10 ) {
7:14 4 Text ( " Spacer " )
.font ( .largeTitle )
Text ( " Minimum Length " )
Spacer
font ( .title )
Minimum Length foregroundColor ( .gray )
Text ( " You can set a minimum space to exist between views using the minLength modifier on the
Spacer . " )
You can set a minimum space
to exist between views using Text ( " No minLength set ( system default is used ) " )
.bold ()
the minLength modifier on the
HStack {
Spacer. Image ( " yosemite " )
Spacer ()
No minLength set (system default is used) Text ( " This is Yosemite National Park " ) . lineLimit ( 1 )
} .padding ( )

This is Yosemite Nati ... Text ( " minLength = 0 " )

Set the minimum length in the
.bold ()
HStack { Spacer's initializer.
minLength = 0 Image ( " yosemite " )
Spacer ( minLength : 0)
Text ( " This is Yosemite National Park " ) . lineLimit ( 1 )
This is Yosemite Natio...
} .padding ( )

Text ( " minLength = 20 " )

minLength = 20 .bold ()
HStack {
Image ( " yosemite " )
This is Yosemite N...
Spacer ( minLength : 20 )
Text ( " This is Yosemite National Park " ) . lineLimit ( 1 )
} .padding ( )
}

www.bigmountainstudio.com 89
 Spacer

<---> <--->
Relative Spacing with Spacers

struct Spacer_RelativeSpacing : View {

10:57 var body : some View {
VStack ( spacing : 20 ) {
Spacer
Text ( " Spacer " ) . font ( .largeTitle )
Relative Spacing Text ( " Relative Spacing " ) . foregroundColor ( .gray )
Text ( " You can add more spacers to create relative spacing in comparison to other
You can add more spacers to spacers . " )
create relative spacing in .frame ( maxWidth : .infinity ) .padding ( )
comparison to other spacers . .background ( Color.yellow ) . foregroundColor ( .black )
HStack ( spacing : 50 ) {

VStack ( spacing : 5) {
Spacer ()
.frame ( width : 5 ) Spacers are views and can be
.background ( Color.blue ) modified like views .
Text ( " 33% Down " )
33% Down
Spacer ()
.frame ( width : 5)
.background ( Color.blue )
Spacer ( )
.frame ( width : 5 )
.background ( Color.blue )
75% Down }

VStack ( spacing : 5) {
Spacer ( )
.frame (width : 5 )
.background ( Color.blue )
Spacer ()

www.bigmountainstudio.com 90
 Spacer

.frame(width: 5)
.background(Color.blue)
Spacer()
.frame(width: 5)
Note: You can also use Spacers horizontally to place
.background(Color.blue)
views a percentage from the leading or trailing sides
Text("75% Down")
Spacer()
of the screen.
.frame(width: 5)
.background(Color.blue)
}
}
}.font(.title)
}
}

www.bigmountainstudio.com 91
 GeometryReader

‫רויוי‬

8
It is difficult , if not impossible , to get the size of a view. This is where the GeometryReader can help .

The GeometryReader is similar to a push - out container view in that you can add child views to it . It will allow you to inspect

and use properties that can help with positioning other views within it . You can access properties like height , width and safe

area insets which can help you dynamically set the sizes of views within it so they look good on any size device .

www.bigmountainstudio.com 92
 Geometry Reader

‫יים‬
‫יום‬
‫רויוי‬ ‫רויוי‬
-0-0- Introduction 00

struct GeometryReader_Intro : View {

11:04
var body : some View {
GeometryReader VStack ( spacing : 20 ) {
HeaderView ( " GeometryReader " , subtitle : " Introduction " , desc : " GeometryReader is a
Introduction
container view that pushes out to fill up all available space . You use it to help with
positioning items within it . " ,
GeometryReader is a container
back : .clear )
view that pushes out to fill up all
available space . You use it to
help with positioning items GeometryReader { _ in
In SwiftUI , when you see the word
within it. // No child views inside
"geometry", think size and position .
}
.background ( Color.pink )
}
.font ( .title )
}
}

www.bigmountainstudio.com 93
 Geometry Reader

‫יים‬
‫יום‬
‫רויוי‬ ‫רויוי‬
-0-0- 00
Alignment

struct GeometryReader_Alignment : View {

11:06
var body : some View {
Geometry Reader VStack ( spacing : 20 ) {
HeaderView ( " GeometryReader " , subtitle : " Alignment " , desc : " Child views within the
Alignment
GeometryReader are aligned in the upper left corner by default . " , back : .clear )

Child views within the

GeometryReader { _ in
GeometryReader are aligned in
the upper left corner by default . Image ( systemName : " arrow.up.left " )
Notice that there is no alignment or
.padding ( )
positioning specified on the image .
‫ال‬ }
.background ( Color.pink )
}
.font ( .title )
}
}

www.bigmountainstudio.com 94
 Geometry Reader

‫יים‬
‫יום‬
‫רויוי‬ ‫רויוי‬
-0-0- 00
Layers

struct GeometryReader_Layers : View {

12:32
var body : some View {
Geometry Reader VStack ( spacing : 20 ) {
HeaderView ( " GeometryReader " , subtitle : " Layers " , desc : " The child views within a
Layers
GeometryReader will stack on top of each other , much like a ZStack . " ,
back : .clear )
The child views within a
GeometryReader will stack on
top of each other, much like a GeometryReader { _ in
ZStack. Image ( systemName : " 18.circle " )
Note, I wouldn't recommend using a
.padding ( )
Geometry Reader in place of a
Image ( systemName : " 20.square " ) ZStack.
30
.padding ( )
Image ( systemName : " 50.circle " ) ZStack provides convenient
.padding ( ) alignment options for layout that
} GeometryReader does not .
.font ( .largeTitle )
. foregroundColor ( .white )
.background ( Color.pink )
}
.font ( .title )
}
}

www.bigmountainstudio.com 95
 Geometry Reader

‫יים‬
‫יום‬
‫רויוי‬ ‫רויוי‬
-0-0- Getting Size 00

struct GeometryReader_GettingSize : View {

11:44
var body : some View {
GeometryReader VStack ( spacing : 10 ) {
HeaderView ( " GeometryReader " , subtitle : " Getting Size " , desc : " Use the geometry
Getting Size
reader when you need to get the height and / or width of a space . " ,
back : .clear )
Use the geometry reader when
you need to get the height and/
Define a parameter to reference
or width of a space.
GeometryReader { geometryProxy in the geometry's coordinate

VStack ( spacing : 10 ) { space from a " proxy ".

Width: 414.000000
Text ( " Width : \ ( geometryProxy.size.width ) " )
Height: 566.000000
Text ( " Height : \ ( geometryProxy.size.height ) The GeometryProxy is a
} representation of the

.padding ( ) Geometry Reader's size and

coordinate space .
. foregroundColor ( .white )
}
This is the actual width and
.background ( Color.pink )
height of the GeometryReader
}
view (pink area) .
.font ( .title )
}
The geometryProxy.size will
}
give you access to the height
and width of the space the
Geometry Reader is taking up
on the screen .

www.bigmountainstudio.com 96
 Geometry Reader

‫יים‬
‫יום‬
‫רויוי‬ ‫רויוי‬
-0-0- 00
Positioning

struct GeometryReader_Positioning : View {

11:49 var body : some View {
VStack ( spacing : 20 ) {
GeometryReader
Text ( " GeometryReader" ) . font ( .largeTitle )
Positioning Text ( " Positioning " ) . font ( .title ) .foregroundColor ( .gray )
Text ( " Use the GeometryProxy input parameter to help position child views at
different locations within the geometry's view . " )
Use the GeometryProxy input
.font ( .title )
parameter to help position child .padding ( )
views at different locations
within the geometry's view. GeometryReader { geometryProxy in
Text ( " Upper Left " )
.font ( .title )
Upper Left .position ( x : geometryProxy.size.width /5 ,
y: geometryProxy.size.height / 10 )

Text ( " Lower Right " )

.font ( .title )
.position ( x : geometryProxy.size.width - 90 ,
y: geometryProxy.size.height - 40 )
}
.background ( Color.pink )
. foregroundColor ( .white )
Lower Right
Text ( " Note : The position modifier uses the view's center point when setting the X
and Y parameters . " )
Note: The position modifier uses .font ( .title )
the view's center point when }
setting the X and Y parameters. }
}

www.bigmountainstudio.com 97
 Geometry Reader

‫יים‬
‫יום‬
‫רויוי‬ ‫רויוי‬
-0-0- Getting Coordinates 00

struct GeometryReader_GettingCoordinates : View {

12:00 var body : some View {
VStack ( spacing : 10 ) {
GeometryReader HeaderView ( " GeometryReader " , subtitle : " Getting Coordinates " , desc : " Getting the
Getting Coordinates coordinates ( x , y ) of a geometry view is little different . Take a look at this example : " ,
back : .clear )

Getting the coordinates (x , y) GeometryReader { geometryProxy in

of a geometry view is little VStack ( spacing : 10 ) {
different . Take a look at this Text ( " X : \ ( geometryProxy.frame ( in : CoordinateSpace.local ) .origin.x ) " )
Text ( " Y : \ ( geometryProxy.frame ( in : CoordinateSpace.local ) .origin.y ) " )
example:
}
. foregroundColor ( .white )
X: 0.000000 }
.background ( Color.pink )
Y : 0.000000
Text ( " The local coordinate space will always give you zeros . " )
Text ( " You need to look globally to get the coordinates inside the current view : " )
The local coordinate space will GeometryReader { geometryProxy in
always give you zeros. VStack ( spacing : 10 ) {
Text ( " X : \ ( geometryProxy.frame ( in : .global ) .origin.x ) " )
You need to look globally to get
Text ( " Y : \ ( geometryProxy.frame ( in : .global ) .origin.y ) " )
the coordinates inside the }
current view: . foregroundColor ( .white )
}
X: 16.000000 .background ( Color.pink )
.frame ( height : 200 ) I left out " CoordinateSpace " in this example ( it's optional ) .
Y: 662.000000 }
.font ( .title )
.padding ( .horizontal ) The global coordinate space is the entire screen . We are
} looking at the origin of the geometry proxy's frame within
} the entire screen .

www.bigmountainstudio.com 98
 Geometry Reader

‫יים‬
‫יוים‬
‫רויוי‬ ‫רויוי‬
-0-0- Min Mid Max Coordinates 00

struct GeometryReader_MinMidMax : View {

12:13 PM Sun Sep 20 ร 100%
var body : some View {
GeometryReader VStack ( spacing : 20 ) {
Min Mid Max HeaderView ( " GeometryReader " , subtitle : " Min Mid Max " , desc : " You can
also get the minimum ( min ) , middle ( mid ) , and maximum ( max ) X and Y coordinate from
You can also get the minimum ( min) , middle (mid) , and
the geometry reader's frame . " , back : .clear )
maximum ( max) X and Y coordinate from the geometry
reader's frame.
GeometryReader { geometry in
Local Coordinate Space
VStack ( alignment : .leading , spacing : 20 ) {
minX: 0 midX: 368 maxX: 736 Text ( " Local Coordinate Space " )
Global Coordinate Space HStack ( spacing : 10 ) {

minX: 16 midX: 384 maxX: 752 // I'm converting to Int just so we don't have so many zeros
Text ( " minX : \ ( Int ( geometry.frame ( in : .local ) .minX ) ) " )
minY: 492 Spacer ()
Text ( " midX : \ ( Int ( geometry.frame ( in : .local ) .midX ) ) " )
minX midX maxX Spacer ()
minY
Text ( " maxX : \ ( Int ( geometry.frame ( in : .local ) .maxX ) ) " )
}
Text ( " Global Coordinate Space " )
midY: 750 midY
HStack ( spacing : 10 ) {
// I'm converting to Int just so we don't have so many zeros
Text ( " minX : \ ( Int ( geometry.frame ( in : .global ) .minX ) ) " )
Spacer ()
maxY
Text ( " midX : \ ( Int ( geometry.frame ( in : .global ) .midX ) ) " )
maxY: 1,008 Spacer ( )
Text ( " maxX : \ ( Int ( geometry.frame ( in : .global ) .maxX ) ) " )
}
} .padding ( .horizontal )
}

www.bigmountainstudio.com 99
 Geometry Reader

‫יים‬
CFT
‫רויוי‬ ‫רויוי‬
100 Min Mid Max Coordinates Continued 00

.frame ( height : 200 )

12:17
. foregroundColor ( .white )
.background ( Color.pink )
GeometryReader
HStack { Min Mid Max
GeometryReader { geometry in
You can also get the minimum ( min) , middle (mid),
VStack ( spacing : 10 ) { and maximum (max) X and Y coordinate from the
geometry reader's frame.
Text ( " minY : \ ( Int ( geometry.frame ( in : .global ) .minY ) ) " )
Spacer() Local Coordinate Space
Text ( " midY : \ ( Int ( geometry.frame ( in : .global ) .midY ) ) " ) minX: 0 midX: 191 maxX: 382
Spacer ( )
Global Coordinate Space
Text ( " maxY : \ ( Int ( geometry.frame ( in : .global ) .maxY ) ) " )
minX: 16 midX: 207 maxX: 398
} .padding ( .vertical )
}
foregroundColor ( .white )
.background ( Color.pink ) minY: 470

Image ( " MinMidMax " )

minX midX maxX
resizable ( ) minY
.aspectRatio ( contentMode : .fit )
} midY: 658 midy
}
.font ( .title )
maxY
.padding ( )
}
} Notice how the min , mid and max values change as the maxY: 846
geometry reader adapts to different device sizes .

www.bigmountainstudio.com 100
 Geometry Reader

‫יים‬
CFT
‫רויוי‬ ‫רויוי‬
100 Safe Area Insets 00

GeometryReader

SafeArealnsets

GeometryReader can also tell you the safe area insets it has .

geometryProxy.safeArealnsets.leading : 48.000000
geometryProxy.safeArealnsets.trailing : 48.000000
geometryProxy.safeArealnsets.top : 0.000000
geometryProxy.safeArealnsets.bottom : 21.000000

HeaderView ( " GeometryReader " , subtitle : " SafeAreaInsets " , desc : " GeometryReader can also tell you the safe area insets it has . " ,
back : .clear )

GeometryReader { geometryProxy in
VStack {
Text ( " geometryProxy.safeAreaInsets.leading : \ ( geometryProxy.safeAreaInsets.leading ) " )
Text ( " geometryProxy.safeAreaInsets.trailing : \ ( geometryProxy.safeAreaInsets.trailing ) " )
Text ( " geometryProxy.safeAreaInsets.top : \ ( geometryProxy.safeAreaInsets.top ) " )
Text ( " geometryProxy.safeAreaInsets.bottom : \ ( geometryProxy.safeAreaInsets.bottom ) " )
}
.padding ( )
}
.background ( Color.pink )
. foregroundColor ( .white )

www.bigmountainstudio.com 101
 iOS 14

LazyHGrid

SWIFTUI
MASTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUI chapter is locked in this

preview.
Similar to an HStack, the Lazy Horizontal Grid will layout views horizontally but can be configured to use multiple rows and
scroll off the screen . The ord Illa - vill bar that the childview Juben Quiful needs them . This is

called " lazy loading ". SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

www.bigmountainstudio.com 102
 iOS 14

LazyVGrid

SWIFTUI
MASTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery
OD

This SwiftUI chapter is locked in this

preview.
Similar to an HStack , the Lazy vertical Grid will layout views vertically but can be configured to use multiple columns and
scroll off the screen . Theard illezull bar that the child view tod when Qu needs them . This is

called " lazy loading ". SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $ 55 $ 49.50!

103
 ScrollViewReader

iOS 14

ScrollViewReader

SWIFTUI
HALSTERY Visual ReferenceGuide
VISUAL TIME-SAVING REFERENCE
Swif
tUl Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery
OD

This SwiftUI chapter is locked in this

preview.

UT With this fi
The Scroll View Reader ges ake a view within a
SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $ 55 $ 49.50!
scroll view visible by auto

www.bigmountainstudio.com 104
 iOS 15

ControlGroup

Use the Control Group to put similar types of controls together, such as buttons . In my opinion , the use of this seems
limited .

This is a pull - in view .

 Introduction iOS 15
日

struct ControlGroup_Intro : View {

11:41 ....
var body : some View {
VStack ( spacing : 20.0 ) {
HeaderView ( " ControlGroup " ,
subtitle : " Introduction " ,
desc : " Use a ControlGroup view to group up related controls . " )

ControlGroup ControlGroup {
Button (" Hello ! " ) { }
Introduction Button ( action : {} ) {
Image ( systemName : " gearshape.fill" )
Use a ControlGroup view to }
group up related controls .
}

Hello!
DescView ( desc : "You can change the default style to ' navigation ' : "' )
ControlGroup {
You can change the default Button ( " Hello ! " ) { }
style to ' navigation ' : Button (action : { } ) {
Image ( systemName : " gearshape.fill " )
Hello! ❤ }
}
Note: You may ask yourself
.controlGroupStyle ( .navigation )
} when you would use this .

.font ( .title )
I think it makes more sense
}
inside of toolbars as well as
}
on macOS .
 Table

iOS 16

Table

SWIFTUI
MASTERY Visual Reference Guide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste VIFTUIDEVELOPERS
BigMountainStudio BigMountainStudio
k
Mar Moey ke ns Mastery
OD

This SwiftUl chapter is locked in this

preview.
You can bind a collection of objects to a table and then each property to a table column .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $ 49.50!
In iOS though you will only s

www.bigmountainstudio.com 107
 iOS 16

ViewThatFits

SWIFTUI
HALSTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste BigMountainStudio VIFTUI DEVELOPERS BigMountainStudio
Mark Moeykens Mastery

ViewThatFits is a very unique that can contain multiple views but will only draw one of the views. That's right, it will only draw the
view that fits the space it is g This SwiftUl chapter is locked in this

You specify the larger view first en

en progressively smaller preview. hat . The first view's size will be evaluated and if it can't fit in the
given space , then the next view's size will be evaluated and so on .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $ 49.50!
If none of the views fit, the l

www.bigmountainstudio.com 108
 ContentUnavailableView
iOS 17

ContentUnavailableView

This SwiftUI chapter is locked in this

preview.your app is unavailable. But as a layout view, you can use it to
The ContentUnavailableView is intended to be displayed when contentin
quickly put together text, image and even buttons in a pre-formatted way.

This is a push-out view.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

www.bigmountainstudio.com 109
CONTROL VIEWS

110
 Chapter Quick Links
Button LabeledContent Picker SignInWithAppleButton

Chart Link PhotosPicker Slider

ColorPicker List ProgressView Stepper

DatePicker Menu RenameButton TabView

DisclosureGroup MultiDatePicker ScrollView TabView Paging

Form NavigationStack Searchable Text

Gauge NavigationSplitView SecureField TextEditor

GroupBox NavigationLink Segmented Picker TextField

Label OutlineGroup ShareLink Toggle

www.bigmountainstudio.com 111 Return to Book Quick Links

 Button

Button

The Button is a pull - in view with a wide range of composition and customization options to be presented to the user. The

button can be just text , just an image or both combined .

www.bigmountainstudio.com 112
 Button

Button Button
Introduction

struct RegularButton : View {

6:30 www. var body : some View {
VStack ( spacing : 40 ) { If you just want to show the default text
Button ( " Regular Button " ) { style in a button then you can pass in a
// Code here string as the first parameter.

}
This is the quickest and easiest way to
make a button .
Button {
// Code here
} label : { Use this initializer to customize the
Text ( " Regular Button " ) content within the button .
.bold ( )
Regular Button
}
}
Regular Button
.font ( .title ) // Make all fonts use the title style
}
}

For more text customization options ,

see the chapter on Text .

www.bigmountainstudio.com 113
 Button

Button Button
Text Composition

struct Button_TextModifiers : View {

You can add more than one text view to
6:30 wwww var body : some View {
a button and format them separately.
VStack ( spacing : 40 ) {
Button { } label : {
Text ( " Forgot Password ? " )
Text ( " Tap to Recover" ) Views arranged horizontally by default .
.foregroundStyle ( .orange )
}

Button { } label : {
VStack { You can use any layout or
Forgot
Tap to Recover Text ( " New User" ) container view you want within
Password?
Text ( " ( Register Here ) " ) . font ( .body) the label content .
}
New User
}
(Register Here)
}
font ( .title )
}
}

www.bigmountainstudio.com 114
 Button

Button Button
With Backgrounds

struct Button_WithBackgrounds : View {

6:59 var body : some View { You can add various
VStack ( spacing : 60 ) { backgrounds and shadows
Button ( action : { } ) { to buttons to further
Text ( " Solid Button " ) customize them .
.padding ( )
. foregroundStyle ( .white )
.background ( Color.purple )
.clipShape ( Rounded Rectangle ( cornerRadius : 16 ) )
}
Button ( action : {}) {
Solid Button
Text ( " Button With Shadow" )
.padding ( 12 ) Note: It is a good idea to
. foregroundStyle ( .white ) put your modifiers within
.background ( Color.purple ) the button instead of on the
Button With Shadow
.shadow ( color : Color.purple , radius : 20 , y : ) button itself. So when the
}
button is tapped , the whole
button flashes .
Button With Rounded Ends Button ( action : {} ) {
Text ( " Button With Rounded Ends " )
.padding ( EdgeInsets ( top : 12 , leading : 20 , bottom : 12 , trailing : 20 ) )
. foregroundStyle ( .white )
.background ( Color.purple , in : Capsule ( ) )
}
You can apply shapes as
}
backgrounds ; such as
.font ( .title )
Capsule, Rectangle, Circle,
}
and Rounded Rectangle .
}

www.bigmountainstudio.com 115
 Button

Button Button
With Borders

struct Button_WithBorders : View {

7:05 var body : some View { Here are a couple of options

VStack ( spacing : 60 ) { if you are looking for a way

to add a border around your
Button ( action : {}) {
button .
Text ( " Square Border Button " )
.padding ( )
.border ( Color.purple , width : 2 )
}

Button ( action : {} ) {
Text ( " Border Button " )
Square Border Button
.padding ( )
.background {
RoundedRectangle ( cornerRadius : 10 )
Border Button ■ stroke ( Color.purple , lineWidth : 2 )
}
}
}
.font ( .title )
}
}

www.bigmountainstudio.com 116
 Button

Button Button
With SF Symbols

struct Button_WithSymbols : View {

7:39 www. var body : some View { You can add SF Symbols to
VStack ( spacing : 40 ) { your buttons with the
Button ( action : {}) { Image (systemName:) view.
Text ( " Button With Symbol " )
.padding ( .horizontal )
Image ( systemName : " gift.fill " )
} Or you can use what is
called a Label that groups
Button ( action : {}) { texts and an SF Symbol
Label ( " Search for Wifi " , systemImage : " wifi together.
ab
UP

Button With Symbol }

Button ( action : {} ) {
Search for Wifi
VStack {
Image ( systemName : " video.fill " ) Or use a layout view to
Text ( " Record " ) arrange your text and
Record .padding ( .horizontal ) images .
}
.padding ( )
. foregroundStyle ( Color.white )
.background ( Rounded Rectangle ( cornerRadius : 25 ) )
}
}
.tint ( .purple )
.font ( .title )
For even more ways to customize buttons , see
}
the chapter on Paints where you can learn how
}
to apply the 3 different gradients to them .

www.bigmountainstudio.com 117
 Button

Button Button
With Images

struct Button_WithPhotos : View {

7:50 If you are using a photo for the
var body : some View {
button content , it should show
VStack ( spacing : 100 ) { up fine from iOS 15+ .
Button ( action : { } ) {

Image ( " yosemite " )

Before iOS 15 you might have to

Button ( action : {} ) {
add the renderingMode modifier
Image ( " yosemite " ) to make the image show.
.renderingMode ( .originat ,
Notice I'm also using a clipShape
.clipShape ( Capsule ( ) )
modifier to modify the shape of
}
the image .

Button ( action : {} ) {

Image ( " yosemite " )

If your image has transparency,
.renderingMode ( .template )
you can change the
.clipShape ( Capsule ( ) )
renderingMode to template .
} This allows you to assign the
} template different colors .
Earlier versions of iOS will render
By default , all buttons use a blue
.font ( .title )
the image like you see in the last
tint that you can override .
example. }

www.bigmountainstudio.com 118
 Button

Button iOS 15 Button

ButtonStyle

struct Button_ButtonStyle : View {

8:01 You can apply preset button styles to
var body : some View {
your buttons with the buttonStyle
VStack ( spacing : 80.0 ) { modifier.
Button ( " Automatic " ) { }

.buttonStyle ( .automatic )
Automatic

Button ( " Bordered " ) { }

.buttonStyle ( .bordered )

Bordered

Button ( " Bordered Prominent " ) { }

Note: The text here becomes the primary
.buttonStyle ( .bordered Prominen color (black for light mode , white for dark
BorderedProminent mode). You can always override this with
Button ( " Borderless " ) { } the foregroundStyle modifier.

.buttonStyle ( .borderless )

Borderless

Button ( " Plain " ) { }

.buttonStyle ( .plain )
Plain } Color does not get applied to plain
.font ( .title ) buttons .

.tint ( .purple )

www.bigmountainstudio.com 119
 Button

Button iOS 15 Button

ControlSize

struct Button_ControlSize : View {

8:12 var body : some View { Use controlSize to

VStack ( spacing : 60.0 )

{ change the amount of
Button ( " Bordered — Mini " ) { } padding around the
.controlSize ( .mini ) content of the button .

Button ( " Bordered Small " ) { }

Bordered - Mini
.controlSize ( .small )

Button ( " Bordered Regular " ) { }

Bordered - Small
.controlSize ( .regular )

Button ( " Bordered — Large " ) { }

Bordered - Regular
.controlSize ( .large )

Button ( action : {} ) {
Bordered - Large Text ( " Bordered - Large " ) You can still change the
.frame ( maxWidth : .infinity size manually and the
} shape will be the same.
.controlSize ( .large )
Bordered - Large }
.buttonStyle ( .bordered
.tint ( .purple )
.font ( .title ) Notice how the buttonStyle is on the parent
} view and gets applied to all the child views
} that are buttons .

www.bigmountainstudio.com 120
 Button

Button iOS 15 Button

Role

struct Button_Role : View {

8:18 wwww Use the role parameter
var body : some View { to specify the kind of

VStack ( spacing : 100.0 ) { button you have.

Button ( " Normal " ) { }

Normal

Button ( " Destructive " , role : .destructive ) { }

Destructive Button ( " Destructive " , role : .destructive ) { }

.buttonStyle ( .bordered Prominent )

Button ( " Cancel " , role : .cancel ) { }

Destructive
}

.buttonStyle ( .bordered )

.controlSize ( .large )
Cancel
.font ( .title )

www.bigmountainstudio.com 121
 Button

Button iOS 15 Button

ButtonBorderShape

struct Button_ButtonBorderShape : View { Set a button's shape to capsule

7:52 var body : some View { or rounded rectangle on
VStack ( spacing : 80.0 ) { bordered and bordered
Button ( " Automatic " ) { } prominent buttons .
.buttonBorderShape ( .automatic )
Automatic

Button ( " Capsule " ) { } Bordered prominent buttons

.buttonBorderShape ( .capsule ) already create a rounded
rectangle but you can override
Capsule
this and show a capsule shape .
Button ( " Capsule " ) { }
.buttonBorderShape ( .capsule )
.buttonStyle ( .bordered Prominent )

Capsule You can use the radius option to

Button ( " RoundedRectangle " ) { } set your own a custom radius .
.buttonBorderShape ( .roundedRectangle )

Button ( " Set Radius " ) { }

RoundedRectangle
.buttonBorderShape ( .roundedRectangle ( radius : 24 ) )
}
.buttonStyle ( .bordered )
.controlSize ( .large ) Note : This modifier ONLY works
Set Radius
.font ( .title ) on buttons that are bordered or

.tint ( .purple ) bordered Prominent .

}
}

www.bigmountainstudio.com 122
 Button

Button Button
Disabled

struct Button_Disabled : View {

7:59 www. Use the disabled modifier to
var body : some View {
prevent the user from interacting
VStack ( spacing : 60 ) {
with buttons .
Button ( " Enabled " ) { }

Enabled
Button ( " Disabled " ) { }
.disabled ( true )
Disabled
Button ( " Enabled " ) { }
.buttonStyle ( .bordered )

Enabled
Button ( " Disabled " ) { }
.buttonStyle ( .bordered )
.disabled ( true )
Disabled
Button ( " Enabled " ) { }
.buttonStyle ( .bordered Prominent )

Enabled
Button ( " Disabled " ) { }
.buttonStyle ( .bordered Prominent )
.disabled ( true )
}
Disabled
.controlSize ( .large )
.font ( .title )
.tint ( .purple )
}
}

www.bigmountainstudio.com 123
 Button

Button iOS 17 Button

Initialize with Image

struct Button_InitWithImage : View {

Buttons can be created by
8:27 var body : some View {
specifying an image resource or
VStack ( spacing : 60.0 ) {
SF Symbol .
Button ( " With Image " , image : .bookLogo ) { }
With Image
Button ( " With Image " , image : .bookLogo ) { }
.buttonStyle ( .bordered ) Adding a buttonStyle uses a
capsule shape instead of the
With Image rounded rectangle by default .
Button ( " With Image " , image : .bookLogo ) { }
You can override this with the
.buttonBorderShape ( .rounded Rectangl
.buttonStyle ( .bordered ) buttonBorderShape modifier.

With Image
Button ( " With SF Symbol " , systemImage : " paintbrush.pointed.fill " ) { }
.buttonStyle ( .bordered )

Button ( "With Image & Role " , systemImage : " x.circle " , role : .destructive ) { }
With SF Symbol

Button ( "With Image & Role " , systemImage : " x.circle " , role : .destructive ) { }
.buttonStyle ( .bordered Prominent )
With Image & Role }
.controlSize ( .extraLarge )
.font ( .title )
} You can also specify the role with
With Image & Role
} this initializer.

www.bigmountainstudio.com 124
 Chart

iOS 16

Chart

SWIFTUI
MASTERY Visual Reference Guide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste g untain udio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo St
k
Mar Moey ke ns Mastery
OD

This SwiftUl content is locked in this

A Chart is a container view . It c marks " ( representations preview. hich can be drawn in a variety of different ways . There are
many different ways you can configure the chart and marks . This chapter will cover many of those options .

UNLOCK THE BOOK TODAY FOR ONLY $ 55!

This is a push - out view.

www.bigmountainstudio.com 125
 ColorPicker
iOS 14

ColorPicker

This SwiftUI chapter is locked in this

The ColorPicker control allows you to give users the abilitypreview.
toselect a color. This could be useful if you want to allow users
to set the color of visual elements on the user interface.

This is a push-out horizontalview.SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

www.bigmountainstudio.com 126
 iOS 14

DatePicker

The date picker provides a way for the user to select a date and time. You bind the selected date to a property. You can
read this property to find out what was selected or set this property for the DatePicker to show the date you want.
(Note: If you have to support the DatePicker for iOS 13, then it will look different from what you see in this chapter.)

This is a push-out view.

www.bigmountainstudio.com 127
 DatePicker
Introduction iOS 14

struct DatePicker_Intro: View {

@State private var date = Date()

var body: some View {

VStack(spacing: 20) {
HeaderView("DatePicker",
subtitle: "Introduction",
desc: "The DatePicker will just show a date that can be tapped on like a
button. You can add an optional label to it.", back: .green)

Text("Default style pulls in:")

DatePicker("Today", selection: $date, displayedComponents: .date)

.labelsHidden()
.padding(.horizontal)
Hiding the label makes this view pull in.

Text("With label:")

DatePicker("Today", selection: $date, displayedComponents: .date)

.padding(.horizontal)

}.font(.title)
} What you see here is representative of the compact date picker style
} (text representation of the date).
0:00
There are other styles available…

www.bigmountainstudio.com 128
 Date Picker

iOS 14
Styles

struct DatePicker_Styles : View {

11:16 Notice we didn't have to hide the labels on the
@State private var date = Date ( )
DatePicker graphical style . It's not shown . ( But you should
keep it set for accessibility purposes . )
Styles var body : some View {

VStack ( spacing : 0) {
Graphical Style HeaderView ( " DatePicker " ,
subtitle : " Styles " ,
September 2021 > < >
SUN MON TUE WED THU FRI SAT desc : " Graphical Style " , back : .green )
1 2 3 4

5 6 7 8 9 10 11 DatePicker ( " Birthday " , selection : $ date , displayedComponents : .date

300

.datepickerStyle ( .graphical
5

12 13 14 15 16 17 18
335
1

.frame ( width : 320 )

245

19 20 21 22 23 24 25

26 27 28 29 30
DescView ( desc : " Wheel Style " , back : .green )
DatePicker ( " Birthday " , selection : $ date , displayedComponents : .date )

Wheel Style .datepickerStyle ( .wheel )

.labelsHidden ( )
June 15 2018
2019 For datePickerStyle , use:
July 16
August 17 2020 }
GraphicalDatePickerStyle ( )
September 18 2021 < IOS 15
.font ( .title ) WheelDatePickerStyle ( )
October 19 2022
November 20 2023 .ignoresSafeArea ( edges : .bottom )
December 21 2024 .graphical
} iOS 15+
.wheel
}

www.bigmountainstudio.com 129
 Date Picker

iOS 14
Displayed Components

struct DatePicker14_DisplayedComponents : View {

11:18 ....
@State private var date = Date ( )

var body : some View {

VStack ( spacing : 20 ) {
HeaderView ( " DatePicker ios 14+ " ,

subtitle : " Displayed Components " ,

desc : " You can show more than just a date . You can also show just the
DatePicker
time or a combination of date and time . " , back : .green )
Displayed Components

DatePicker ( " Today " , selection : $ date , displayed Components : .hourAndMinute )

You can show more than just .labelsHidden ( )
a date . You can also show just
.padding ( .horizontal )
the time or a combination of
date and time .
DatePicker ( " Today " , selection : $ date , displayedComponents : [ .hourAndMinute , .date ] )
.labelsHidden ( )
11:18 AM
.padding ( .horizontal )
Sep 18, 2021 11:18 AM .buttonStyle ( .bordered )
}
.font ( .title )
}
} Note: The order of the displayed components
does not affect the displayed order. The hour
and minute still come second .

www.bigmountainstudio.com 130
 Date Picker

iOS 14
Displayed in Form

struct DatePicker_InForm : View {

(
11:20 @State private var date = Date ( ) 11:20

DatePicker DatePicker
var body : some View {
Used in a Form VStack ( spacing : 20 ) { Used in a Form
HeaderView ( " DatePicker" ,
When used in a form , the date subtitle : " Used in a Form " , When used in a form , the date
picker uses the compact desc : " When used in a form , the date picker uses the compact
styling by default . picker uses the compact styling by default . " , styling by default .
back : .green )

Form {
Today Sep 18, 2021 DatePicker ( " Today " , selection : $ date , Today Sep 18, 2021
displayed Components : .date )
September 2021 > < >
Graphical Picker Style : SUN MON TUE WED THU FRI SAT
Section {
1 2 3 4
September 2021 > < > Text ( " Graphical Picker Style : " )
SUN MON TUE WED THU FRI SAT DatePicker ( " Birthday " , selection : $ date , 5 6 7 8 9 10 11
1 2 3 4 displayedComponents : .date )
12 13 14 15 16 17 18
.datepickerStyle ( .graphical )
5 6 7 8 9 10 11

1980
} 19 20 21 22 23 24 25
1280

12 13 14 15 16 17 18 }
26 27 28 29 30
288

}
200

19 20 21 22 23 24 25 When the compact style is

22

.font ( .title )
20

tapped, a pop up shows

26 27 28 29 30 } 27 28 29 30
} the graphical date picker.

www.bigmountainstudio.com 131
 Date Picker

iOS 14
Customizing

struct DatePicker_Customizing : View {

(
11:25 .... @State private var date = Date ( )

DatePicker var body : some View {

VStack ( spacing : 30 ) {
Customizing HeaderView ( " DatePicker " ,
subtitle : " Customizing " ,
Customize the background desc : " Customize the background and accent color : " , back : .green )
and accent color:
DatePicker ( " Birthday " , selection : $ date , displayedComponents : .date )
.datepickerStyle ( .graphical )
.accentColor ( .green )
September 2021 > < >
.padding ( )
SUN MON TUE WED THU FRI SAT
.background ( Rounded Rectangle ( cornerRadius : 20 )
1 2 3 4
.fill ( Color.green )
5 6 7 8 9 10 11 .opacity ( 0.1 )
.shadow ( radius : 1, x: 4, y: 4) )
12 13 14 15 16 17 18
.padding ( .horizontal )
19 20 21 22 23 24 25
20
2

DatePicker ( " Today " , selection : $ date , displayedComponents : .date )

26 27 28 29 30
.frame ( height : 50 )
.padding ( )
.background ( Rectangle ( )
.fill ( Color.green )
Sep 18, 2021 .shadow ( radius : 4 )
Today
.opacity ( 0.2 ) )
} .font ( .title )
}
}

www.bigmountainstudio.com 132
 Date Picker

Custom Selector iOS 14

struct DatePicker_CustomSelector : View {

(
11:53 .... @State private var date = Date ( )

DatePicker var body : some View {

VStack ( spacing : 30 ) {
Custom Selector HeaderView ( " DatePicker" ,
subtitle : " Custom Selector " ,
At this time we can not desc : " At this time we can not customize the color of the text or

customize the color of the background . Here are some other options though . " , back : .green )

text or background . Here are DatePicker ( " Today " , selection : $ date , displayed Components : .date )
some other options though . .labelsHidden ( )
.background ( Rounded Rectangle ( cornerRadius : 8 , style : .continuous )
.fill ( Color.green ) .opacity ( 0.2 ) )
Sep 18, 2021
DescView ( desc : " What does NOT work : " , back : .green )
Form {
What does NOT work: DatePicker ( " accentColor " , selection : $ date , displayed Components : .date )
.accentColor ( .green )

DatePicker ( " foregroundColor " , selection : $ date , displayed Components : .date

. foregroundColor ( .green )
accentColor Sep 18, 2021
DatePicker ( " foregroundStyle " , selection : $ date , displayed Components : .date
foregroundColor Sep 18, 2021
.foregroundStyle ( .green , .green , .green )
foregroundStyle Sep 18, 2021
DatePicker ( " tint " , selection : $ date , displayedComponents : .date )
tint Sep 18, 2021 .tint ( .green )
}
.font ( .body )
} Using a cornerRadius of 8 and a continuous
.font ( .title ) corner style is the best I could get to match the
}
existing gray background .
}

www.bigmountainstudio.com 133
 Disclosure Group

iOS 14

DisclosureGroup

SWIFTUI
HALSTERY Visual ReferenceGuide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUI chapter is locked in this

The disclosure group gives you o expand and collapse vi preview. it . You supply it with child views that you want collapsed/
expanded.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $ 55 $49.50 !
This is a pull - in view .

www.bigmountainstudio.com 134
 Form

The Form view is a great choice when you want to show settings, options, or get some user input. It is easy to set up and
customize as you will see on the following pages.

This is a push-out view.

www.bigmountainstudio.com 135
 Form

Introduction 昌

struct Form_Intro : View {

8:45 var body : some View {
Form { Forms come with a built - in
Section { scroll view if the contents
This is a Form ! Text ( " This is a Form ! " ) exceed the height of the
You can put any content in here .font ( .title ) screen .
Text ( " You can put any content in here " )
The cells will grow to fit the content
Text ( " The cells will grow to fit the content " )
Remember, it'sjust views inside of views Text ( " Remember , it's just views inside of views " )
}

Limitations
Section {
There are built-in margins that are difficult to Text ( " Limitations " )
get around. Take a look at the color below so
you can see where the margins are: .font ( .title )
Text ( " There are built - in margins that are difficult to get around . Take a look
at the color below so you can see where the margins are : " )
Color.purple
}
Summary
Pretty much what you see here is what
you get. Section {
Text ( " Summary " )
.font ( .title )
Text ( " Pretty much what you see here is what you get . " )
}
}
}
}

www.bigmountainstudio.com 136
 Form

Section Headers and Footers

struct Form_HeadersAndFooters : View {

((
7:40 var body : some View {
Form {
SECTION HEADER TEXT
Section {
You can add any view in a section header Text ( " You can add any view in a section header " )
Text ( " Notice the default foreground color is gray " )
Notice the default foreground color is gray } header : {
Text ( " Section Header Text " )
}
PEOPLE Section {
Text ( " Here's an example of a section header with image and text " )
Here's an example of a section header with } header : {
image and text SectionTextAndImage ( name : " People " , image : " person.2.square.stack.fill " )
}
Section {
Text ( " Here is an example of a section footer " )
Here is an example of a section footer } footer : {
Total: $5,600.00 Text ( " Total : $ 5,600.00 " ) . bold ( )

}
}
}

struct SectionTextAndImage : View {

var name : String
var image : String
var body : some View {
HStack {
Image ( systemName : image ) .padding ( .trailing )
Text ( name )
}
.padding ( )
.font ( .title )
. foregroundStyle ( Color.purple )
}
}

www.bigmountainstudio.com 137
 Form
I
Header Prominence iOS 15

struct Form_HeaderProminence : View {

11:09
var body : some View {
Form {
STANDARD HEADER PROMINENCE
You have seen that you can customize Section {
the section header style. You can also
Text ( " You have seen that you can customize the section header style . You can
use header prominence to style the
header.
also use header prominence to style the header . " )
} header : {
Increased Header Prominence
Text ( " Standard Header Prominence " )
Use increased header prominence to
make it stand out more. }
headerProminence ( .standard )

Section {

Text ( " Use increased header prominence to make it stand out more . " )
} header : {
Text ( " Increased Header Prominence "

}
.headerProminence ( .increased )
}

}
}

Note: I have found that I can put this

modifier on the Section or the Text
inside the header closure for it to work .

www.bigmountainstudio.com 138
 Form

List Row Background

struct Form_ListRowBackground : View {

12:12 var body : some View {
Form {
FORM Section {
Text ( " List Row Background " )
List Row Background . foregroundStyle ( .gray )
Forms and Lists allow you to set
Text ( " Forms and Lists allow you to set a background view with a function called
a background view with a
\" listRowBackground ( view : ) \ " . " )
function called
"listRowBackground (view:) " . Text ( " You can use this modifier on just one row , like this . " )
You can use this modifier on just .listRowBackground ( Color.purple )
one row, like this. . foregroundStyle ( .white )
} header : {
Text ( " Form " ) . font ( .largeTitle )
WHOLE SECTION
}
Or you can set a view or color for
a whole section. Section {
Note, the color of the section Text ( " Or you can set a view or color for a whole section . " )
header is not affected when set
Text ( " Note , the color of the section header is not affected when set on
on Section .
Section . " )
.fixedSize ( horizontal : false , vertical : true )
} header : {
Text ( "Whole Section " )
.font ( .title ) .foregroundStyle ( .gray )
}
. foregroundStyle ( .white )
listRowBackground ( Color.purple )
}
.font ( .title2 )
}
}

www.bigmountainstudio.com 139
 Form

Background Images ATU

struct Form_RowBackgroundImage : View {

4:00 wwww var body : some View {
Form {
IMAGES ON ROWS
Section {
Images can be on a row or Text ( " Images can be on a row or a section . " )
a section .
Text ( " Image on one row . " )
Image on one row. .listRowBackground ( Image ( " water " )
.blur ( radius : 3 ) )
IMAGES } header : {
Row 1. Text ( " Images on Rows " )

Row 2. }

Row 3.
Section {
Text ( " Row 1. " )
Text ( " Row 2. " )
Text ( " Row 3. " )
} header : {
Text ( " Images " )
} Notice when the image is
.listRowBackground ( Image ( " water" )< on the section , it is
.blur ( radius : 3 ) ) repeated for all rows.
}
.font ( .title2 )
}
}

www.bigmountainstudio.com 140
 Form
I
List Row Inset

struct Form_ListRowInset : View {

12:41 var body : some View {
Form {
FORM Section {
Text ( " List Row Inset " )
List Row Inset . foregroundStyle ( .gray )
Text ( " You can use the listRowInsets modifier to adjust the indentation : " )
You can use the listRowInsets
. foregroundStyle ( .white )
modifier to adjust the
.listRowBackground ( Color.purple )
indentation:

Indent Level 1 Text ( " Indent Level 1 " )

.listRowInsets ( EdgeInsets ( top : 0, leading : 40 , bottom : 0, trailing : ))
Indent Level 2
Text ( " Indent Level 2 " )
Or Vertical Alignment · listRowInsets ( EdgeInsets ( top : 0, leading : 80 , bottom : 0, trailing : ))
Top
Text ( " Or Vertical Alignment " )
Bottom . foregroundStyle ( .white )
.listRowBackground ( Color.purple )

Text ( " Top " )

.listRowInsets ( EdgeInsets ( top : -20 , leading : 40 , bottom : 0 , trailing : 0))

Text ( " Bottom " )

listRowInsets ( EdgeInsets ( top : 20 , leading : 40 , bottom : 0 , trailing : 0 ) )
} header : {
Text ( " Form " )
.font ( .title )
. foregroundStyle ( .gray )
}
}
.font ( .title2 )
}
}

www.bigmountainstudio.com 141
 Form

With Controls

struct Form_WithControls : View {

8:48 @State private var is0n = true
@State private var textFieldData = " This is a text field "
CONTROLS IN A FORM
var body : some View {
This will give you an idea of Form {
how different controls are Section {
rendered in a Form . Text ( " This will give you an idea of how different controls are rendered in a
Form . " )
. foregroundStyle ( .white )
Button
.listRowBackground ( Color.purple )
Toggle } header : {
Text ( " Controls in a form " )
Stepper +
.font ( .title )
This is a text field .foregroundStyle ( Color.gray )
}
Section {
Button ( action : { } ) { Text ( " Button " ) }
Toggle ( ison : $ isOn ) { Text ( " Toggle " ) }
Stepper ( onIncrement : { } , onDecrement : { } ) { Text ( " Stepper" ) }
TextField ( " " , text : $ textFieldData )
.textFieldStyle ( .roundedBorder )
Image ( systemName : " leaf.arrow.circlepath " ) . font ( .title )
Circle ( )
.frame ( height : 30 )
}
}
.font ( .title )
}
}

www.bigmountainstudio.com 142
 Form

With the Disclosure Group iOS 14

struct Form_WithDisclosureGroup : View {

10:01 @State private var settingsExpanded = true
@State private var trebleOn - true
Form
@State private var basson = false
With Disclosure Groups @State private var levels = 0.5

var body : some View {

You can add disclosure
VStack ( spacing : 20 ) {
groups to a form to allow HeaderView ( " Form " ,
users to expand into more subtitle : " With Disclosure Groups " ,
settings or views . desc : " You can add disclosure groups to a form to allow users to expand
into more settings or views . " ,
back: .purple , textColor : white )

Audio Settings Form {

DisclosureGroup ( " Audio Settings " , isExpanded : $ settingsExpanded ) {
Treble VStack {
Toggle ( " Treble " , is0n : $ trebleOn )
Bass
Toggle ( " Bass " , ison : $ basson )
Slider ( value : $ levels )
}
.font ( .title2 ) Normally the tint would also
.padding ( ) change the DisclosureGroup's
}
label . But in a Form , it does
}
not.
}
.font ( .title )
.tint ( .purple )
} See Control Views >
}
DisclosureGroup for more info .

www.bigmountainstudio.com 143
 Gauge

iOS 16

Gauge

SWIFTUI
MASTERY Visual Reference Guide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUI chapter is locked in this

Use the gauge to show a value range . The value and ran preview.shown in a linear or circular way.

When the gauge is shown in

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $ 55 $49.50 !
When the gauge is shown in

www.bigmountainstudio.com 144
 GroupBox

iOS 14

GroupBox

SWIFTUI
MASTERY Visual ReferenceGuide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste VIFTUIDEVELOPERS BigMountainStudio
BigMountainStudio
k
Mar Moey ke ns Mastery

This SwiftUl chapter is locked in this

preview.
The group box is container for grouping similar items together.

The GroupBox is a pull-in SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

www.bigmountainstudio.com 145
 iOS 14

Label

SWIFTUI
MASTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUI chapter is locked in this

The label view is a pretty s

✓ that will handle the preview.cing and formatting of an image and text that you pass
into it .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $ 55 $ 49.50!
This is a pull - in view.

www.bigmountainstudio.com 146
 LabeledContent

iOS 16

LabeledContent

SWIFTUI
HALSTERY Visual ReferenceGuide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUl chapter is locked in this

of a label preview. and the control on the right. Think of this view as a template
ve this pattern of
You may have noticed some cove
where you can supply a label on the left and your own content on the right.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50 !
This view pushes out horizo

www.bigmountainstudio.com 147
 Link

iOS 14

Link

SWIFTUI
MASTERY Visual Reference Guide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUI chapter is locked in this

preview.
The Link is similar to the Button or the NavigationLink except it can navigate you to a place outside your app .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $ 49.50!
This is a pull - in view.

www.bigmountainstudio.com 148
 List

Using a List view is the most efficient way of displaying vertically scrolling data. You can display data in a ScrollView, as you
will see later on, but it will not be as efficient in terms of memory or performance as the List view.

www.bigmountainstudio.com 149
 List

With Static Views

struct List_WithStaticData : View {

12:52 var body : some View {
VStack ( spacing : 20 ) {
List
Text ( " List " ) . font ( .largeTitle )

Static Data Text ( " Static Data " ) . font ( .title ) .foregroundColor ( .gray )
Text ( " You can show static views or data within the List view . It does not have to be
bound with data . It gives you a scrollable view . " )
You can show static views or
.frame ( maxWidth : .infinity )
data within the List view. It does .font ( .title ) .padding ( )
not have to be bound with data . .background ( Color.green )
It gives you a scrollable view. . foregroundColor ( .black )

List {
Line One
Text ( " Line One " )
Line Two Text ( " Line Two " )
Text ( " Line Three" )
Line Three
Image ( " profile " )
Button ( " Click Here " , action : {})
.foregroundColor ( .green ) Note: Like other container views ,
HStack { you can now have as many views as
Spacer ()
Click Here you want inside it .
Text ( " Centered Text " )
Spacer ( )
Centered Text
} .padding ( )
}
font ( .title )

}
}

www.bigmountainstudio.com 150
 List

With Data

struct List_WithData : View {

12:55
var stringArray = [ " This is the simplest List " , " Evans " , " Lemuel James Guerrero " , " Mark " ,
This is the simplest List " Durtschi " , " Chase " , " Adam " , " Rodrigo " , " Notice the automatic wrapping when the text is longer " ]
Evans

Lemuel James Guerrero var body : some View {

The List view
Mark List ( stringArray , id : \ .self ) { string can iterate
Durtschi Text ( string ) through an array

} of data and pass

Chase
in one item at a
Adam .font ( .largeTitle ) // Apply this font style to all items in the
time to its
} closure.
Rodrigo
}
Notice the automatic wrapping
when the text is longer

What is that .id parameter?

You use this parameter to tell the List how it can uniquely identify each row by which value. The List
needs to know this so it can compare rows by this value to perform different operations like reordering
and deleting rows for us .

In this scenario , we are using " self " to say, "Just use the value of the string itself to uniquely identify
each row. "

www.bigmountainstudio.com 151
 List

Custom Rows

။။။
struct List_CustomRows : View {
12:57 var data = [ " Custom Rows ! " , " Evans " , " Lemuel James Guerrero " , " Mark " , " Durtschi " , " Chase " ,
"Adam " , " Rodrigo " ]
Custom Rows !
var body : some View {
List ( data , id : \ .self ) { datum in
Evans CustomRow ( content : datum ) Extracting rows into separate views
} is a common practice in SwiftUl . You
Lemuel James Guerrero } can then have a separate preview
}
just for the row.
Mark struct CustomRow : View {
var content : String
Durtschi
var body : some View {
HStack {
Chase Image ( systemName : " person.circle.fill " )
Text ( content )
Adam Spacer ()
}
. foregroundColor ( content == " Custom Rows ! " ? Color.green : Color.primary )
Rodrigo .font ( .title )
.padding ( [ . top , .bottom ] )
}
}

www.bigmountainstudio.com 152
 List
Move Rows
struct List_MoveRow : View {
@State var data = ["Hit the Edit button to reorder", "Practice Coding", "Grocery shopping",
"Get tickets", "Clean house", "Do laundry", "Cook dinner", "Paint room"]

var body: some View {

NavigationView {
List {
ForEach(data, id: \.self) { datum in
Text(datum).font(Font.system(size: 24)).padding()
} The onMove
.onMove { source, destination in
modifier goes on
data.move(fromOffsets: source, toOffset: destination)
the ForEach, not
}
} the List.
.navigationTitle("To Do")
.toolbar {
ToolbarItem { EditButton() }
}
}
.tint(.green) // Changes color of buttons
}
}

What is EditButton()?
This is a built-in function that returns a view (Button) that will automatically toggle edit mode on the List.
Its text says “Edit” and then when tapped you will see the move handles appear on the rows and the
0:00 button text says “Done”.

www.bigmountainstudio.com 153
 List

Delete Rows

struct List_Delete : View {

11:51 wwww @State var data = [ " Swipe to Delete " , " Practice Coding " , " Grocery shopping " , " Get tickets " ,
" Clean house " , " Do laundry " , " Cook dinner " , " Paint room " ]

var body : some View {

To Do List {
Section {
ForEach ( data , id : \ .self ) { datum in
Swipe to Delete
Text ( datum ) .font ( Font.system ( size : 24 ) ) . padding ( )

.onDelete { offsets in
Practice Coding data.remove ( atOffsets : offsets
}
} header : {
cery shopping Delete Text ( " To Do " )
.padding ( )
}
Get tickets }
.listStyle ( .plain )
}
Clean house }

Do laundry

Cook dinner

onDelete , onMove , onInsert

Paint room
These three functions only work on views that implement the DynamicViewContent protocol . Currently,
the only view that conforms to the DynamicViewContent protocol is the ForEach view. So these
functions are only available on a ForEach view, not a List view.

www.bigmountainstudio.com 154
 List

Selecting a Row

struct List_Selection_Single : View {

2:18
@State private var data = [ " Practice Coding " , " Grocery shopping " , " Get tickets " ,

"Clean house " , " Do laundry " , " Cook dinner " , " Paint room " ]
List
@State private var selection : String ?
Practice Coding Allow rows to be selected .

Grocery shopping Start by using an optional type to

var body : some View { store which row is selected .
Get tickets
The type should match what you set
Clean house NavigationStack {
for the id on the List .
Do laundry VStack ( spacing : 0 ) {
Cook dinner List ( data , id : \ .self , selection : $ selection ) { item in
Paint room
Text ( item )

}
Then bind the selection parameter
Text ( " To do first : ") +
to your @State property above using
Text ( selection ?? " " ) the dollar sign ($) .
.bold ( )

.font ( .title )

.navigationTitle ( " List " )

}
To do first: Clean house
}

www.bigmountainstudio.com 155
 List

Selecting Multiple Rows

struct List_Selection_Multiple : View {

2:25 ....
Done @State private var data = [ " Practice Coding " , " Grocery shopping " , " Get tickets " ,

List "Clean house " , " Do laundry " , " Cook dinner " , " Paint room " ]
O Practice Coding
@State private var selections = Set < String > ( )
By changing the type to a Set , the
Grocery shopping
List will automatically know it can
Get tickets
hold multiple selection values .
Clean house
var body : some View {
O Do laundry
NavigationStack {
✓ Cook dinner
Paint room List ( data , id : \ .self , selection : $ selections ) { item in

Text ( item )

.font ( .title )

.navigationTitle ( " List " )

.toolbar { EditButton ( ) }

} You need the edit button to enable

edit mode for multiple row selection .
}

www.bigmountainstudio.com 156
 List

Selection Disabled iOS 17

struct List_SelectionDisabled : View {

2:10
@State private var data = [ " Things to do " , " Practice Coding " , " Grocery shopping " ,

"Get tickets " , " Clean house " , " Do laundry " , " Cook dinner " , " Paint room " ]
List
@State private var selection : String ?
Things to do
Practice Coding
var body : some View {
Grocery shopping
NavigationStack {
Get tickets
VStack ( spacing : 0) {
Clean house
List ( data , id : \ .self , selection : $ selection ) { item in
Do laundry
Text ( item )
Cook dinner
.selectionDisabled ( item == " Things to do " )
Paint room
}

}
If you do not want a row to
.font ( .title )
be selected , you can use the
.navigationTitle ( " List " ) selection Disabled modifier.

www.bigmountainstudio.com 157
 List

List Row Background

11:23 struct Todo : Identifiable {

let id = UUID ( )
var action = "
To Do var due = " n
var isIndented = false
new todo
}

Practice Coding struct List_ListRowBackground : View {

||||
@State private var newToDo =

Grocery shopping @State var data = [

Todo ( action : " Practice Coding " , due : " Today " ) ,
Todo ( action : " Grocery shopping " , due : " Today " ),
Get tickets Todo ( action : " Get tickets " , due : " Tomorrow " ) ,
Todo ( action : " Clean house " , due : " Next Week " ) ,
Todo ( action : " Do laundry " , due : " Next Week " ) , Notice the .listRowBackground
Clean house Todo ( action : " Cook dinner " , due : " Next Week " ) , function is on the view inside the
Todo ( action : " Paint room " , due : " Next Week " ) ForEach . You want to call this
]
Do laundry function on whatever view will be

var body : some View { inside the row, not on the List itself.
List {
Cook dinner
Section {
ForEach ( data ) { datum in
Paint room Text ( datum.action )
.font ( Font.system ( size : 24 ) )
.foregroundColor ( self.getTextColor ( due : datum.du
// Turn row green if due today
.listRowBackground ( datum.due == " Today " ? Color.green : Color.clear )
.padding ( )
}

www.bigmountainstudio.com 158
 List

List Row Background Continued

} header : {
VStack {
Text ( " To Do " ) . font ( .title )
HStack {
TextField ( " new todo " , text : $ newToDo )
.textFieldStyle ( .roundedBorder )
Button ( action : {
data.append ( Todo ( action : newToDo ) )
newToDo = ||||
}) {
Image ( systemName : " plus.circle.fill " ) . font ( .title )
}
}
}
.padding ( .bottom )
}
}
listStyle ( .plain )
}

// This logic was inline but the compiler said it was " too complex "
private func getTextColor ( due : String ) - > Color {
due == " Today " ? Color.black : Color.primary
}
}

www.bigmountainstudio.com 159
 List

List Row Inset

struct List_ListRowInsets : View {

1:43 || ||
@State private var newToDo =

To Do
@State var data = [
new todo
Todo ( action : " Practice using List Row Insets " , due : " Today " ) ,
Todo ( action : " Grocery shopping " , due : " Today" ) ,
Practice using List Row Insets
Todo ( action : " Vegetables " , due : " Today " , isIndented : true ) ,
Todo ( action : " Spices " , due : " Today " , isIndented : true ) ,
Grocery shopping
Todo ( action : " Cook dinner " , due : " Next Week " ) ,
Todo ( action : " Paint room " , due : " Next Week " )
Vegetables
]
Spices
var body : some View {
Cook dinner VStack {
VStack {
Paint room
Text ( " To Do " )
.font ( .title )
. foregroundColor ( .black )
HStack {
TextField ( " new todo " , text : $ newToDo )
.textFieldStyle ( .roundedBorder )
Button ( action : {
data.append ( Todo ( action : newToDo ) )
newToDo = ||||
}) {
See next page for the code
Image ( systemName : " plus.circle.fill " ) that insets the rows .
.font ( .title )

www.bigmountainstudio.com 160
 List

List Row Inset Continued

.foregroundColor ( .white )
}
}
}
.padding ( )
.background ( Color.green )

List {
ForEach ( self.data ) { datum in
Text ( datum.action )
.font ( .title )
.padding ( )
// Inset row based on data
I'm using a condition here to
listRowInsets ( EdgeInsets ( top : 0 ,
determine just how much to inset
leading : datum.isIndented ? 60 : 20
the row.
bottom : 0 , trailing : 0 ) )
}
}
.listStyle ( .plain )
}
}
}

Note : If you want to remove all default Note: If you want a row content to go to
edge insets (setting all to zero ) , you can not be indented at all ( so it touches the
use: edge of the list , then set the leading
.listRowInsets ( EdgeInsets ( ) ) edge to zero .

www.bigmountainstudio.com 161
 List
List With Children iOS 14

// Need to conform to Identifiable

struct Parent: Identifiable {
var id = UUID() Ifyou have nested data,
var name = "" this could be a good way
var children: [Parent]? // Had to make this optional to represent it in a List.
}

struct List_WithChildren: View {

var parents = [Parent(name: "Mark",
children: [Parent(name: "Paola")]),
Parent(name: "Rodrigo",
children: [Parent(name: "Kai"), Parent(name: "Brennan"),
Parent(name: "Easton")]),
Parent(name: "Marcella",
children: [Parent(name: "Sam"), Parent(name: "Melissa"),
Parent(name: "Melanie")])]

var body: some View {

VStack(spacing: 20.0) {
HeaderView("List",
subtitle: "Children",
desc: "You can arrange your data to allow the List view to show it in an
outline style.", back: .green)

List(parents, children: \.children) { parent in

Text("\(parent.name)")
Use the List init with the
}
}
children parameter and
.font(.title) use a key path to point to
} your nested property.
}

www.bigmountainstudio.com 162
 List

ListStyle : Automatic

struct List_ListStyle_Automatic : View {

7:55
var body : some View {
List VStack ( spacing : 20 ) {
HeaderView ( " List " ,
List Style: Automatic subtitle : " List Style : Automatic " ,
desc : " You can apply different styles to lists . Here is what a list looks
You can apply different styles
like using the default style ' automatic ' . " ,
to lists . Here is what a list
back : green )
looks like using the default List {
style ' automatic ' . Text ( " What would you like to learn ? " )
.font ( .title2 )
.fontWeight ( .bold )
What would you like to learn? Label ( " Learn Geography " , systemImage : " signpost.right.fill " )
Label ( " Learn Music " , systemImage : " doc.richtext " )
Learn Geography
Label ( " Learn Photography " , systemImage : " camera.aperture " )
Learn Music
Label ( " Learn Art " , systemImage : " paintpalette.fill " )
Learn Photography .font ( Font.system ( .title3 ) .weight ( .bold ) )
Label ( " Learn Physics " , systemImage : " atom " )
Learn Art
Label ( " Learn 3D " , systemImage : " cube.transparent " )
Learn Physics Label ( " Learn Hair Styling " , systemImage : " comb.fill" )
}
Learn 3D
.accentColor ( .green )
Learn Hair Styling .listStyle ( .automatic )
}
.font ( .title ) Note: You do not have to apply
} this modifier if the value is

} automatic . This is the default .

www.bigmountainstudio.com 163
 Link

IOS 14 IOS 15 IOS 16

Additional List Content

Discover even more you can do with a list including : customizing separators (or removing them ) , swipe actions, section separators , safe area
insets , apply tints and header/footer list styles .

SWIFTUI
MASTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste g ntain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mou Stu
k
Mar Moey ke ns Mastery
OD

This SwiftUI chapter is locked in this

preview.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $ 49.50!

www.bigmountainstudio.com 164
 iOS 14

Menu

The Menu view allows you to attach actions toa view. You basically add some buttons (with or without images) and define a
label, or a visible view to the user. When the user taps the label, the actions will show.
This SwiftUI chapter is locked in this
This is similar to the contextMenu modifier (in the ControlsModifiers chapter) where you can attach a menu to any view
that becomes visible when you long-press the view.
preview.

This is a pull-in view. SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

www.bigmountainstudio.com 165
 MultiDatePicker

iOS 16

MultiDatePicker

SWIFTUI
HALSTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste VIFTUIDEVELOPERS BigMountainStudio
BigMountainStudio
k
Mar Moey ke ns Mastery

The multi-date picker allows et ma

man This SwiftUl chapter is locked in this erstand is it does not allow the user
nyThis to select a
range of dates ...just individua
preview.
The selected dates are not ordered .

SAVE 10 % AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!
This is a push - out view.

www.bigmountainstudio.com 166
 NavigationStack

iOS 16

NavigationStack

<

The NavigationStack is slightly different in that it will fill the whole screen when used . You will never have to specify its size . It is used to
help you navigate from one screen to another with built- in ways to navigate forward and back . This chapter will also teach you how to use
and customize the navigation stack .

This is a push- out view .

www.bigmountainstudio.com 167
 NavigationStack

< Introduction <

struct Navigation_Intro : View {

6:40 By default, the navigation stack will

((
var body : some View {
not show anything if there is no title
NavigationStack { modifier added for it to use.
Image ( systemName : " hand.wave.fill " )
.font ( .largeTitle ) The navigation stack bar is there at

} the top , you just can't see it .

}
}

www.bigmountainstudio.com 168
 NavigationStack

< Navigation Title <

struct Navigation_NavigationTitle : View { The navigation stack will look

6:41
var body : some View { for a navigation title modifier
NavigationStack { INSIDE itself.
Text ( " ")
Navigation Stack Title
.navigationTitle ( " Navigation Stack Title " ) By default, a larger navigation
} bar is used for the navigation
.font ( .title ) stack.

}
}

11

Warning: If you put the navigation

title on the navigation stack itself, it
will not work .

www.bigmountainstudio.com 169
 NavigationStack

< Background Color <

struct Navigation_BackgroundColor : View { The contents of the navigation stack

6:41
var body : some View { is within the safe area .
NavigationStack {
ZStack { Where the nav bar is on top is an
Background Color
"unsafe area".
Color.green.opacity ( 0.25 )
.ignoresSafeArea (
If you want a color to go behind the
navigation stack's title bar, then you
Color.gray.opacity ( 0.25) will have to ignore that safe area
} edge (or all edges ) .
.navigationTitle ( " Background Color "
}
} This gray color gives you a better
} idea where the safe area is and
where the edge is against the
navigation stack's title bar.

www.bigmountainstudio.com 170
 NavigationStack

iOS 15
Custom Background

struct Navigation_CustomBackground : View {

6:42
var body : some View { This background modifier will
NavigationStack { automatically ignore all safe
VStack { area edges . That's why it
Custom Background
Divider ( ) expands into the nav bar
area to create your nav
.background (
background .
LinearGradient ( colors : [ .green , blue ] ,
startPoint : .leading ,
endPoint : .trailing )
.opacity ( 0.5 )
shadow ( .drop ( radius : 2 , y : 2 ) ) ,
Use this optional parameter
ignoresSafeAreaEdges : .top ) to specify which edges the
background should ignore .
Spacer () By default it ignores all
} edges .
.navigationTitle ( " Custom Background " )
}
}
}

Note : This will change just this screen's

navigation stack, not all nav stack though .
To change all navigation stacks , see next
page.

www.bigmountainstudio.com 171
 NavigationStack

iOS 15
UINavigation BarAppearance

struct Navigation_UINavigationBarAppearance : View {

((
6:42 www. Use UINavigation BarAppearance to
var body : some View {
NavigationStack { apply style/color to ALL navigation
bars.
VStack {
Appearance

}
.navigationTitle ( " Appearance " )
.font ( .title )
}
.onAppear {
let appearance = UINavigationBarAppearance ( )

appearance.backgroundColor = UIColor ( Color.green.opacity ( 0.25 ) )

UINavigationBar.appearance ( ) . standardAppearance = appearance

UINavigationBar.appearance ( ) . scrollEdgeAppearance = appearance
}
}
}

Note: You could also set this when the app starts on the very first view of your app .

www.bigmountainstudio.com 172
 NavigationStack

< Display Mode <

struct Navigation_DisplayMode : View {

6:43
var body : some View {
Inline Display Mode NavigationStack {
VStack {
Divider ( )
Spacer()
}
.navigationTitle ( " Inline Display Mode " )
.navigationBarTitleDisplayMode ( .inline )
}
}
}

Using inline will render the

smaller nav bar.

Note: If you navigate from

this screen , the next one will
also have an inline bar title.

www.bigmountainstudio.com 173
 NavigationStack
NavigationBarHidden
struct Navigation_BarHidden: View {
@State private var isHidden = false

var body: some View {

NavigationStack {
Toggle("Hide Nav Bar", isOn: $isHidden)
.font(.title)
.padding() Use this modifier if you want to hide the
.navigationTitle("Hide Me")
.navigationBarHidden(isHidden) navigation bar. This is helpful when you
want to control navigation yourself.
}
}
}

0:00

www.bigmountainstudio.com 174
 NavigationStack

< Navigation Bar Items <

struct Navigation_NavBarItems : View {

6:46 You can add navigation bar buttons to the
var body : some View {
leading or trailing ( or both ) sides of a
A Actions NavigationStack { navigation bar.
VStack {
Navigation Bar Buttons
}
.navigationTitle ( " Navigation Bar Buttons " )
.toolbar {
ToolbarItem ( placement : .navigationBarLeading )
Button ( action : {}) {
Image ( systemName : " bell.fill " )
For more ways on how to
.padding ( .horizontal )
use the toolbar modifier,
}
go to Controls Modifiers
} > Toolbar section.
ToolbarItem ( placement : .navigationBarTrailing ) {
Button ( " Actions " , action : { })
}
}
.tint ( .pink )
}
} Use tint to change the color of the buttons .

www.bigmountainstudio.com 175
 NavigationStack

< NavigationBarBackButtonHidden <

6:46 6:46 You can hide the back button in

the navigation bar for views by
using a modifier. (Code on next
Navigation Views Detail View
page. )

This is good in scenarios where

you supply another button to
navigate the user back or you want
to supply your own custom back
button (see next example for
custom back button ) .

Go To Detail Go Back

www.bigmountainstudio.com 176
 NavigationStack
(Code) NavigationBarBackButtonHidden
// First Screen
struct Navigation_BackButtonHidden: View {
var body: some View {
Use NavigationLink to navigate
NavigationStack {
to a new screen.
NavigationLink("Go To Detail", destination: BackButtonHiddenDetail())
More about NavigationLink in
.font(.title)
.navigationTitle("Navigation Views")
the next section.
}
}
}

// Second Screen
struct BackButtonHiddenDetail: View {
This will allow you to
@Environment(\.dismiss) var dismiss
navigate backward.
var body: some View {
Button("Go Back") {
dismiss() Dismissing what is being presented will
} navigate you back to the previous screen.
.font(.title)
.navigationTitle("Detail View")
// Hide the back button
The back button is hidden. This allows you to create a
.navigationBarBackButtonHidden(true)
custom back button where you might want to add logic to it.
}
}

www.bigmountainstudio.com 177
 NavigationStack

< Custom Back Button <

struct Navigation_CustomBackButton : View {

((
6:48 var body : some View {
NavigationStack {
NavigationLink ( " Go To Detail " ,
Detail View destination : Navigation_CustomBackButton_Detail ( ) )
.font ( .title )
.navigationTitle ( " Navigation Views " )
}
} Hide the system back
} button and then use toolbar
// Second Screen modifier to add a leading
struct Navigation_CustomBackButton_Detail : View { button .
@Environment ( \ . dismiss ) var dismiss

var body : some View {

VStack {
Toolbar buttons can't
}
.navigationTitle ( " Detail View" ) show text and images
.navigationBarBackButtonHidden ( true ) at the same time .
.toolbar {
ToolbarItem ( placement : .topBarLeading ) { If you want text and
Button ( action : {
image, then hide the
dismiss ( )
whole nav bar
}) {
Label ( " Back " , systemImage : " arrow.left.circle ) (previous example) .
}
}

}
}
}
} Warning: By hiding the back button , you will lose the
A
ability to swipe back to the previous screen .

www.bigmountainstudio.com 178
 NavigationStack
Customizing the Nav Bar iOS 14

Learn about more options for adding buttons and customizing

the NavigationView with the toolbar.

To explore this functionality, go to Controls Modifier > Toolbar.

www.bigmountainstudio.com 179
 NavigationSplitView

iOS 16

Navigation SplitView

SWIFTUI
HALSTERY Visual ReferenceGuide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUl chapter is locked in this

You have probably seen on an macOS an app that has preview.cal panes. In the far left pane you can tap on items that shows
more details to the right . This is a common navigational pattern that can be achieved with the navigation split view .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50 !
This is a push - out view .

www.bigmountainstudio.com 180
 NavigationLink

NavigationLink

>

The NavigationLink is your way to navigate to another view. It ONLY works inside of a NavigationView . The appearance is

just like a Button . You can customize it just like you can customize a Button too .

This is a pull - In view.

www.bigmountainstudio.com 181
 NavigationLink

Introduction

struct NavLink_Intro : View { Use NavigationLink to navigate to a

8:54
var body : some View { new view inside a NavigationStack .

•)
NavigationStack {
VStack ( spacing : 20 ) {
NavigationLink NavigationLink ( " Just Text " , destination : SecondView、

NavigationLink {
SecondView ( )
} label : {
Label ( " Label " , systemImage : " doc.text.fill
}
}
.navigationTitle ( " NavigationLink " )
}
Just Text
.font ( .title )
} You can also use the label
Label
} parameter to customize the
tappable view to trigger
struct SecondView : View { navigation .
var body : some View {
VStack {
Text ( " View 2 " )
These are the basic
.font ( .largeTitle )
} implementations using just text or
a label and a destination . The
.navigationTitle ( " Second View" )
destination can be any view.
}
}

www.bigmountainstudio.com 182
 NavigationLink

Customization

struct NavLink_Customization : View {

8:55 You can customize NavigationLink
var body : some View { just like you would with a Button .
NavigationStack {
VStack ( spacing : 20 ) {
NavigationLink
NavigationLink ( destination : SecondView ( ) ) {
Text ( " Navigate " )
foregroundStyle ( .white )
.padding ( )
}
.buttonStyle ( .borderedProminent )
.tint ( .pink )

The trailing closure is the

NavigationLink ( destination : SecondView ( ) ) { label parameter. This allows
Navigate
LabeledContent ( " Navigate " ) { you to compose any view
Image ( systemName : " chevron.right " ) that will navigate you .
Navigate . foregroundStyle ( .accentColor )
}
.padding ( )
}
}

.navigationTitle ( " NavigationLink " )

}
.font ( .title ) Tip : Try to keep your views and modifiers within the closure .
}
Like the Button , anything inside will fade when tapped .
}

www.bigmountainstudio.com 183
 NavigationLink

With Navigation Destination iOS 16

struct NavLink_WithNavigationDestination : View {

8:55
var body : some View { A NavigationLink that
NavigationStack { uses a value will not do

VStack { anything by itself. ( Notice

Navigation Destination there is no a destination
NavigationLink ( value : " NavigationLink 1 " )
nor a view here . )
Text ( " Navigate 1 " )
}
There must be a
}
navigation Destination
.navigationDestination ( for : String.self ) { stringValue
modifier that is looking for
Text ( " Value is : ") + Text ( " \ ( stringValue ) " ) . bold ( ) | the same type ( String in
} this example) .
.navigationTitle ( " Navigation Destination " )
}
.font ( .title )
Navigate 1 Here are some things to note:
}
1. The navigation Destination
}
is the modifier that does
the navigating .
2. The view within the
closure is the destination .
This might be a confusing concept to understand at first . 3. The value specified by the
NavigationLink is passed
Just know that when the navigation link button is tapped , it into that closure and can
will look for a navigation Destination modifier that handles be used in the destination
the same type as the value that is set . view.

www.bigmountainstudio.com 184
 NavigationLink
With Different Types iOS 16
struct NavLink_WithDifferentTypes: View {
var body: some View {

NavigationStack {
VStack(spacing: 16.0) {
NavigationLink(value: "NavigationLink 1") {
Text("Navigate with String")
}
The navigation links will
NavigationLink(value: true) {
automatically link up to
Text("Navigate with Bool") the navigation destination
} modifiers of the same
} type.
.navigationDestination(for: String.self) { stringValue in
Text("Value is: ") + Text("\(stringValue)").bold()
}
.navigationDestination(for: Bool.self) { boolValue in
Text("Value is: ") + Text("\(boolValue.description)").bold()
}
.navigationTitle("Navigation Destination")
}
.font(.title)
}
}

0:00

www.bigmountainstudio.com 185
 NavigationLink

isPresented iOS 16

struct NavLink_isPresented : View {

9:11 @State private var showSheet = false
@State private var navigate = false

Navigate When True var body : some View {

At this time, when a
NavigationStack {
NavigationLink is used
VStack {
inside a sheet it will be
Button ( " Show Sheet " ) { showSheet.toggle ( ) }
disabled .
}
.navigationTitle ( " Navigate When True " )
sheet ( isPresented : $ showSheet ) {
VStack ( spacing : 16.0 ) {
NavigationLink ( destination : Text ( " Destination from Link " ) )
Text ( " Navigation Link " )
}
Button ( " Button Link " ) {
Show Sheet
showSheet = false One solution is to
navigate = true combine a Button and the
} navigation Destination that
} uses the isPresented
.presentation Detents ( [ . height ( 240 ) ] parameter.
}
Navigation Link .navigationDestination ( isPresented : $ navigate )-
Text ( " Destination from Button " )
Button Link
}
}
.font ( .title )
} Warning: The navigation Destination has to
} be outside the sheet for this to work.

www.bigmountainstudio.com 186
 NavigationLink

Navigation Path with Enum iOS 16

enum Screens {
You can also use an enum to keep
case screen1
case screen2 track of all of your screens .
case screen3
}

struct Nav_WithPathAndEnum : View {

The navpath is now set to the
@State private var navPath : [ Screens ] = K
enum .

var body : some View {

NavigationStack ( path : $ navPath )
VStack {
Button ( " Deep Link to Screen 2 " ) { The NavigationStack's path is
navPath.append ( Screens.screen1 ) bound to an array of enums
navPath.append ( Screens.screen2 ) now.
}
Button ( " Deep Link to Screen 3 " ) {
navPath.append ( Screens.screen1 )
navPath.append ( Screens.screen2 )
navPath.append ( Screens.screen3 )
}
}
.navigationDestination ( for : Screens.self ) { screenEnum in
NavigationController.navig te ( to : screen End
} This
.navigationTitle ( " Navigate with Path " ) NavigationController
}
This navigation is handling where to
.font ( .title )
destination modifier is navigate to based on
0:00 }
} now navigating for the the enum value .
Screens enum type . (See next page . )

www.bigmountainstudio.com 187
 NavigationLink

NavigationController

class NavigationController {
This navigate function returns the view to navigate to .
@ViewBuilder

static func navigate ( to screen : Screens ) -> some View {

switch screen {
case screen1 :

Image ( systemName : " 1.square.fill " ) . font ( .largeTitle ) .foregroundStyle ( .green )

case screen2 :

Image ( systemName : " 2.square.fill " ) . font ( .largeTitle ) .foregroundStyle ( .red ).

case screen3 :
Image ( systemName : " 3.square.fill " ) . font ( .largeTitle ) .foregroundStyle ( .purple )
}
}
}

This is a good method when you :

1. Have no data to pass into your views .
2. Pass in the same object/data to all of your screens .
3. Keep data in a global location where all your views can access it .

www.bigmountainstudio.com 188
 NavigationLink

iOS 16
Navigation Path

struct ProductForNav : Hashable {| struct CreditCardForNav : Hashable { Two different

9:01 var name = |||| var number = " "
|||| types used in
var price = 0.0 var expiration =
< Order } } navigation .

Credit Card Details

struct Nav_WithNavigationPath : View {
5111 1111 1111 1111 @State private var product = ProductForNav ( name : " Mouse " , price : 24.99 )
@State private var cc = CreditCardForNav ( number : " 5111 1111 1111 1111 " , expiration : " 02/28 " )
02/28 @State private var navPath = NavigationPatk``
The NavigationPath
var body : some View {
can hold a diverse
NavigationStack ( path : $ navPath ) {
Form { collection of data
NavigationLink ( value : product ) { Text ( product.name ) } types .
NavigationLink ( value : cc ) { Text ( cc.number ) }
}
.navigationTitle ( " Order " ) Use this when you
navigationDestination ( for : ProductForNav.self ) { product _n are not passing in
Form {
the same type to all
Text ( product.name )
views you navigate
Text ( product.price , format : .currency ( code : " USD " )
. foregroundStyle ( .secondary ) to .
} .navigationTitle ( " Product Details " )
}
.navigationDestination ( for : CreditCardForNav.self ) { cc in
Form { You will need a
Text ( cc.number ) separate navigation
Text ( cc.expiration ) .foregroundStyle ( .secondary ) destination modifier
} .navigationTitle ( " Credit Card Details " )
for each type.
}
}
font ( .title )
}
}

www.bigmountainstudio.com 189
 NavigationLink

Pop to Root iOS 16

struct NavLink_PopToRoot : View {

9:02 wwww
@State private var navPath : [ String ] = [ ]
< View2

View 3 var body : some View { Note: The term " root"

NavigationStack ( path : $ navPath ) { refers to the first view of

the navigation stack .
VStack {
"Pop" means to remove all
NavigationLink ( value : " View 2 " ) {
other views off of the stack
Text ( " Go to View 2 " ) so it shows just the root
} view.

.navigationTitle ( " Pop to Root " )

The key is to make sure
Pop to Root View .navigationDestination ( for : String.self ) { pathValue your navigation path array
Nav Path Items: if pathValue == " View 2 " { (navPath in this example ) is
View 2 & View 3 accessible to all destination
NavLinkView2 ( navPath : $ navPat
views.
} else {

NavLinkView3 ( nav Path : $ navPath

In this example, it is being
} passed into the destination
} views.

}
See next page for how the
.font ( .title )
destination views pop back
} to the root (first ) view .
}

www.bigmountainstudio.com 190
 NavigationLink

Pop to Root ( The other views) iOS 16

struct NavLinkView2 : View {

@Binding var navPath : [ String ]
Make sure your destination views have access to your navigation path array.
var body : some View {
VStack ( spacing : 20 ) {
NavigationLink ( value : " View 3 " ) {
Text ( " Go to View 3 " )
}

Text ( " Nav Path Items : " )

Text ( navPath , format : .list ( type : .and , width : .short ) )
}
.navigationTitle ( " View 2 " )
}
}

struct NavLinkView3 : View {

@Binding var navPath : [ String .

var body : some View {

VStack {
Button ( " Pop to Root View" ) { This is where the magic happens . To pop to the root (first view) , just remove all
navPath.removeAll (
items from the navigation path array.
}
Text ( " Nav Path Items : " )
Text ( navPath , format : .list ( type : .and , width : .short ) )
}
.navigationTitle ( " View 3")
}
}

www.bigmountainstudio.com 191
 NavigationLink

Detail Link iOS 16

9:04 AM Thu Sep 8 100% struct NavLink_IsDetailLink : View {

var body : some View {
NavigationSplitView {
NavigationLink VStack ( spacing : 20 ) {
NavigationLink ( " Navigate There ->" ) {
NavigationDestinationView ( )
}

NavigationLink ( " Navigate Here " ) {

By default, a navigation link
NavigationDestinationView ( )
will navigate to the detail
}
column .
.isDetailLink ( false ) / Do not navigate to detail column
}
.navigationTitle ( " NavigationLink"
} detail : { Use is DetailLink modifier to
Text ( " Detail" ) control where navigation
Navigate There -> }
Detail happens .
.font ( .title )
Navigate Here
}
} If it is true (default) the
destination will appear in the
struct NavigationDestinationView : View { detail column .
var body : some View {
VStack ( spacing : 20 ) { If false, the destination will
Text ( " Navigation Destination " ) appear in the SAME column .
}
.navigationTitle ( " Destination " )
.font ( .title )
}
}

www.bigmountainstudio.com 192
 iOS 14

OutlineGroup

ii
!
OutlineGroups gives you another way to present hierarchical data . It is very similar to using a List with the children parameter. Except this
container view does not scroll . It's probably best for limited data .

This is a pull - in view .

www.bigmountainstudio.com 193
 OutlineGroup

?!! Introduction iOS 14

struct OutlineGroup_Intro : View { Parent struct on next page .

((
3:34 var parents = [ Parent ( name : " Mark " ,
children : [ Parent ( name : " Paola " ) ] ) ,
Parent ( name : " Rodrigo " ,
OutlineGroup children : [ Parent ( name : " Kai " ) ,
Parent ( name : " Brennan " ) ,
Introduction Parent ( name : " Easton " ) ] ) ,
Parent ( name : " Marcella " ,
This is very similar to using children : [ Parent ( name : " Sam " ,
children : [ Parent ( name : " Joe " ) ] ) ,
the List with the children
Parent ( name : " Melissa " ) ,
parameter except this Parent ( name : " Melanie " ) ] ) ]
container does not scroll . var body : some View {
VStack ( spacing : 20.0 ) {
HeaderView ( " OutlineGroup " ,
Mark subtitle : " Introduction " ,
Paola desc : " This is very similar to using the List with the children parameter
except this container does not scroll . " ,
back : Color.red , textColor : .primary )
Rodrigo
>

Kai OutlineGroup ( parents , children : \ .children ) { parent in

Brennan HStack {
Image ( systemName : " person.circle " )
Easton
Text ("\ ( parent.name ) " )
Spacer ( )
Marcella }
}
Sam
.padding ( .horizontal )
Melissa .tint ( .red )
The parent rows that have
}
Melanie children all take on the accent
.font ( .title )
} color.
}

www.bigmountainstudio.com 194
 OutlineGroup

?!! iOS 14

// Need to conform to Identifiable

struct Parent : Identifiable {
var id = UUID ( )
var name = "
var children : [ Parent ] ? = nil // Had to make this optional
} Note : Unlike the List with children , the child
rows in an OutlineGroup do not indent .

If you want to indent child rows , you will

probably have to add a property to your
You can just create an array that holds more of
itself for the children data . model that indicates if it is child data or level
of indent .

www.bigmountainstudio.com 195
 iOS 14

OutlineGro
up

SWIFTUI
HALSTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUI chapter is locked in this

OutlineGroups gives you a
y topresent hierarchipreview. is very similar to using a List with the children
parameter. Except this contamer view does not scroll . It's probably best for limited data .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $ 49.50!
This is a pull - in view.

www.bigmountainstudio.com 196
 Picker

To get or set a value for the Picker, you need to bind it to a variable . This variable is then passed into the Picker's initializer .

Then , all you need to do is change this bound variable's value to select the row you want to show in the Picker . Or read the

bound variable's value to see which row is currently selected . One thing to note is that this variable is actually bound to the

Picker row's tag property which you will see in the following pages .

www.bigmountainstudio.com 197
 Picker

Introduction

I
struct Picker_Intro : View {
3:01 Starting in iOS 15, the default picker
@State private var favoriteState = 1
style will look like the menu style .
Picker
(Before, the default was the wheel
var body : some View {
Introduction style . )
VStack ( spacing : 20 ) { iOS 15
HeaderView( " Picker " ,
You can associate a property
subtitle : " Introduction " ,
with the picker rows ' tag
values . desc : " You can associate a property with the picker rows ' tag values . " )

Utah Picker ( " States " , selection : $ favoriteState ) {

California Text ( " California " ) . tag ( 0 )

This picker is actually
Text ( " Utah " ) . tag ( 1 ) binding the tag values to the
✓ Utah
Text ( " Vermont " ) . tag ( 2 ) favoriteState property.
Vermont }

Spacer ()
}
.font ( .title )
}
}

Note : Changing the font size does not

seem to affect the picker's font size .

www.bigmountainstudio.com 198
 Picker

Sections

Ш
struct Picker_Sections : View {
3:56 @State private var favoriteState = 1

Picker
var body : some View {
Sections VStack ( spacing : 20 ) {
HeaderView ( " Picker " ,
subtitle : " Sections " ,
Use sections within your
desc : " Use sections within your picker values to organize selections . " )
picker values to organize
selections. Picker ( " States " , selection : $ favoriteState ) {
Section {
Utah Text ( " California " ) . tag ( 0 )
Text ( " Utah " ) . tag ( 1 )
West } header : {
Text ( " West " )
California
}
✓ Utah
Section {
East Text ( " Vermont " ) . tag ( 2 )
Vermont Text ( " New Hampshire " ) . tag ( 3 )
} header : {
New Hampshire Text ( " East " )
}
}

Spacer ( )
}
.font ( .title )
}
}

www.bigmountainstudio.com 199
 Picker

Wheel Style

Ш
struct Picker_Wheel : View {
3:06 This will be the default value
@State private var yourName = "Mark
selected in the Picker.

var body : some View {

VStack ( spacing : 20 ) {
HeaderView ( " Picker " ,
subtitle : " Wheel Style " ,
Picker
desc : " You can change the way a Picker looks by using the pickerStyle
Wheel Style modifier . " )

You can change the way a Picker ( " Name " , selection : $ yourName ) {
Picker looks by using the Text ( " Paul " ) . tag ( " Paul " )
pickerStyle modifier . Text ( " Chris " ) . tag ( " Chris " )
Text ( " Mark " ) . tag ( " Mark " )
Text ( " Scott " ) . tag ( " Scott " )
Paul Text ( "Meng " ) . tag ( " Meng " )
Chris }
Set the style right on the
Mark .pickerStyle ( .wheel,
Picker.
Scott }
Meng
.font ( .title )
}
}

www.bigmountainstudio.com 200
 Picker

Programmatic Selection

Ш
struct Picker_ProgrammaticSelection : View {
3:15 @State private var favoriteState = 1

var body : some View {

VStack ( spacing : 20 ) {
HeaderView ( " Picker " ,
Picker
subtitle : " Programmatic Selection " ,

Programmatic Selection desc : " You can programmatically change the Picker selection just by
changing the bound property . " )
You can programmatically
Picker ( " States " , selection : $ favoriteState ) {
change the Picker selection
Text ( " California " ) . tag ( 0 )
just by changing the bound Text ( " Colorado " ) . tag ( 1 )
property. Text ( " Montana " ) . tag ( 2 )
Text ( " Utah " ) . tag ( 3 )

Colorado Text ( " Vermont " ) . tag ( 4 )

Montana }
Utah .pickerStyle ( .wheel )
Vermont .padding ( .horizontal )

When you change the Picker's bound property

Button ( " Select Vermont " ) {
value, the Picker then updates and selects the
withAnimation {
matching row.
favoriteState =
Select Vermont
}
Note: I added with Animation so you see the
}
} wheel actually spin .

.font ( .title )
}
}

www.bigmountainstudio.com 201
 Picker

Customized

Ш
struct Picker_Customized : View {
3:20 @State private var favoriteState = 1
@State private var youTuberName = "Mark"
Picker
var body : some View {
VStack ( spacing : 16 ) {
With Modifiers
Text ( " Picker " ) . font ( .largeTitle )
Text ( " With Modifiers " ) . foregroundColor ( .gray )
Your Favorite State: Text ( " Your Favorite State : " )
Picker ( " Select State " , selection : $ favoriteState ) {
Text ( " California " ) . tag ( 0 )
Text ( " Utah " ) . tag ( 1 )
Text ( " Vermont " ) . tag ( 2 )
California }
Utah .pickerStyle ( .wheel )
Vermont .padding ( .horizontal )
.background ( RoundedRectangle ( cornerRadius : 20 )
.fill ( Color.blue ) )
.padding ( )

Text ( " Who do you want to watch today ? " )

Who do you want to Picker ( " Select person " , selection : $ youTuberName ) {
watch today? Text ( " Paul " ) . tag ( " Paul " )
Text ( " Chris " ) . tag ( " Chris " )
Text ( " Mark " ) . tag ( " Mark " )
Text ( " Scott " ) . tag ( " Scott " )
Paul Text ( " Meng " ) . tag ( " Meng " )
}
Chris
.pickerStyle ( .wheel )
Mark .padding ( .horizontal )
Scott background ( RoundedRectangle ( cornerRadius : 20 )
Meng .stroke ( Color.blue , lineWidth : 1 ) )
.padding ( )
}
.font ( .title )
}
}

www.bigmountainstudio.com 202
 Picker

Rows with Images

Ш
struct Picker_RowsWithImages : View {
9:08 @State private var youTuberName = "Mark"

var body : some View {

VStack ( spacing : 20 ) {
HeaderView ( " Picker " ,
subtitle : " Rows with Images " ,
desc : " Row customization is limited . Adding an image will work . " )
Picker ( selection : $ youTuberName , label : Text ( " " ) ) {
Picker Row ( name : " Paul " ) . tag ( " Paul " )
Row ( name : " Chris " ) . tag ( " Chris " )
Rows with Images Row ( name : " Mark " ) . tag ( " Mark" ) When not using the wheel
Row ( name : " Scott " ) . tag ( " Scott " )
picker style , the picker looks
How you customize the rows is Row ( name : " Meng " ) . tag ( " Meng" )
} like this with the image.
very limited . Adding an image
.pickerStyle ( .wheel )
will work.
.padding ( .horizontal )
}
.font ( .title )
}
}
Mark
Sean
Chris fileprivate struct Row : View {
Mark var name : String Paul
Scott
Paul
var body : some View { Chris
return HStack {
Image ( systemName : " person.fill " ) ✓ Mark
.padding ( .trailing )
. foregroundColor ( Color.red )
Scott
Text ( name )
}
} Meng
}

www.bigmountainstudio.com 203
 Picker

Binding Rows to Data

Ш
struct Picker_BindingToData : View {
9:05 @State private var youTuberName = "Mark"
var youTubers = [ " Sean " , " Chris " , " Mark " , " Scott " , " Paul " ]

var body : some View {

VStack ( spacing : 20 ) {
HeaderView ( " Picker " ,
subtitle : " Binding to Data " ,
Picker desc : " Use a ForEach with your Picker view to populate it with data . " )

Binding to Data Text ( " Who do you want to watch today ? " )

Picker ( selection : $ youTuberName , label : Text ( " " ) ) {

Use a ForEach with your Picker ForEach ( youTubers , id : \ .self ) { name in
view to populate it with data . Row ( name : name )
}
}
Who do you want to watch today? .pickerStyle ( .wheel )

Text ( " Selected : \ (youTuberName ) " )

Sean }
Chris .font ( .title )
Mark }
}
Scott
Paul
fileprivate struct Row : View {
var name : String
var body : some View {
Selected : Mark HStack {
Image ( systemName : " person.fill " )
.padding ( .trailing )
.foregroundColor ( Color.orange )
Text ( name )
}
}
}

www.bigmountainstudio.com 204
 Picker

Pickers in Forms

struct Picker_InForm : View {

9:33 Picker styles can alter the appearance
@State private var selectedDaysOption = " 2 "
var numberOfDaysOptions = [ " 1 " , " 2 " , " 3 " , " 4 " , " 5 " ] | of a picker when inside a form . Here
are some of the different options .
2 Days var body : some View {
Frequency VStack {
2 Days Form {
Frequency
Picker ( " Frequency " , selection : $ selectedDaysOption ) {
ForEach ( numberOfDaysOptions , id : \ .self ) {
Text ( " \ ( $ 0 ) Days " ) . tag ( $ 0 )
FREQUENCY
}
}
1 Days
Picker ( " Frequency " , selection : $ selectedDaysOption ) {
2 Days ForEach ( numberOfDaysOptions , id : \ .self ) {
Text ( " \ ( $ 0 ) Days " ) . tag ( $ 0 )
3 Days }
}
4 Days .pickerStyle ( .menu ) // Add this modifier to make it use the accent color

5 Days Picker ( " Frequency " , selection : $ selectedDaysOption ) {

ForEach ( numberOfDaysOptions , id : \ .self ) {
Text ( " \ ( $ 0 ) Days " ) . tag ( $ 0 )
} Notice the inline style
} created its own section
.pickerStyle ( .inline )
within the form .
1 Days
Picker ( " Frequency " , selection : $ selectedDaysOption )
2 Days
ForEach ( numberOfDaysOptions , id : \ .self ) {
3 Days Text ( " \ ( $ 0 ) Days " ) . tag ( $ 0 )
4 Days }
5 Days
}
.pickerStyle ( .wheel )
}
.navigationTitle ( " Picker " )
}
.font ( .title )
}
}

www.bigmountainstudio.com 205
 PhotosPicker

iOS 16

PhotosPicker

SWIFTUI
HALSTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUl chapter is locked in this

The photos picker first appear button on your UI . Wher preview. will give the user access to the photos library. You can
programmatically filter what you want them to see, such as just videos or time - lapse videos .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $ 49.50!
The photos picker view (the

www.bigmountainstudio.com 206
 iOS 14

ProgressView

SWIFTUI
HALSTERY Visual ReferenceGuide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUl chapter is locked in this

The progress view gives yo

fferent ways to show preview. hat something is currently happening and optionally
give you a way to show the progression of some activity.

This is a pull- in view in so SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50 !

207
 RenameButton

iOS 16

RenameButton

SWIFTUI
MASTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste VIFTUIDEVELOPERS BigMountainStudio
BigMountainStudio
Mark Moey ke ns Mastery

The rename button doesn't d by itsel This SwiftUl chapter is locked in this er to implement some code when the button
is tapped .
preview.
The button can be formatted just like the SwiftUI Button can .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50 !
This is a pull - in view.

www.bigmountainstudio.com 208
 ScrollView

A ScrollView is like a container for child views . When the child views within the ScrollView go outside the frame , the user

can scroll to bring the child views that are outside the frame into view.

A ScrollView is a push - out view in the scroll direction you specify. You can set the direction of a ScrollView to be vertical or
horizontal .

www.bigmountainstudio.com 209
 ScrollView

Introduction

struct Scrollview_Intro : View {

7:34
@State private var names = [ " Scott " , " Mark " , " Chris " , " Sean " , " Rod " , " Meng " , " Natasha " ,

)•
" Chase " , " Evans " , " Paul " , " Durtschi " , " Max " ]
Scott
var body : some View { Wrap the ForEach in a ScrollView.
ScrollView
Mark ForEach ( names , id : \ .self ) { name in
HStack {

Chris Text ( name ) .foregroundStyle ( .primary )

Image ( systemName : " checkmark.seal.fill " )
foregroundStyle ( .green )
Sean
Spacer ()
}
Rod .padding ( )
.background ( Color.white.shadow ( .drop ( radius : 1 , y : 1 ) ) ,
in : Rounded Rectangle ( cornerRadius : 8 ) )
Meng
.padding ( .bottom , 4 )
}
Natasha .padding ( .horizontal )
}
.font ( .title )
Chase
}
}
Evans

A Scrollview with a ForEach view is similar to a List . But be warned , the rows are not reusable . It is best
Paul to limit the number of rows for memory and performance considerations.

www.bigmountainstudio.com 210
 ScrollView

SafeArealnset iOS 15

struct ScrollView_SafeAreaInset : View {

((
7:50
@State private var names = [ " Scott " , " Mark " , " Chris " , " Sean " , " Rod " , " Meng " , " Natasha " ,
" Chase " , " Evans " , " Paul " , " Durtschi " , " Max " ]
Scott
var body : some View {
ScrollView {
Mark ForEach ( names , id : \ .self ) { name in
HStack {
Text ( name )
Chris
. foregroundStyle ( .primary)
Image ( systemName : " checkmark.seal.fill " )
Sean . foregroundStyle ( .green )
Spacer ()
}
Rod
.padding ( )
.background ( Color.white.shadow ( .drop ( radius : 1 , y : 1) ) ,
Meng in : RoundedRectangle ( cornerRadius : 8 ) )
}
.padding ( .horizontal ) The rows will scroll behind the safe area inset but
Natasha
} when you get to the bottom , the last row will show
.safeAreaInset ( edge : .bottom ) { completely outside of it .
Chase VStack ( spacing : 20 ) {
Divider ( ) Last row
Max
Text ( " 12 People " )
Evans
}
.background ( .regularMaterial ) 12 People
}
12 People .font ( .title )
}
}

www.bigmountainstudio.com 211
 ScrollView

Scroll Horizontally

struct Scrollview_Horizontal : View {

For horizontal scrolling ,
7:51
var items = [ Color.green , Color.blue , Color.purple , Color.pin set the scroll direction to

Color.yellow , Color.orange ] horizontal with an HStack.

If the contents extend

var body : some View { horizontally beyond the

GeometryReader { gr in screen's frame, then

scrolling will be enabled .
ScrollView ( Axis.Set.horizontal , showsIndicators : true )

HStack {

ForEach ( items , id : \ .self ) { item in

RoundedRectangle ( cornerRadius : 15 )

.fill ( item )

.frame ( width : gr.size.width - 60 ,

height : 200 ) You can also set if you

want to show the scroll
}
indicators or not .
}
The geometry reader is
}
used to always make the
.padding ( .horizontal )
width of the view a little
}
smaller than the screen's
.font ( .title )
width so you can see the
}
second view going off the
} screen .

www.bigmountainstudio.com 212
 ScrollView

iOS 15
Leading SafeArealnset

struct ScrollView_Horizontal_SafeAreaInset : View {

Add the
7:52 var items = [ Color.green , Color.blue , Color.purple , Color.pink ,

•)
Color.yellow , Color.orange ] safeArealnset to a
ScrollView to show
var body : some View {
GeometryReader { gr in additional views that
VStack {
will inset the
Spacer ( )
ScrollView ( Axis.Set.horizontal , showsIndicators : true ) ScrollView's content .
HStack {
ForEach ( items , id : \ .self ) { item in
RoundedRectangle ( cornerRadius : 15 )
.fill ( item )
.frame ( width : gr.size.width —- 60 )
}
}
Scroll }
.padding ( .trailing ) The first item in the ScrollView
■ safeAreaInset ( edge : .leading ) { will be moved just enough to
VStack ( spacing : 10 ) { start next to the safeArealnset
Text ( " Scroll " ) view.
.font ( .body )
Image ( systemName : " arrow.left.circle " ) When you start scrolling , the
} contents of the ScrollView will
.frame ( maxHeight : .infinity )
go below your safeArealnset
.padding ( .horizontal )
view:
.background ( .regularMaterial )
In this example, we set the }
.frame ( height : 200 )
edge to leading . But you
Spacer () Scroll
can also use trailing . }
}
.font ( .title )
}
}

www.bigmountainstudio.com 213
 ScrollView

Disable Scrolling iOS 16

struct Scrollview_Disabled : View {

7:53
@State private var disableScroll = false

var items = [ Color.green , Color.blue , Color.purple , Color.pink ,

Color.yellow , Color.orange ]

var body : some View {

ScrollView ( shows Indicators : true ) {
ForEach ( items , id : \ .self ) { item in
RoundedRectangle ( cornerRadius : 15 )
.fill ( item )
.frame ( height : 200 )
.padding ( .horizontal )
}
} You can disable scrolling

.scrollDisabled ( disableScroll with a modifier that

.safeAreaInset ( edge : .bottom ) { passes in a boolean .

Toggle ( " Disable Scrolling " , ison : $ disableScroll )
.padding ( )
.background ( .regularMaterial )
}
.font ( .title )
Disable Scrolling }
}

www.bigmountainstudio.com 214
 Searchable

iOS 15

Searchable

SWIFTUI
MASTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUl chapter is locked in this

preview.
In iOS , the searchable modifier adds a text field to the NavigationView . Using it without a navigation view will show nothing .
Use this modifier for siturtiene wher the ability to La for
ata or filter an existing
set of data already show SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

www.bigmountainstudio.com 215
 SecureField

In order to get or set the text in a SecureField , you need to bind it to a variable . This variable is passed into the

SecureField's initializer. Then , all you need to do is change this bound variable's text to change what is in the SecureField .

Or read the bound variable's value to see what text is currently in the SecureField .

This is a pull - in control .

www.bigmountainstudio.com 216
 SecureField

Introduction

@State private var userName = " "

||||
9:52 4 @State private var password =

VStack ( spacing : 20 ) {
Image ( " Logo " )

Spacer ( )

Text ( " SecureField " )

.font ( .largeTitle )

Text ( " Introduction " )

SecureField
.font ( .title )
Introduction . foregroundColor ( .gray )

Text ( " SecureFields , like TextFields , need to bind to a local variable . " )
SecureFields, like TextFields ,
need to bind to a local variable .

TextField ( " user name " , text : $ userName )

user name .textFieldStyle ( .roundedBorder )
.padding ( )

password SecureField ( " password " , text : $ password )

.textFieldStyle ( .roundedBorder )
.padding ( )
For textFieldStyle , use :
Spacer ( )
} < iOS 15 RoundedBorderTextFieldStyle ( )

iOS 15+ roundedBorder

www.bigmountainstudio.com 217
 SecureField

Customizations

@State private var userName =

|| ||
10:51 @State private var password =

Text ( " Use a ZStack to put a RoundedRectangle behind a SecureField with a plain textfieldStyle . " )

SecureField
ZStack{
Customization RoundedRectangle ( cornerRadius : 8 )
. foregroundColor ( .purple )
TextField ( " user name " , text : $ userName )
Use a ZStack to put a
. foregroundColor ( Color.white )
RoundedRectangle behind a .padding ( .horizontal )
SecureField with a plain }
textfieldStyle . .frame ( height : 40 )
.padding ( .horizontal )
user name
Text ( " Or overlay the SecureField on top of another view or shape . " )

Or overlay the SecureField on

top of another view or shape . RoundedRectangle ( cornerRadius : 8 )
. foregroundColor ( .purple )
password .overlay (
SecureField ( " password " , text : $ password )
. foregroundColor ( Color.white )
■ padding ( .horizontal )
)
.frame ( height : 40 )
.padding ( .horizontal )

www.bigmountainstudio.com 218
 SecureField

Customization Layers

@State private var userName =

|| ||
12:17 @State private var password =

VStack ( spacing : 20 ) {
Text ( " SecureField " )
font ( .largeTitle )
SecureField Text ( " Customization Layers " )
.font ( .title )
Customization Layers
. foregroundColor ( .gray )
Text ( " You can also add a background to the SecureField . It's all the same idea : adjust the
You can also add a background layers . " )
to the SecureField . It's all the
same idea: adjust the layers .
SecureField ( " password " , text : $ password )
password . foregroundColor ( Color.white )

e a st .frame ( height : 40 )
stao tmheide adju .padding ( .horizontal )
.background (
Capsule ( )
. foregroundColor ( .purple )
word
pass )
.padding ( .horizontal )

The highlighted layer in that

Image ( " SecureFieldLayers " )
image is the actual text field
layer of the view.
Text ( " The highlighted layer in that image is the actual text field layer of the view . " )
.font ( .title )
.padding ( .horizontal )
}

www.bigmountainstudio.com 219
 SecureField
Keyboard Safe Area iOS 14

struct SecureField_KeyboardSafeArea: View {

@State private var userName = ""
@State private var password = ""

var body: some View {

VStack(spacing: 20) {
Spacer()
Image("Logo")
Spacer()

HeaderView("SecureField",
subtitle: "Keyboard Safe Area",
desc: "SecureFields will automatically move into view when the keyboard
appears. The keyboard adjusts the bottom safe area so it will not cover views.",
back: .purple, textColor: .white)

TextField("user name", text: $userName)

.textFieldStyle(.roundedBorder)
.padding(.horizontal)

SecureField("password", text: $password)

.textFieldStyle(.roundedBorder)
.padding(.horizontal)
}
.font(.title)
}
}

www.bigmountainstudio.com 220
 Segmented Control ( Picker)

Segmented controls are now Picker controls with a different picker style set . In order to get or set the selected segment ,

you need to bind it to a variable . This variable is passed into the segmented control's ( Picker's) initializer. Then , all you need

to do is change this bound variable's value to change the selected segment . Or read the bound variable's value to see

which segment is currently selected .

This is a pull - in view .

www.bigmountainstudio.com 221
 Segmented Control (Picker)

Introduction

@State private var dayNight - "day"

11:33 @State private var tab = 1

VStack ( spacing : 20 ) {
Text ( " Segmented Control ( Picker ) " ) . font ( .largeTitle )
Text ( " Introduction " )
Segmented Control (Picker)
.font ( .title ) .foregroundColor ( .gray )
Introduction Text ( " Associate the segmented control with an @State variable that will control which
segment is selected . The state variable will match each segment's tag value . " )

Associate the segmented control

with an @State variable that will
Picker ( " " , selection : $ dayNight ) {
control which segment is Text ( " Day " ) . tag ( " day " )
selected . The state variable will Text ( " Night " ) . tag ( " night " )
match each segment's tag value . }
.pickerStyle ( .segmented )
Day Night .padding ( )

With Images: Text ( " With Images : " )

Picker ( "" , selection : $ tab ) {

с
0:

Image ( systemName : " sun.min " ) . tag ( 0 )

Image ( systemName : " moon " ) . tag ( 1 )
}
.pickerStyle ( .segmented )
.padding ( )
}

www.bigmountainstudio.com 222
 Segmented Control (Picker)

No Segment Selected

@State private var selection = 0

11:37

VStack ( spacing : 20 ) {
Text ( " Segmented Control ( Picker ) " ) . font ( .largeTitle )
Text ( " No Segment Selected " )
Segmented Control ( Picker)
.font ( .title ) .foregroundColor ( .gray )
No Segment Selected Text ( " This segmented control will have nothing selected because the default state variable
does not match any of the segment tag values . " )

This segmented control will

have nothing selected because Text ( " How many meals do you eat ? " )
the default state variable does . foregroundColor ( .gray )
not match any of the segment .font ( .title )
tag values .
Picker ( " " , selection : $ selection ) {
Text ( " One " ) . tag ( 1 )
How many meals do you eat?
Text ( " Two " ) . tag ( 2 )
Text ( " Three " ) . tag ( 3 )
One Two Three More
Text ( " More " ) . tag ( 4 )
}

The red outline will go away .pickerStyle ( .segmented )

.background ( Rounded Rectangle ( cornerRadius : 8 )
once a selection is made .
.stroke ( Color.red , lineWidth : selection == 0 ? 1 : 0 ) )
.padding ( )

Text ( " The red outline will go away once a selection is made . " )

www.bigmountainstudio.com 223
 Segmented Control (Picker)

Colors

struct SegmentedControl_Colors : View {

12:12 @State private var selection = 2 You can change the color of segmented
controls by using the background modifier.
var body : some View {
VStack ( spacing : 60 ) {
Picker ( " " , selection : $ selection ) {
Text ( " One " ) . tag ( 1 )
Text ( " Two " ) . tag ( 2 )
Text ( " Three " ) . tag ( 3 )
}
.pickerStyle ( .segmented )
.background ( Color.pink )

One Two Three Picker ( " " , selection : $ selection ) {

Text ( " One " ) . tag ( 1 ) Use a rounded rectangle in your
Text ( " Two " ) . tag ( 2 )
background to better fit the existing picker.
Text ( " Three " ) . tag ( 3 )
One Two Three
}
.pickerStyle ( .segmented )
.background ( Color.pink , in : RoundedRectangle ( cornerRadius : 8 ) )
One Two Three
Picker ( " " , selection : $ selection ) {
Text ( " One " ) . tag ( 1 )
Text ( " Two " ) . tag ( 2 )
Text ( " Three " ) . tag ( 3 )
}
.pickerStyle ( .segmented )
.background ( Color.accentColor.opacity ( 0.6 ) , in : Rounded Rectangle ( cornerRadius : 8 ) )
}
.padding ( .horizontal )
} Or use your accent color defined in your
}
asset catalog and lighten it with the opacity
modifier.

www.bigmountainstudio.com 224
 ShareLink

iOS 16

ShareLink

SWIFTUI
MASTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUl chapter is locked in this

The share link button gives y ient way to for users to share some text, a URL , collections of data , photos , etc.
preview.
It can be styled and customized just like a button .

SAVE 10 % AND UNLOCK THE BOOK TODAY FOR ONLY $55 $ 49.50!
This is a pull - in view.

www.bigmountainstudio.com 225
 iOS 14

SignInWithAppleButton

SWIFTUI
HALSTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUl chapter is locked in this

Apple provides you with a

at you use in your app preview .Your users when it comes time to implementing signing
in with Apple.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $ 55 $ 49.50!
This is a push - out view .

www.bigmountainstudio.com 226
 Slider

When using a Slider view, the default range of values is 0.0 to 1.0 . You bind the Slider to a state variable , usually a number
type , like an Int . But it doesn't have to be a number type . It can be any type that conforms to the Stridable protocol .
( "Stride " means to " take steps in a direction ; usually long steps ". ) A type that conforms to Stridable ( such as an Int ) means it
has values that are continuous and can be stepped through and measured . ( " Step through ", " Stride ", I think you see the
connection now. )

You use the bound variable to set or get the value the Slider's thumb ( circle ) is currently at .

This is a pull - in view.

www.bigmountainstudio.com 227
 Slider

Introduction

struct Slider_Intro : View {

@State private var sliderValue = 0. Value used for the slider.

var body : some View {

VStack ( spacing : 40 ) {
Text ( " Slider " ) . font ( .largeTitle )
Text ( " Introduction " ) . foregroundColor ( .gray )
Text ( " Associate the Slider with an @State variable that will control where the thumb
( circle ) will be on the slider's track . " )
.frame ( maxWidth : .infinity ) .padding ( )
■ background ( Color.orange ) .foregroundColor ( Color.black )

Text ( " Default min value is 0.0 and max value is 1.0 " )

Slider ( value : $ sliderValue` Set the state variable in the slider's

.padding ( .horizontal ) initializer.

Text ( " Value is : ") +

Text ( "\ ( sliderValue ) " ) . foregroundColor ( .orange )

} .font ( .title )
}
}

0:00 LJ

www.bigmountainstudio.com 228
 Slider

Range of Values ( Minimum & Maximum )

struct Slider_RangeOfValues : View {

@State private var age = 18.0

let ageFormatter : NumberFormatter = {

let numFormatter = NumberFormatter ( ) Format the slider value into a
numFormatter.numberStyle = .spellOut spelled-out number.
return numFormatter
}()

var body : some View {

VStack ( spacing : 40 ) {
Text ( " Slider " ) . font ( .largeTitle )
Text ( " Range of Values " ) . foregroundColor ( .gray )
Text ( " You can also set your own min and max values . " )
.frame ( maxWidth : .infinity ) .padding ( )
.background ( Color.orange ) .foregroundColor ( Color.black )

Provide a range here.

Text ( " What is your age ? " |

Slider ( value : $ age , in : 1 ... 100 , step : 1)

.padding ( .horizontal ) The step parameter defines the
increment from one value to the next .
Text ( " Age is : ") +
Text ( " \ ( ageFormatter.string ( from : NSNumber ( value : age ) ) ! ) " )
foregroundColor ( .orange )
} .font ( .title )
0:00 LJ }
}

www.bigmountainstudio.com 229
 Slider

Customization

@State private var sliderValue = 0.5

12:34 ---
Text ( " At the time of this writing , there isn't a way to color the thumb . But we can change the
Slider
background color and apply some other modifiers . " )
---
Customization
Slider ( value : $ sliderValue )
.padding ( .horizontal , 10 )
At the time of this writing , there .background ( Color.orange )
isn't a way to color the thumb. .shadow ( color : .gray , radius : 2 )
.padding ( .horizontal )
But we can change the
background color and apply
Text ( " Use the accentColor modifier to change the color of the track . " )
some other modifiers .

Slider ( value : $ sliderValue )

.padding ( .horizontal )
.accentColor ( .orange )
Use the accentColor modifier to
change the color of the track.
Text ( " Using shapes and outlines . " )

Slider ( value : $ sliderValue )

■ padding ( 10 )
Using shapes and outlines.
■ background ( Capsule ( ) . stroke ( Color.orange , lineWidth : 2 ) )
.padding ( .horizontal )

Slider ( value : $ sliderValue )

.padding ( 10 )
.background ( Capsule ( ) . fill ( Color.orange ) )
.accentColor ( .black )
.padding ( .horizontal )

www.bigmountainstudio.com 230
 Slider

With Images

struct Slider_With Images : View {

4:15 @State private var sliderValue = 0.5

var body : some View {

VStack ( spacing : 20 ) {
HeaderView ( " Slider " ,
subtitle : " With Images " ,
desc : " Combine the slider with images or values . " ,
back : .orange , textColor : .black )
Slider
Slider ( value : $ sliderValue ,
With Images minimumValueLabel : Image ( systemName : " tortoise " ) ,
maximumValueLabel : Image ( systemName : " hare " ) , label : {})
Combine the slider with .foregroundColor ( .green )
.padding ( )
images or values .
Slider ( value : $ sliderValue ,
minimumValueLabel : Text ( " 0 " ) , Use minimum and
maximumValueLabel : Text ( " 1 " ) , label : {} maximum value labels
.padding ( )
to add text or images
VStack { to the ends of the
O 1 Slider ( value : $ sliderValue ) slider.
.accentColor ( .orange )
HStack {
Image ( systemName : " circle " )
Spacer ( )
Image ( systemName : " circle.righthalf.fill " )
Spacer ( )
Image ( systemName : " circle.fill " )
}
. foregroundColor ( .orange )
.padding ( .top , 8 )
} .padding ( )
} .font ( .title )
}
}

www.bigmountainstudio.com 231
 Slider

Tint iOS 15

struct Slider_Tint : View {

10:01
@State private var sliderValue = 0.5

var body : some View {

VStack ( spacing : 20 ) {

HeaderView ( " Slider " ,

subtitle : " Tint " ,

Slider desc : " Tint can also be used to change the color of the Slider's track . " )

Tint

Slider ( value : $ sliderValue ,

Tint can also be used to change
the color of the Slider's track. minimumValueLabel : Image ( systemName : " tortoise " ) ,

maximumValueLabel : Image ( systemName : " hare " ) , label : {})

foregroundColor ( .green )

.tint ( .orange

.padding ( )

.font ( .title )

www.bigmountainstudio.com 232
 Stepper

-+

When using a Stepper view, you bind it to a state variable , usually a number. But it doesn't have to be a number type . It can

be any type that conforms to the Stridable protocol . ( " Stride " means to " take steps in a direction ; usually long steps ". ) A

type that conforms to Stridable means it has values that are continuous and can be stepped through and measured . ( " Step

through ", " Stride ", I think you see the connection now. )

You use the bound variable to set or get the value it is currently at .

This is a horizontal push - out view. Vertically it is pull - in .

www.bigmountainstudio.com 233
 Stepper

-
+ Introduction

@State private var stepperValue = 1

9:26 @State private var values = [ 0 , 1 ]

VStack ( spacing : 20 ) {
Text ( " Stepper " )
font ( .largeTitle )
Text ( " Introduction " )
Stepper
.font ( .title ) .foregroundColor ( .gray )
Introduction Text ( " The Stepper can be bound to a variable like this : " )

The Stepper can be bound to a Stepper ( value : $ stepperValue ) {

variable like this : Text ( " Bound Stepper : \ ( stepperValue ) " )
} .padding ( .horizontal )
Bound Stepper: 1 + Divider ( )
Image ( systemName : " bolt.fill " )
font ( .title ) .foregroundColor ( .yellow)
Text ( " Or you can run code on the increment and decrement events : " )
Or you can run code on the .frame ( maxWidth : .infinity ) .padding ( )

increment and decrement ■ background ( Color.blue ) .foregroundColor ( Color.white )

.font ( .title )
events:
Stepper ( onIncrement : { self.values.append ( self.values.count ) } ,
onDecrement : { self.values.removeLast ( ) } ) {
onIncrement and onDecrement + Text ( " onIncrement and onDecrement " )
01 } .padding ( .horizontal )
HStack {
ForEach ( values , id : \ .self ) { value in
Image ( systemName : " \ ( value ) .circle.fill " )
}
} .font ( .title ) .foregroundColor ( .green )
}

www.bigmountainstudio.com 234
 Stepper

-
+ Label Options

struct Stepper_LabelsHidden : View {

6:57 @State private var stepperValue = 1

var body : some View {

VStack ( spacing : 20 ) {
Text ( " Stepper " ) . font ( .largeTitle )
Stepper Text ( " Label Options " ) . foregroundColor ( .gray )
Text ( " You can declare a stepper with just a string value for the label . " )
Label Options .frame ( maxWidth : .infinity ) .padding ( )
.background ( Color.blue ) .foregroundColor ( Color.white )
You can declare a stepper with Stepper ( " What is your age ? " , value : $ stepperValue )
.padding ( .horizontal )
just a string value for the label .
Text ( " You can omit a label too . Notice how the stepper view still pushes out
horizontally . " )
What is your age? + frame ( maxWidth : .infinity ) .padding ( )
.background ( Color.blue ) .foregroundColor ( Color.white )
Stepper ( " " , value : $ stepperValue )
You can omit a label too . Notice
.padding ( .horizontal )
how the stepper view still Text ( " If you hide the label then no space will be reserved for it . " )
pushes out horizontally. .frame ( maxWidth : .infinity ) .padding ( )
.background ( Color.blue ) .foregroundColor ( Color.white )
+ Stepper ( " What is your age ? " , value : $ stepperValue )
.padding ( .horizontal )
.labelsHidden ( )
If you hide the label then no } .font ( .title )
space will be reserved for it. }

Note: Even though the label/title is not shown , I would still recommend having one because it will still
be used for accessibility purposes .

www.bigmountainstudio.com 235
 Stepper

-
+
Range

@State private var stars = 0

12:47
VStack ( spacing : 20 ) {
Text ( " Stepper " )
.font ( .largeTitle )
.padding ( )
Text ( " Range of Values " )
.font ( .title )
. foregroundColor ( .gray )
Text ( " You can set a range for the stepper too . In this example , the range is between one and
five . " )

Stepper
Stepper ( value : $ stars , in : 1 ... 5 ) {
Text ( " Rating " )
Range of Values } .padding ( .horizontal )

HStack {
You can set a range for the ForEach ( 1 ... stars , id : \ .self ) { star in
stepper too . In this example, the Image ( systemName : " star.fill" )
}
range is between one and five. }
.font ( .title )
Rating + . foregroundColor ( .yellow )
}

When the Stepper reaches the range limits, the corresponding plus or minus button will appear as disabled . In
this screenshot, notice the plus button is disabled .

www.bigmountainstudio.com 236
 Stepper

-
+ Customization

@State private var contrast = 50

1:28
Text ( " A foreground and background color can be set . " )

Stepper ( onIncrement : { } , onDecrement : {}) {

Stepper
Text ( " Custom Stepper" )
.font ( .title )
Customization .padding ( .vertical )
}
.padding ( .horizontal )
A foreground and background .background ( Color.blue )
color can be set. .foregroundColor ( .white )

Text ( " Notice the minus and plus buttons are not affected . The platforms determine how this will
Custom Stepper +
be shown . " )

Notice the minus and plus

buttons are not affected . The Text ( " You can add images too . " )
.frame ( maxWidth : .infinity ) .padding ( )
platforms determine how this
.background ( Color.blue ) .foregroundColor ( Color.white )
will be shown .
.font ( .title )

You can add images too. Stepper ( value : $ contrast , in : 0 ... 100 ) {
// SwiftUI implicitly uses an HStack here
Image ( systemName : " circle.lefthalf.fill" )
D 50/100
+

Text ( " \ ( contrast ) / 100 " )

}
.font ( .title )
.padding ( .horizontal )
. foregroundColor ( .blue )

www.bigmountainstudio.com 237
 Stepper

-
+ Colors

Text ( " There is no built - in way to change the color of the stepper that I have found . Instead , I
9:39
had to hide the label and apply a color behind it . " )

Stepper Stepper ( value : $ contrast , in : 0 ... 100 ) {

Colors Text ( " Applying Tint Color ( no effect ) " )
}
There is no built- in way to .tint ( .blue )

change the color of the

HStack {
stepper that I have found .
Text ( " My Custom Colored Stepper " )
Instead , I had to hide the label
Spacer ()
and apply a color behind it . Stepper ( "" , value : $ contrast )
.background ( Color.teal , in : RoundedRectangle ( cornerRadius :
Default Color +
.labelsHidden ( ) // Hide the label
Applying Tint Color (no effect) + }
My Custom Colored Stepper
+

HStack {
My Custom Colored Stepper +
Text ( " My Custom Colored Stepper " )
My Custom Colored Stepper Spacer ()
My Custom Colored Stepper + Stepper ( " " , value : $ contrast )
.background ( Color.orange , in : Rounded Rectangle ( cornerRadius :
My Custom Colored Stepper .cornerRadius ( 9 )
My Custom Colored Stepper + .labelsHidden ( ) // Hide the label
}
Using RoundedRectangle:

www.bigmountainstudio.com 238
 TabView

The TabView acts like a container for child views within it. These child views are individual screens. It provides tab buttons
(TabItems) that allows the user to switch between these child views.

This is a push-out view.

www.bigmountainstudio.com 239
 TabView

Introduction

struct TabView_Intro : View {

9:22 var body : some View {
TabView {
// First Screen
VStack ( spacing : 20 ) {
HeaderView ( " TabView " ,
subtitle : " Introduction " ,
TabView
desc : " The TabView view can hold multiple views , one for each tab . " )
Introduction
Text ( " At the end of a view , you add .tabItem modifier to show a button that

The TabView view can hold allows navigation to that view . " )
.padding ( )
multiple views , one for each
tab. Image ( " TabItem " )

At the end of a view, you .tabItem {

add tabltem modifier to show // Creates a tab button in the tab bar
Text ( " Tab 1 " )
a button that allows
}
navigation to that view.
// Second Screen
Text ( " This view represents the Second Screen . " )
tabItem {
// Creates a tab button in the tab bar
Text ( " Tab 2 " )
}
}
Tab 1 Tab 2 .font ( .title )
}
}

www.bigmountainstudio.com 240
 TabView

Tabltems

struct TabView_TabItems : View {

10:38 var body : some View {
TabView {
TabOne ( )
tabItem {
Text ( " Tab Text " ) Can be just text .
}
Text ( " Phone Calls " )
.tabItem {
Image ( systemName : " phone " ). Or just an image .
}
Text ( " Outgoing Phone Calls " )
TabView tabItem {
Image ( systemName : " phone.arrow.up.right " ) Can use both .
Tab Items Text ( " Outgoing " ) Order doesn't matter.
}
Text ( " Messages " )
Tabltems can accept Text , .tabItem {
Label ( " Messages " , systemImage : " phone.and.waveform.fill " )
Image or both . Notice the }
order of Text and Image does }
} iOS 14
not matter for the tabltem .
}
You can even use a Label
struct TabOne : View { for the text and image .
var body : some View {
VStack ( spacing : 20 ) {
HeaderView ( " TabView" ,
subtitle : " Tab Items " ,
desc : " TabItems can accept Text , Image or both . Notice the order of Text
and Image does not matter for the tabItem . " )
.font ( .title )
}
}
TabText Outgoing Messages }

www.bigmountainstudio.com 241
 TabView

Too Many Tabs

TabView {
10:05 Text ( " Call Screen " ) . tabItem {
Image ( systemName : " phone " )
More Edit
Text ( " Call " )
History }
Text ( " Outgoing Phone Calls Screen " ) . tabItem {
New Image ( systemName : " phone.arrow.up.right " )
Text ( " Outgoing " )
}
Text ( " Incoming Phone Calls Screen " ) . tabItem {
Image ( systemName : " phone.arrow.down.left " )
Text ( " Incoming " )
}
Text ( " Phone Book Screen " ) . tabItem {
Image ( systemName : " book " )
Text ( " Phone Book" )
Additional tab
buttons show here . Text ( " History Screen " ) . tabItem {
Image ( systemName : " clock " )
Text ( " History" )
}
Text ( " New Phone Number " ) . tabItem {
Image ( systemName : " phone.badge.plus " )
Text ( " New " )
}
}

A When there are too many tabs to fit for the device , the More button is created where you can find
Call Outgoing Incoming Phone Book More the rest of the tabs listed out .

www.bigmountainstudio.com 242
 TabView

Navigation

struct TabView_Navigating : View {

10:16 @State private var selectedTab = 1 // Set which tab is active

var body : some View {

// Tell the TabView which variable to listen to for changes
TabView ( selection : $ selectedTab ) {
// Tab 1
VStack ( spacing : 20 ) {
TabView HeaderView ( " TabView ",
subtitle : " Navigation " ,
desc : " Add a unique tag value to each screen ( view ) you want to
Navigation
programmatically navigate to . You can then bind a variable to
the TabView's selection property and change that variable to
Add a unique tag value to navigate . " )
each screen (view) you want Button ( " Go to Tab 2 " ) { Change the state property bound to the TabView's
selectedTab = 2 selection parameter to navigate to a different tab.
to programmatically navigate
to. You can then bind a
.tabItem {
variable to the TabView's Image ( systemName : " star.fill " )
} Add tags to enable programmatically
selection property and
.tag ( 1 )
change that variable to navigating to tabs .
// Tab 2
navigate .
VStack {
Text ( " Second Screen " )
Go to Tab 2 }
.tabItem {
Image ( systemName : " moon.fill " )
}
.tag (2 )
}
.font ( .title )
}
}

www.bigmountainstudio.com 243
 TabView

Colors

struct TabView_Colors : View {

10:21 var body : some View {
TabView {
// Tab 1
VStack ( spacing : 20 ) {
HeaderView ( " TabView " ,
subtitle : " Tab Item Colors " ,
desc : " Set the color of the active tab item by setting the tint
color for the TabView . " )

TabView Image ( " AccentColor" )

}
Tab Item Colors
.tabItem {
Image ( systemName : " star.fill " )
Set the color of the active tab }
item by setting the accent // Tab 2
color for the TabView. Text ( " Second Screen " )
.tabItem {
Image ( systemName : " moon.fill " Notice that I am setting the foreground style
} of the second tabltem to red . This will have
. foregroundStyle ( Color.red no effect on the color of the tab item . The
// Tab 3 background modifier will not work either.
Text ( " Third Screen " )
tabItem {
Image ( systemName : " sun.min.fill " )
}
}
.font ( .title )
.tint ( .yellow )- Use tint to change the color of the active tab .
}
}

www.bigmountainstudio.com 244
 TabView

iOS 15
Symbol Variations

struct TabView_SymbolVariants : View {

10:24 var body : some View {
TabView {
VStack ( spacing : 20.0 ) {
HeaderView ( " TabView " ,
TabView subtitle : " Symbol Variants " ,
desc : " The platform will change the SF symbol you are using to filled
Symbol Variants or not filled depending on the context . \ nFor example , in iOS
it will use filled versions of the symbols you choose for
TabViews . " )
The platform will change the
SF symbol you are using to Text ( " Original SF Symbols : " )
Image ( systemName : " star " )
filled or not filled depending
Image ( systemName : " moon " )
on the context .
Image ( systemName : " sun.min " )
For example , in iOS it will use
} .tabItem { The original SF Symbols are just
filled versions of the symbols
Image ( systemName : " star " ) outlines .
you choose for TabViews .
Text ( " Home " ) But the TabView uses the filled
} variations of the same symbol .
Text ( " Second Screen " ) . tabItem {
Original SF Symbols :
Image ( systemName : " moon " )
Text ( " Night " )
}
Text ( " Third Screen " ) . tabItem {
Image ( systemName : " sun.min " )
Text ( " Day " )
}
}
font ( .title )
}
Home Night Day }

www.bigmountainstudio.com 245
 TabView

iOS 15
Badge

struct TabView_Badge : View {

10:33
var body : some View {
TabView {
// Tab 1
VStack ( spacing : 20.0 ) {
HeaderView ( " TabView " ,
subtitle : " Badge " ,
desc : " Use the badge modifier to add a number to the tab item . " )

}
TabView .tabItem {
Image ( systemName : " house " )
Badge
Text ( " Home " )
}
Use the badge modifier to
// Tab 2
add a number to the tab item .
VStack {
Text ( " Messages " )
}
.tabItem {
Image ( systemName : " envelope " )
Text ( " Messages " )
} Note : The operating system will set
.badge ( 15 ) the color of the badge .

15 } There isn't a way to change the color.

Home Messages .font ( .title )
}
}

www.bigmountainstudio.com 246
 TabView

iOS 15
Background

struct TabView_Background : View {

10:57 var body : some View {
TabView {
TabView VStack ( spacing : 20.0 ) {
HeaderView ( " TabView" ,
Background subtitle : " Background " ,
desc : " The new background modifier allows you to have backgrounds
When you have a ShapeStyle that ignore safe area edges , such as the TabView safe area
edge . " )
(color, material , gradient, etc.)
Spacer ( )
touching the border of the tab Divider ( ) In this example, the thin material
view, the tab view will pull it .background ( .ultraThinMaterial
blur is touching the tab view safe
}
into its space . area and by default it will ignore
.tabItem {
Image ( systemName : " house " ) all safe area edges .
Text ( " Home " )
}

VStack {
Text ( " Messages " )
Spacer ( )
Divider ( ) Using this modifier allows you to
.background ( Color.brown.opacity ( 0 . provide different backgrounds
} per tab view if you wanted .
.tabItem {
Image ( systemName : " envelope " )
Text ( " Messages " )
}
}
font ( .title )
}
Home Messages } Home Messages

www.bigmountainstudio.com 247
 TabView

Prevent Background iOS 15

struct TabView_PreventBackground : View {

2:26 var body : some View {
TabView {
TabView VStack ( spacing : 20.0 ) {
HeaderView ( " TabView " ,
Prevent Background subtitle : " Prevent Background " ,
desc : " To prevent your background from ignoring the tab view safe
area edge , define a different edge or use .init ( ) . " )
To prevent your background Spacer ()
Button ( action : { } ) {
from ignoring the tab view
Text ( " Take Action " )
safe area edge , define a . foregroundStyle ( .white ) Remember, backgrounds will
.padding ( )
different edge or use .init () . ignore all safe area edges by
.background ( Color.green )
default ( iOS 15) .
}
}
.tabItem {
Image ( systemName : " house " )
}
To prevent this , explicitly specify
VStack { a different safe area edge to
Text ( " Messages " ) ignore.
Spacer ()
Button ( action : { } ) {
Text ( " Take Action " )
. foregroundStyle ( .white )
.padding ( )
.background ( Color.green , ignoresSafeAreaEdges : .top )
}
}
.tabItem {
Take Action Image ( systemName : " envelope " )
} Take Action
}
.font ( .title )
}
}

www.bigmountainstudio.com 248
 TabView

UITabBarAppearance iOS 15

struct TabView_UITabBarAppearance : View {

11:14 var body : some View {
TabView {
VStack ( spacing : 20.0 ) {
HeaderView ( " TabView" ,
subtitle : " UITabBarAppearance " ,
desc : " Use UITabBarAppearance to apply a style/ color on ALL tabs . " )
}
.tabItem {
Image ( systemName : " house " )
Text ( " Home " )
You can set just the effect or just
TabView }
the color if you want or combine
UITabBarAppearance them like you see here.
VStack {
Text ( " Messages " )
Use UITabBarAppearance to }
apply a style/color on ALL .tabItem {
Image ( systemName : " envelope " ) The standardAppearance is used
tabs .
Text ( " Messages " ) when you have a ScrollView and
} items are scrolling behind the
} Tabview .
font ( .title )
.onAppear {
let appearance = UITabBarAppearance ( )
appearance.background Effect = UIBlur Effect ( style : .systemUltraThinMaterial )
appearance.backgroundColor = UIColor ( Color.green.opacity ( 0.2 ) )
UITabBar.appearance ( ) . standardAppearance = appearan
UITabBar.appearance ( ) . scrollEdgeAppearance = appearance
Home Messages }
}
}

www.bigmountainstudio.com 249
 iOS 14

TabView - Paging Style

SWIFTUI
HALSTERY Visual ReferenceGuide

Swift VISUAL TIME-SAVING REFERENCE

Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
ry SwiftUl Views ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery

This SwiftUI chapter is locked in this

With the existing TabView,

ow offers a new style preview. allows the views within a TabView to be able to be
swiped horizontally and " snap to place when the view enters the screen .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $ 49.50!
This is a push - out view .

www.bigmountainstudio.com 250
 Text

Text

The text view will probably be one of your most - used views . It has many, if not the most , modifiers available to it .

This is a pull- in view.

www.bigmountainstudio.com 251
 Text

Text Line Limit Text

VStack ( spacing : 20 ) {
6:19 Text ( " Text " )
font ( .largeTitle )

Text (" Line Limit " )

.font ( .title )
. foregroundColor ( .gray )

Text Image ( " LineLimit " )

Line Limit
Text ( " The Text view shows read - only text that can be modified in many ways . It wraps
automatically . If you want to limit the text wrapping , add .lineLimit ( < number of lines here > ) . " )

The Text view shows read-only

Text ( " Here , I am limiting the text to just one line . " )
text that can be modified in .lineLimit ( 1 )
many ways . It wraps .font ( .title )
automatically. If you want to .padding ( .horizontal )
limit the text wrapping , }
add.lineLimit ( < number of lines
here >).

Here, I am limiting the text to j ...

iPhone XR- 13.0

www.bigmountainstudio.com 252
 Text

Text Text Styles Text

struct Text_TextStyles : View {

10:39 .... var body : some View {
VStack ( spacing : 10 ) {
Image ( " Font " )

HeaderView ( " Text " ,

F
subtitle : " Text Styles " ,
Text desc : " You can add a TextStyle to the Text view by using the .font
modifier . " ,
Text Styles back : green , textColor : .white )
.font ( .title )
You can add a TextStyle to the
Text view by using the .font
modifier. Group {
Text ( " Font.largeTitle " ) . font ( .largeTitle )
Font.largeTitle Text ( " Font.title " ) . font ( .title )
Text ( " Font.title2 ( iOS 14 ) " ) . font ( .titl
Font.title iOS 14
Text ( " Font.title3 ( iOS 14 ) " ) . font ( .titl
Font.title2 (iOS 14) }
Font.title3 (iOS 14) Group {
Font.headline Text ( " Font.headline " ) . font ( .headline )
Font.body Text ( " Font.body " ) . font ( .body )
Font.callout Text ( " Font.callout " ) . font ( .callout )
Font.subheadline Text ( " Font.subheadline " ) . font ( .subheadline )
Font.footnote
Text ( " Font.footnote " ) . font ( .footnote )
Font.caption
Font.caption2 (iOS 14) Text ( " Font.caption " ) . font ( .caption )
Text ( " Font.caption2 ( iOS 14 ) " ) . font ( .captio iOS 14
}
}
}
}

www.bigmountainstudio.com 253
 Text

Text Text
Weights

Text ( " Text " )

6:35 .font ( .largeTitle )
Text ( " Font Weights " )
.font ( .title )
Text
. foregroundColor ( .gray )
Image ( " FontWeight " )
Font Weights Text ( " You can apply a variety of font weights to the Text view . " )
.padding ( )
W .frame ( maxWidth : .infinity )
.background ( Color.green )
. foregroundColor ( .white )
You can apply a variety of font
.font ( .title )
weights to the Text view .

Group { // Too many views ( > 10 ) in one container

Ultralight Text ( " Ultralight " )
.fontWeight ( .ultraLight )
Thin Text ( " Thin " )
.fontWeight ( .thin )
Light Text ( " Light " )
.fontWeight ( .light ) Note: The fontWeight modifier can ONLY be
Regular Text ( " Regular " ) applied to Text views.
.fontWeight ( .regular )
Medium Text ( " Medium " )
.fontWeight ( .medium ) Unlike the font modifier which can be applied
Semibold Text ( " Semibold " ) to any view.
.fontWeight ( .semibold )
Bold Text ( " Bold ")
To apply weight to any view using the font
.fontWeight ( .bold )
Heavy Text ( " Heavy " ) modifier, see next page .
.fontWeight ( .heavy )
Black
Text ( " Black " )
.fontWeight ( .black )
} .font ( .title )

www.bigmountainstudio.com 254
 Text

Text Text
Weight & Text Style Combined

struct Text_Weights_TextStyles : View {

11:54 .... var body : some View {
return VStack ( spacing : 20 ) {
HStack {
Image ( " FontWeight " )
Image ( systemName : " plus " )
Image ( " Font " )
}
W + F

HeaderView ( " Text " , subtitle : " Weight & Text Styles " ,
Text
desc : " These weights can be combined with Text Styles . " ,
Weight & Text Styles back : green , textColor : white )
.font ( .title )
These weights can be combined
Text ( " Ultralight - Title " )
with Text Styles.
.fontWeight ( .ultraLight )
.font ( .title )
Ultralight - Title Text ( " Thin - Body" )
Thin - Body .fontWeight ( .thin )
.font ( .body ) Note: Instead of two modifiers , you
—
Light Large Title Text ( " Light - Large Title " ) can combine text style and weight in
Bold - Callout fontWeight ( .light ) just ONE modifier like this .
.font ( .largeTitle )
Black - Title Text ( " Bold - Callout " )
· fontWeight ( .bold )
.font ( .callout )
Text ( " Black - Title " )
.font ( Font.title.weight ( .black )
}
}
}

www.bigmountainstudio.com 255
 Text

Text Text
Font Design

struct Text_FontDesign : View {

6:52 var body : some View {
VStack ( spacing : 10 ) {
HeaderView ( " Text " , subtitle : " Font Design " , desc : " There are 4 font designs now in
Text
iOS . Use Font.system to set the font design you want . " ,
Font Design back : green , textColor : white )

Text ( " Default font design " )

There are 4 font designs now in
.font ( Font.system ( size : 30 , design : Font.Design.default ) )
iOS . Use Font.system to set the
font design you want .
// You can remove the " Font.Design " of the enum
Text ( " Here is monospaced " )
Default font design Set the design
.font ( .system ( size : 30 , design : .monospaced
with a hard-
Here is monospaced Text ( " And there is rounded " ) coded size or
.font ( .system ( .title , design : .rounded ) , use a text
And there is rounded
style.
Text ( " Finally , we have serif ! " )
Finally, we have serif!
.font ( .system ( .title , design : .serif ) )

A " serif" is a little piece that DescView ( desc : " A \ " serif\ " is a little piece that comes off the letter . " ,
comes off the letter.
back : .green , textColor : .white )

Image ( " Serif " )

}
F
.font ( .title )

www.bigmountainstudio.com 256
 Text

Text Text
Formatting

@State private var modifierActive = true

7:08
HStack {
Image ( " Bold " )
Text ( " Bold " ) . bold ( )
Text
}
HStack {
Formatting Image ( " Italic " )
Text ( " Italic " ) . italic ( )
More modifiers for Text . Some }
HStack {
have a parameter that can listen
Image ( " Strikethrough " )
to a @State var to know if they Text ( " Strikethrough " ) . strikethrough ( )
should be active or not. }
HStack {
Image ( " Strikethrough " )
B Bold
Text ( " Green Strikethrough " )
Italic .strikethrough ( modifierActive , color : green )
}
HStack {
S Strikethrough
Image ( " ForegroundColor " )
S Green Strikethrough Text ( " Text Color ( ForegroundColor ) " ) . foregroundColor ( .green )
}
Text Color (ForegroundColor) HStack {
Image ( " Underline " )
U Underline Text ( " Underline " ) . underline ( )
}
U Green Underline HStack {
Image ( " Underline " )
Modifiers Active
Text ( " Green Underline " ) . underline ( modifierActive , color : green )
}

Toggle ( " Modifiers Active " , is0n : $ modifierActive )

www.bigmountainstudio.com 257
 Text

Text Allows Tightening Text

VStack ( spacing : 20 ) {
7:14

Image ( " Allows Tightening " )

Text ( " You might want to tighten up some text that might be too long . " )

Text
Text ( " In the example below , the green has .allowTightening ( true ) " )
Allows Tightening

Tight
Group {
Text ( " Allows tightening to allow text to fit in one line . " )
You might want to tighten up . foregroundColor ( .red )
some text that might be too .allows Tightening ( false )
long. .padding ( .horizontal )
.lineLimit ( 1 )

In the example below, the green Text ( " Allows tightening to allow text to fit in one line . " )
has.allowTightening (true) : . foregroundColor ( .green )
.allowsTightening ( true )
Allows tightening to allow text to fit in one li...
.padding ( .horizontal )
Allows tightening to allow text to fit in one line. .lineLimit ( 1 )
} .padding ( .horizontal )
}

Allows Tightening can be helpful when you see the last word getting truncated . Applying it may not even
fully work depending on just how much space can be tightened . With the default font , I notice I can get
a couple of characters worth of space to tighten up .

www.bigmountainstudio.com 258
 Text

Text Minimum Scale Factor Text

struct Text_MinimumScaleFactor : View {

((
9:28 var body : some View {
VStack ( spacing : 20 ) {
HeaderView ( " Text " ,
subtitle : " Minimum Scale Factor " ,
desc : " You can shrink text to a minimum percentage of its original font
size with this modifier . " ,
back : .green , textColor : .white )

Text Group {
Text ( " This text is set to a minimum scale factor of 0.6 . " )
Minimum Scale Factor .lineLimit ( 1 )
.minimumScaleFactor ( 0.6 )
You can shrink text to a Text ( " This text is set to a minimum scale factor of 0.7 . " )
.lineLimit ( 1 )
minimum percentage of its
.minimumScaleFactor ( 0.7 )
original font size with this Text ( " This text is set to a minimum scale factor of 0.8 . " )
modifier. .lineLimit ( 1 )
.minimumScaleFactor ( 0.8 )
This text is set to a minimum scale factor of 0.6. Text ( " This text is set to a minimum scale factor of 0.9 . " )
.lineLimit ( 1 )
This text is set to a... m scale factor of 0.7. .minimumScaleFactor ( 0.9 )
}
This text is set to ...scale factor of 0.8. .truncationMode ( .middle )
.padding ( .horizontal )
This text is set ...ale factor of 0.9. }
.font ( .title )
}
}

.minimumScaleFactor takes a fraction from 0 to 1. For example , 0.3 is 30% of the original size of the font
that it can shrink . If the font size is 100, then it can shrink to 30.

www.bigmountainstudio.com 259
 Text

Text Text
Line Spacing

VStack ( spacing : 10 ) {
7:25 Text ( " Text " ) . font ( .largeTitle )
Text ( " Line Spacing " ) . font ( .title ) .foregroundColor ( .gray )
Text
Image ( " LineSpacing " )
Line Spacing
Text ( " You can use line spacing to add more space between lines of text . This text has no
line spacing applied : " )
.font ( .title )
You can use line spacing to add .frame ( maxWidth : .infinity )
more space between lines of .padding ( )
text . This text has no line .background ( Color.green )
spacing applied : . foregroundColor ( Color.white )

SwiftUl offers a Line Spacing Text ( " SwiftUI offers a Line Spacing modifier for situations where you want to increase the
modifier for situations where you space between the lines of text on the screen . " )
want to increase the space .font ( .title )

between the lines of text on the

Text ( " With Line Spacing of 16 : " )
screen.
.font ( .title )
.frame ( maxWidth : .infinity )
With Line Spacing of 16:
.padding ( )
.background ( Color.green )
SwiftUl offers a Line Spacing
. foregroundColor ( Color.white )
modifier for situations where you
Text ( " SwiftUI offers a Line Spacing modifier for situations where you want to increase the
want to increase the space space between the lines of text on the screen . " )
between the lines of text on the .lineSpacing ( 16.0 ) // Add spacing between lines
.font ( .title )
screen . }

www.bigmountainstudio.com 260
 Text

Text Text
Alignment

VStack ( spacing : 20 ) {
7:29 Text ( " Text " ) . font ( .largeTitle )
Text ( " Multiline Text Alignment " ) . foregroundColor ( .gray )
Text Image ( " MultilineTextAlignment " )
Text ( " By default , text will be centered within the screen . But when it wraps to multiple
Multiline Text Alignment
lines , it will be leading aligned by default . Use multilineTextAlignment modifier to change
this ! " )

By default, text will be centered Text ( " . multilineTextAlignment ( .center ) " )

within the screen . But when it .frame ( maxWidth : .infinity )
wraps to multiple lines , it will be .padding ()
. foregroundColor ( .white )
leading aligned by default . Use
.background ( Color.green )
multilineTextAlignment modifier
to change this!
Text ( " Have I told you how awesome I think you are ? " )
.multilineTextAlignment ( .center ) // Center align
.padding ( .horizontal )
.multilineTextAlignment ( .center)

Text ( " . multilineTextAlignment ( .trailing ) " )

Have I told you how awesome I .frame ( maxWidth : .infinity )
think you are? .padding ( )
. foregroundColor ( .white )
.multilineTextAlignment ( .trailing ) .background ( Color.green )
.allows Tightening ( true ) // Prevent truncation

You are SUPER awesome for

Text ( " You are SUPER awesome for improving your skills by using this book ! " )
improving your skills by using
.multilineTextAlignment ( .trailing ) // Trailing align
this book! .padding ( .horizontal )
}
.font ( .title ) // Apply this text style to all text views

www.bigmountainstudio.com 261
 Text

Text Truncation Mode Text

VStack ( spacing : 20 ) {
11:06 Text ( " Text " ) . font ( .largeTitle )
Text ( " Truncation Mode " ) . font ( .title ) .foregroundColor ( .gray )
Image ( " TruncationMode " )
Text ( " When text gets truncated , you can control where the ellipsis ( ... ) shows . " )
Text
.frame ( maxWidth : .infinity ) .padding ( )
. foregroundColor ( .white ) .background ( Color.green )
Truncation Mode
.font ( .title )
Text ( " Default : .truncationMode ( .tail ) " )
frame ( maxWidth : .infinity ) .padding ( )
. foregroundColor ( .white ) .background ( Color.green )
When text gets truncated , you .font ( .title )
can control where the ellipsis // Text automatically defaults at end
Text ( " This will be the best day of your life ! " )
(...) shows.
· padding ( .horizontal )
· lineLimit ( 1 )
Text ( " . truncationMode ( .middle ) " )
Default: .truncationMode ( .tail)
.frame ( maxWidth : .infinity ) .padding ( )
. foregroundColor ( .white ) .background ( Color.green )
This will be the best day of yo ... Text ( " This will be the best day of your life ! " )
.truncationMode ( .middle ) // Truncate in middle
.truncationMode ( .middle) .padding ( .horizontal )
.lineLimit ( 1 )
Text ( " . truncationMode ( .head ) " )
This will be the...day of your life! .frame ( maxWidth : .infinity ) .padding ( )
foregroundColor ( .white ) .background ( Color.green )
.truncationMode ( .head) Text ( " This will be the best day of your life ! " )
.truncationMode ( .head ) // Truncate at beginning
.padding ( .horizontal )
...ill be the best day of your life ! lineLimit ( 1 )
}
.font ( .title )

www.bigmountainstudio.com 262
 Text

Text Text
Combining Modified Text

Group {
7:45 Text ( " You can " )
+ Text ( " format " ) . bold ( )
+ Text ( " different parts of your text by using the plus ( + ) symbol . " )
}

Text Group {
Text ( " Here is another " )
Combining Text Views + Text ( " example " ) . foregroundColor ( .red ) .underline ( )
+ Text ( " of how you might accomplish this . " )
Text + Text + Text ( " Notice " ) . foregroundColor ( .purple ) .bold ( )
+ Text ( " the use of the Group view to add padding and line limit to all the text " )
+ Text ( " as a whole . " ) . bold ( ) . italic ( )
You can format different parts
}
of your text by using the plus .font ( .title )
( + ) symbol . .padding ( .horizontal )

Here is another example of how Group {

you might accomplish this . Text ( " You can also " ) .font ( .title ) .fontWeight ( .light )
Notice the use of the Group + Text ( " combine " )

view to add padding and line + Text ( " different font weights " ) .fontWeight ( .black )
limit to all the text as a whole. + Text ( " and different text styles ! " ) . font ( .title ) .fontWeight ( .ultraLight )
}
You can also combine different font .padding ( .horizontal )

weights and different text styles!

Although you see I'm wrapping my Text views in a Group , it is not required . I only do this so I can apply common
modifiers to everything within the Group . See section on the Group view for more information .

www.bigmountainstudio.com 263
 Text

Text Baseline Offset Text

struct Text_Baseline0ffset : View {

10:53 var body : some View {
VStack ( spacing : 20 ) {
Image ( " BaselineOffset " )
HeaderView ( " Text " ,
subtitle : " Baseline Offset " ,
a
desc : " By default , your combined text will be on the same baseline , like
this : " , back : .green , textColor : white )
Text .font ( .title )
.layoutPriority ( 1 )
Baseline Offset
Text ( " 100 " )
+ Text ( " SWIFTUI " ) .font ( .largeTitle ) .fontWeight ( .light )
By default , your combined text
. foregroundColor ( .blue )
will be on the same baseline, + Text ( " VIEWS " )
like this:
DescView ( desc : " But you can offset each text view to create a cooler effect , like
this : " , back : .green , textColor : .white )
100 SWIFTUI VIEWS .font ( .title )

But you can offset each text Group {

Text ( " 100 " ) . bold ( )
view to create a cooler effect , + Text ( " SWIFTUI " )
like this:
.font ( Font.system ( size : 60 ) )
.fontWeight ( .ultraLight )
. foregroundColor ( .blue )
100 SWIFT .baselineOffset ( -12 ) // Negative numbers make it go down
UI VIEWS + Text ( " VIEWS " ) . bold ( )
}
}
}
}

www.bigmountainstudio.com 264
 Text

Text Text
Layout Priority

Text ( " Text " )

8:09 font ( .largeTitle )
Text ( " Layout Priority" )
.font ( .title )
. foregroundColor ( .gray )
Text
Image ( " LayoutPriority " )
Layout Priority
Text ( " Layout priority controls which view will get truncated last . The higher the priority , the
1 last it is in line to get truncated . " )
font ( .title )
. foregroundColor ( .white )
Layout priority controls which .frame ( maxWidth : .infinity )
view will get truncated last . The .padding ( )
higher the priority, the last it is .background ( Color.green )
.layoutPriority ( 2 ) // Highest priority to get the space it needs
in line to get truncated .

Text ( " This text gets truncated first because it has no priority . " )
.font ( .title )
This text gets truncated first b ... . foregroundColor ( .white )
.frame ( maxWidth : .infinity )
.padding ( )
The text view above got
.background ( Color.pink )
truncated because its layout
priority is zero (the default) . Text ( " The text view above got truncated because its layout priority is zero ( the default ) . This
This text view has a priority of 1 . text view has a priority of 1. The text view on top has a priority of 2. " )
.font ( .title )
The text view on top has a
. foregroundColor ( .white )
priority of 2 . .frame ( maxWidth : .infinity )
.padding ( )
.background ( Color.green )
.layoutPriority ( 1 ) // Next highest priority

www.bigmountainstudio.com 265
 Text

Text Custom Fonts Text

struct Text_CustomFont : View {

1:20 var body : some View {
VStack ( spacing : 10 ) {
HeaderView ( " Text " ,
Text subtitle : " Custom Fonts " ,
desc : " Use a font that already exists on the system . If the font name
Custom Fonts doesn't exist , it goes back to the default font . " , back : .green , textColor : white )

Text ( " This font doesn't exist " )

Use a font that already exists on
font ( Font.custom ( " No Such Font " , size : 26 ) )
the system . If the font name
doesn't exist, it goes back to DescView ( desc : " Existing fonts : " , back : .green , textColor : .white )
the default font. Text ( " Avenir Next " )
· font ( Font.custom ( " Avenir Next " , size : 26 ) )
This font doesn't exist
Text ( " Gill Sans " )
Existing fonts: .font ( Font.custom ( " Gill Sans " , size : 26 ) )

Text ( " Helvetica Neue " )

Avenir Next
.font ( Font.custom ( " Helvetica Neue " , size : 26 ) )
Gill Sans
DescView ( desc : " Adjust the weight : " , back : .green , textColor : .white )
Helvetica Neue
Text ( " Avenir Next Regular " )
Adjust the weight : font ( Font.custom ( " Avenir Next Bold " , size : 26 ) )

Text ( " Or change with the weight modifier : " )

Avenir Next Regular
. foregroundColor ( .red )
Or change with the weight
Text ( " Avenir Next Bold Weight " )
modifier: font ( Font.custom ( " Avenir Next " , size : 26 ) .weight ( .bold ) )
}
Avenir Next Bold Weight
.font ( .title )
.ignoresSafeArea ( edges : .bottom )
}
}

www.bigmountainstudio.com 266
 Text

Text Text
Imported Fonts

struct Text_CustomFont : View {

8:13 var body : some View {
VStack ( spacing : 20 ) {
Text ( " Text " )
font ( .largeTitle )

Text ( " Imported Fonts " )

.font ( .title )
.foregroundColor ( .gray )

Text Text ( " Use the Font.custom ( ) function to set imported fonts you added to your
project . " )
Imported Fonts ---

Use the Font.custom () function Text ( " Hello , World ! " )

to set imported fonts you added .font ( Font.custom ( " Nightcall " , size : 60 ) )
.padding ( .top )
to your project .
}
}
}
Hello, World!

In order for this to work , you have to add the font file to your project and be sure to have the font file
target your project . Then you need to add the font file name to the Info.plist under the " Fonts provided
by application " key :

► Supported interface orientations (i ... ↑ Array (4 items)

▼ Fonts provided by application Array (1 item)

Item O String Nightcall.ttf

www.bigmountainstudio.com 267
 Text

Text Custom Font Size & RelativeTo iOS 14 iOS 15 iOS 16 xt

struct Text_CustomFontSize_RelativeTo : View {

SWIFTUI
12:53 @ScaledMetric private var fontSize : CGFloat = 40 12:53
Visual ReferenceGuide
me View
9: VISUAL TIME-SAVING REFERENCE
Swif Text
tUl Views w ("!
de
SwiftUl Views
ba RelativeTo
Text

VIEWS
Lo ,
RelativeTo (.cu
You can
VISUALTIME-SAVING REFERENCE
You can control how custom SwiftUl Views ry
y control how ...
Master tain io VIFTUI DEVELOPERS Big Mountain Studio
or imported fonts scale by BigMoun Stud
using the relat ns
MarkMoeyke ont ( .title ) Mastery
parameter.
Hello, World !

Hell
This SwiftUl content is locked in this preview.

Unlock over 20 more pages of what you can do with the Text Hello

Hint: If view in the full version of the book.e, it will

scale LESS . That is why the first Text view scale is smaller.
World!

SAVE 10 % AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50 !

www.bigmountainstudio.com 268
 iOS 14

TextEditor

SWIFTUI
MASTERY Visual ReferenceGuide
VISUAL TIME-SAVING REFERENCE
Swift
Ul Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
ry
Maste g untain dio VIFTUIDEVELOPERS BigMountainStudio
Bi Mo Stu
Mark Moeykens Mastery
OD

This SwiftUI chapter is locked in this

preview.
You can use the TextEditor to provide text input from users that goes beyond just one line .

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $ 55 $ 49.50!
This is a push - out view .

www.bigmountainstudio.com 269
 TextField

Text

In order to get or set the text in a TextField , you need to bind it to a variable . This variable is passed into the TextField's

initializer. Then , all you need to do is change this bound variable's text to change what is in the TextField . Or read the bound

variable's value to see what text is currently in the TextField .

This is a push - out horizontally view.

www.bigmountainstudio.com 270
 TextField

Text Text
Introduction

struct TextField_Intro : View {

((
1:33 ||||
@State private var textFieldData =

var body : some View {

TextField
VStack ( spacing : 10 ) {
Introduction HeaderView ( " TextField " , subtitle : " Introduction " ,
desc : " It is required to bind text fields to a variable when using them
It is required to bind text fields
so you can get / set the text . \ nBy default , TextFields have a plain
to a variable when using them
TextFieldStyle that has no visual content to be seen . ” ,
so you can get/set the text.
back : .orange )
By default, TextFields have a
Image ( systemName : " arrow.down.circle " )
plain TextFieldStyle that has
TextField ( " This is a text field " , text : $ textFieldData )
no visual content to be seen .
.padding ( .horizontal )
Image ( systemName : " arrow.up.circle " )

This is a text field

Text ( " Use .textFieldStyle ( .roundedBorder ) to show a border . " )
↑)
.frame ( maxWidth : .infinity ) .padding ( )

Use .textFieldStyle .background ( Color.orange )

(.roundedBorder) to show a TextField ( "' " , text : $ textFieldData )

border. .textFieldStyle ( .roundedBorder )
.padding ( .horizontal ) For textFieldStyle , use:
}
< iOS 15 RoundedBorderTextFieldStyle ( )
.font ( .title )
} iOS 15+ roundedBorder
}

www.bigmountainstudio.com 271
 TextField

Text Text
Title ( Placeholder or Hint Text)

struct TextField_Placeholder : View {

||||
3:14 @State private var textFieldData =
|| ||
@State private var username
||||
@State private var password =

var body : some View {

VStack ( spacing : 20 ) {
Text ( " TextField " )
.font ( .largeTitle )
TextField
Text ( " Title Text ( Placeholder or Hint ) " )
Title Text (Placeholder or Hint) . foregroundColor ( .gray )

You can supply title text Text ( " You can supply title text ( placeholder / hint text ) through the first parameter
to let the user know the purpose of the text field . " )
(placeholder/hint text) through .frame ( maxWidth : .infinity ) .padding ( )
the first parameter to let the .background ( Color.orange )
user know the purpose of the
text field . Group {
TextField ( " Here is title text " , text : $ textFieldData )
textFieldStyle ( .roundedBorder )
Here is title text

User name TextField ( " User name " , text : $ username )

.textFieldStyle ( .roundedBorder )
Password
TextField ( " Password " , text : $ password )
.textFieldStyle ( .roundedBorder )
}
.padding ( .horizontal )
} .font ( .title )
}
}

www.bigmountainstudio.com 272
 TextField

Text Text
Text Alignment

struct TextField_Alignment : View {

12:03 @State private var textFieldDatal = " Leading "
@State private var textFieldData2 = " Center "
@State private var textFieldData3 = " Trailing "

var body : some View {

VStack ( spacing : 20 ) {
Text ( " TextField " ) . font ( .largeTitle )
TextField Text ( " Text Alignment " ) . foregroundColor ( .gray )
Text ( " Change the alignment of text within your textfield by using the
Text Alignment multilineTextAlignment modifier . " )
.frame ( maxWidth : .infinity ) .padding ( )
.background ( Color.orange )
Change the alignment of text
within your textfield by using
Group {
the multilineTextAlignment
TextField ( " Leading " , text : $ textFieldData1 )
modifier.
.textFieldStyle ( .roundedBorder )
.multilineTextAlignment ( .leading ) // Default
Leading
TextField ( " Center " , text : $ textFieldData2 )
Center .textFieldStyle ( .roundedBorder )
.multilineTextAlignment ( .center )
Trailing
TextField ( " Trailing " , text : $ textFieldData3 )
.textFieldStyle ( .roundedBorder )
.multilineTextAlignment ( .trailing )
}
.padding ( .horizontal )
} .font ( .title )
}
}

www.bigmountainstudio.com 273
 TextField

Text Text
Text Size and Fonts

struct TextField_FontSize : View {

||||
8:20 @State private var textFieldData =

var body : some View {

VStack ( spacing : 20 ) {
TextField Text ( " TextField " ) . font ( .largeTitle )
Text ( " With Text Modifiers " ) . foregroundColor ( .gray )
With Text Modifiers Image ( " Font " )
Text ( " To change the size of the font used within the TextField , you just need to use
F the font modifier . " )
.frame ( maxWidth : .infinity )
.padding ( )
To change the size of the font .background ( Color.orange )
used within the TextField , you Group {
just need to use the font TextField ( " first name " , text : $ textFieldData )
.textFieldStyle ( .roundedBorder )
modifier.

TextField ( " first name " , text : $ textFieldData )

first name .font ( Font.system ( size : 36 , design : .monospaced ) )
.textFieldStyle ( .roundedBorder )
first name
TextField ( " first name " , text : $ textFieldData )
.font ( Font.system ( size : 20 , design : Font.Design.serif ) )
first name
.textFieldStyle ( .roundedBorder )
}
Notice this also changes the .padding ( .horizontal )

placeholder or hint text in the

Text ( " Notice this also changes the placeholder or hint text in the text field . " )
text field .
.frame ( maxWidth : .infinity )
.padding ( )
.background ( Color.orange )
} .font ( .title )
}
}

www.bigmountainstudio.com 274
 TextField

Text Text
Customizing Colors

struct TextField_Customizing : View {

12:09 @State private var textFieldWithText = " With Text "
@State private var textFieldNoText = " "
@State private var withOutline = " With Outline "

var body : some View {

TextField VStack ( spacing : 20 ) {
Text ( " TextField " ) . font ( .largeTitle )
Customizing Text ( " Customizing " ) . foregroundColor ( .gray )
Text ( " One way to customize TextFields is to add a shape behind one that has no
TextFieldStyle set . " )
One way to customize .frame ( maxWidth : .infinity ) .padding ( ) . background ( Color.orange )
TextFields is to add a shape
behind one that has no TextField ( " Placeholder Text " , text : $ textFieldNoText )
.padding ( 10 )
TextFieldStyle set . .background ( Rounded Rectangle ( cornerRadius : 10 )
. foregroundColor ( Color ( hue : 0.126 , saturation : 0.47 , brightness : 0.993 ) ) )
.padding ( )
Placeholder Text TextField ( " Placeholder Text " , text : $ withOutline )
.padding ( 10 )
.overlay (
// Add the outline
With Outline RoundedRectangle ( cornerRadius : 8 )
.stroke ( Color.orange , lineWidth : 2 )
)
.padding ()
Change text color using the
Text ( " Change text color using the foregroundColor property . " )
foregroundColor property. .frame ( maxWidth : .infinity ) .padding ( ) . background ( Color.orange )

With Text TextField ( " first name " , text : $ textFieldWithText )

.textFieldStyle ( .roundedBorder )
. foregroundColor ( .orange )
.padding ( .horizontal )
} .font ( .title )
}
}

www.bigmountainstudio.com 275
 TextField

Text Border Text

struct TextField_Border : View {

||||

((
3:21 @State private var textFieldData =

var body : some View {

VStack ( spacing : 20 ) {
HeaderView ( " TextField " , subtitle : " Border " ,
desc : " Use the border modifier to apply a ShapeStyle to the border of the
text field . " ,
TextField back : .orange )

Border Group {
TextField ( " Data " , text : $ textFieldData )
Use the border modifier to .padding ( 5 )
.border ( Color.orange )
apply a ShapeStyle to the
border of the text field . TextField ( " Data " , text : $ textFieldData ) iOS 15
.padding ( 5 )
.border ( .ultraThickMaterial , width : Material ShapeStyles
Data
are available in iOS 15.
TextField ( " Data " , text : $ textFieldData )
Data .padding ( 5 )
.border ( .tertiary , width : 5 )

Data TextField ( " Data " , text : $ textFieldData )

.padding ( 5 )
Data .border ( LinearGradient ( colors : [ .orange , .pink ] ,
startPoint : .topLeading ,
endPoint : .bottomTrailing ) , width : 5)
}
.padding ( .horizontal )
}
.font ( .title )
}
}

www.bigmountainstudio.com 276
 TextField

Text Text
Custom Placeholder/ Hint Text

struct TextField_CustomPlaceholder : View {

|| ||
8:57 @State private var textFieldData =

var body : some View {

VStack ( spacing : 40 ) {
Text ( " TextField " ) . font ( .largeTitle )
Text ( " Custom Placeholder / Hint Text " ) . foregroundColor ( .gray )
TextField Text ( " There currently is not a way to customize the placeholder text . You can create
your own placeholder text behind the text field . " )
.frame ( maxWidth : .infinity ) .padding ( ) . background ( Color.orange )
Custom Placeholder/Hint Text
Group {
// First TextField
There currently is not a way to ZStack ( alignment : .leading ) {
customize the placeholder text . // Only show custom hint text if there is no text entered
You can create your own if textFieldData.isEmpty {
placeholder text behind the text Text ( " Enter name here " ) . bold ( )
field . . foregroundColor ( Color ( .systemGray4 ) )
}
TextField ( "' " , text : $ textFieldData )
}
Enter name here
.padding ( EdgeInsets ( top : 4 , leading : 10 , bottom : 4, trailing : 10 ) )
.overlay (
Email Address // Add the outline
RoundedRectangle ( cornerRadius : 8 )
.stroke ( Color.orange , lineWidth : 2 ) )

// Second TextField
ZStack ( alignment : .leading ) {
if textFieldData.isEmpty {
Text ( " Email Address " ) . italic ( )

www.bigmountainstudio.com 277
 TextField

Text Text
Custom Placeholder/Hint Text Continued

.foregroundColor ( .orange )
.opacity (0.4 )
}
TextField ( "' " , text :
$ textFieldData )
}
.padding ( EdgeInsets ( top : 4 , leading : 10 , bottom : 4 , trailing : 10 ) )
.overlay (
RoundedRectangle ( cornerRadius : 8 )
.stroke ( Color.gray , lineWidth : 1 ) )
} .padding ( .horizontal )
} .font ( .title )
}

www.bigmountainstudio.com 278
 TextField

Text Text
Custom Composition

@State private var textFieldData =

12:32
VStack {
HStack {
Image ( systemName : " magnifyingglass " ) . foregroundColor ( .gray )
TextField ( " first name " , text : $ textFieldData )
Image ( systemName : " slider.horizontal.3 " )
}
TextField Divider ( )
}
Custom Composition
.padding ( )

Compose your own custom HStack {

Image ( systemName : " envelope " )
TextField by piecing together
. foregroundColor ( .gray ) .font ( .headline )
other views .
TextField ( " email address " , text : $ textFieldData )
}
Q first name .padding ( )
.overlay ( RoundedRectangle ( cornerRadius : 8 ) .stroke ( Color.gray , lineWidth : 1) )
.padding ( )

email address HStack {

TextField ( " country " , text : $ textFieldData )
Button ( action : { } ) {
Image ( systemName : " chevron.right " ) . padding ( .horizontal )
country
}
.accentColor ( .orange )
}
.padding ( )
.overlay ( Capsule ( ) . stroke ( Color.gray , lineWidth : 1 ) )
.padding ( )

www.bigmountainstudio.com 279
 TextField

Text
Keyboard Type

struct TextField_KeyboardType : View {

|| ||
1:16 @State private var textFieldData =

TextField
var body : some View {
VStack ( spacing : 20 ) {
Keyboard Types
Text ( " TextField " )
font ( .largeTitle )
Text ( " Keyboard Types " )
.foregroundColor ( .gray )
Control which keyboard is
shown with the keyboardType Image ( " KeyboardType " )
modifier.
Text ( " Control which keyboard is shown with the keyboardType modifier . " )
Enter Phone Number .frame ( maxWidth : .infinity )
.padding ( )
.background ( Color.orange )

TextField ( " Enter Phone Number " , text : $ textFieldData )

.keyboardType ( UIKeyboardType.phonePad ) // Show keyboard for phone numbers
.textFieldStyle ( .roundedBorder )
.padding ( .horizontal )
25

1 3
ABC DEF
4 6 Spacer ( )
GHI JKL MNO } .font ( .title )
000

7 8 9 }
PQRS TUV WXYZ
}
+* #

www.bigmountainstudio.com 280
 TextField

Keyboard Types Available

.default .asciiCapable .asciiCapableNumberPad

.alphabet .decimalPad .emailAddress

www.bigmountainstudio.com 281
 TextField

.namePhonePad .numberPad .numbersAndPunctuation

.phonePad

www.bigmountainstudio.com 282
 TextField
Autocorrection Disabled
struct TextField_Autocorrection: View {
You may have noticed that space above some of the
@State private var lastName = ""
keyboard types that offer autocorrection. You can
@State private var code = "" turn this off with the autocorrectDisabled modifier.

var body: some View {

VStack(spacing: 10) {

TextField("last name", text: $lastName)

.autocorrectionDisabled(false) // Default: Offer suggestions (redundant)

.textFieldStyle(.roundedBorder)

.padding(.horizontal)

Use width: 214

TextField("one time unique code", text: $code)

.autocorrectionDisabled() // Don't offer suggestions

.textFieldStyle(.roundedBorder)

.padding(.horizontal)

.font(.title)

www.bigmountainstudio.com 283
 TextField

Text
Disable TextFields о

struct TextField_Disabled : View {

@State private var lastName = " Moeykens "
@State private var city = " Salt Lake City "
@State private var disabled = false

var body : some View {

VStack ( spacing : 10 ) {
Text ( " TextField " ) . font ( .largeTitle )
Text ( " Disabled " ) . foregroundColor ( .gray )
Image ( " Disabled " )
Text ( " You may need to conditionally enable/ disable text fields . Just use the
disabled modifier . " )
.frame ( maxWidth : .infinity )
.padding ( )
.background ( Color.orange )

Toggle ( " Keep Info Private " , is0n : $ disabled )

.padding ( .horizontal )

Group {
TextField ( " Enter Last Name " , text : $ lastName )
TextField ( " Enter City " , text : $ city )
}
.disableAutocorrection ( true )
.textFieldStyle ( .roundedBorder )
.padding ( .horizontal )
.disabled ( disabled ) // Don't allow to edit when disabled
.opacity ( disabled ? 0.5 : 1 ) // Fade out when disabled

Spacer ()
} .font ( .title )
}
}

FL
Note : The disabled modifier applies to ANY
VIEW. Not just the TextField view.

www.bigmountainstudio.com 284
 TextField
onEditingChanged
struct TextField_OnEditingChanged: View {
@State private var text = ""
@State private var isEditing = false

var body: some View {

VStack(spacing: 20) {
HeaderView("TextField",
subtitle: "onEditingChanged",
desc: "The onEditingChanged even tells you when the text field has the
focus or not.",
back: .orange)

Text("Turn border green when editing")

TextField("10 characters", text: $text) { isEditing in
self.isEditing = isEditing
}
.padding()
.border(isEditing ? Color.green : Color.gray)
.padding(.horizontal)
}
.font(.title) When the cursor is in the text field
} and the keyboard is showing,
} isEditing will be true.

When the keyboard is dismissed and

the text field no longer has the focus,
0:00
isEditing will change to false.

www.bigmountainstudio.com 285
 TextField
iOS 15
Autocapitalization
struct TextField_Autocapitalization: View {
@State private var textFieldData1 = ""
When a user starts typing into a TextField, the
@State private var textFieldData2 = "" first word in each sentence is always
@State private var textFieldData3 = "" capitalized. You can change this behavior with
@State private var textFieldData4 = "" the textInputAutocapitalization modifier.
var body: some View {
VStack(spacing: 50) {
Text("Words")
TextField("First & Last Name", text: $textFieldData1)
.textInputAutocapitalization(.words)
.textFieldStyle(.roundedBorder)
.padding(.horizontal)

Text("Sentences (default)")
TextField("Bio", text: $textFieldData2)
.textInputAutocapitalization(.sentences)
.textFieldStyle(.roundedBorder)
.padding(.horizontal)

Text("Never")
TextField("Web Address", text: $textFieldData3)
.textFieldStyle(.roundedBorder)
.textInputAutocapitalization(.never)

.padding(.horizontal)

Text("Characters")
TextField("Country Code", text: $textFieldData4)
.textInputAutocapitalization(.characters)
.textFieldStyle(.roundedBorder)
.padding(.horizontal)
}
}
}

www.bigmountainstudio.com 286
 TextField

Text iOS 14 Text

Keyboard Safe Area

struct TextField_KeyboardSafeArea : View {

SWIFTUI
1111
@State private var userName =
Visual Reference Guide
te private Varnas

VISUAL TIME-SAVING REFERENCE

Swi View me
ftU
l s
spac
er( SwiftUl Views

ge ("
er (

VIEWS
derv
VISUALTIME-SAVING REFERENCE
SwiftUl Views ry
y move into view when the keyboard
Master VIFTUI DEVELOPERS
BigMountainStudio Big Mountain Studio area so it will not cover views . "
ns
MarkMoeyke Mastery

TextField ( " user name " , text : $ userName )

textFieldStyle (.roundedBorder)
This SwiftUl content is locked in this preview .

Unlock more pages of what you can do in the latest iOS

extFieldStyle ( .roundedBorder )
8
versions with the TextField view in the full version of the book.

font ( .title )

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $ 49.50 !

www.bigmountainstudio.com 287
 Toggle

The Toggle is a switch that can either be on or off . Much like other controls , you need to bind it to a variable . This variable is

passed into the Toggle's initializer. Then , all you need to do is change this bound variable's value to change the Toggle's

state on or off. Or read the bound variable's value to see what state the Toggle is currently in .

This is a push- out horizontally view .

www.bigmountainstudio.com 288
 Toggle

Introduction

struct Toggle_Intro : View {

(C
4:45 @State private var isToggleOn = true

var body : some View {

Toggle VStack ( spacing : 10 ) {
HeaderView ( " Toggle " ,
Introduction subtitle : " Introduction " ,
desc : " The Toggle is a ' push - out view ' that only pushes out to fill the
width of its parent view . " )
The Toggle is a ' push- out
view ' that only pushes out to Toggle ( " Night Mode " , isOn : $ isToggleOn )
.padding ( )
fill the width of its parent .accentColor ( Color.red
view.
DescView ( desc : " Combine images with text " ) Note: Using accentColor
directly on a Toggle does not
Night Mode Toggle ( ison : $ isToggleOn ) {
Text ( " Night Mode " ) affect its color.
Image ( systemName : " moon " )
}
Combine images with text .padding ( )

DescView ( desc : " Or you can have nothing " )

Night Mode
VStack {
Text ( " Turn Alarm On ? " )
Or you can have nothing . foregroundStyle ( .white )
Toggle ( " Turn this alarm on " , is0n : $ isToggleOn )
.labelsHidden ( ) // Hides the label/title
}
Turn Alarm On ?
.padding ( 25 )
.background ( Color.blue )
.cornerRadius ( 20 )
}
.font ( .title )
}
}

www.bigmountainstudio.com 289
 Toggle

Accent Color iOS 14

struct Toggle_Color : View {

(C
4:42 @State private var isToggleOn = true

var body : some View {

VStack ( spacing : 40 ) {
HeaderView ( " Toggle " ,
subtitle : " Color " ,
desc : " You can change the color of the Toggle through the
SwitchToggleStyle . " , back : .blue , textColor : white )
Toggle

Color Group {
Toggle ( ison : $ is ToggleOn ) {
Text ( " Red " )
You can change the color of
Image ( systemName : " paintpalette " )
the Toggle through the
SwitchToggleStyle .
.toggleStyle ( SwitchToggleStyle ( tint : Color.red ) )

Red Toggle ( ison : $ isToggleOn ) {

Text (" Orange " )
Image ( systemName : " paintpalette " )
Orange
toggleStyle ( SwitchToggleStyle ( tint : Color.orange ) )
}
.padding ( .horizontal )
}
.font ( .title )
}
}

www.bigmountainstudio.com 290
 Toggle

Tint iOS 15

struct Toggle_Tint : View {

4:21 .... @State private var isToggleOn = true

var body : some View {

VStack ( spacing : 40 ) {
HeaderView( " Toggle " ,
subtitle : " Tint " ,
desc : " Starting in iOS 15 , you can use the tint modifier to change
the color . " )
Toggle

Tint Group {
Toggle ( ison : $ isToggleOn ) {
Text ( " Red " )
Starting in iOS 15 , you can
use the tint modifier to Image ( systemName : " paintpalette " )

change the color.

.tint ( .red )

Red Toggle ( ison : $ isToggleOn ) {

Text ( " Orange " )
Image ( systemName : " paintpalette " )
Orange
tint ( .orange )
}
.padding ( .horizontal )
}
.font ( .title )
}
}

www.bigmountainstudio.com 291
 Toggle

iOS 15
ToggleStyle

struct Toggle_ToggleStyle : View {

4:29 .... @State private var isOn = false
@State private var toggleOn = true

var body : some View {

VStack ( spacing : 20.0 ) {
HeaderView ( " Toggle " ,
subtitle : " ToggleStyle " ,
Toggle desc : " Apply the toggleStyle to your Toggle to make it look like a button
with two states . " )
ToggleStyle
Toggle ( ison : $ isOn ) {
These examples are using
Apply the toggleStyle to your Image ( systemName : " heart " )
.symbolVariant ( ison ? .fill : .nor the symbol variant to switch
Toggle to make it look like a between filled and not filled
} .padding ( )
button with two states . SF symbols .
Toggle ( ison : $ isOn ) {
Image ( systemName : " heart " )
.symbolVariant ( ison ? .fill : .none )

.toggleStyle ( .button )

Toggle ( ison : $ toggleOn ) {

Image ( systemName : " heart " )
.symbolVariant ( toggleOn ? .fill : .none )

.toggleStyle ( .button )
Notice when the toggleStyle is button and
}
.font ( .title ) it is in the on state , the whole button
} becomes filled .
}

www.bigmountainstudio.com 292
ADDITIONAL CHAPTERS

The following chapters are locked in this preview.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!
 OTHER VIEWS
Covered in the SwiftUI Views Mastery book.
Includes: Circle, Ellipse, Capsule, Rectangle, RoundedRectangle, Color, Divider, Group, Image, Path
and Inset along with the many modifiers and examples of how they work.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

294
 PAINTS
Covered in the SwiftUI Views Mastery book.
Includes: AngularGradient, ImagePaint, LinearGradient and RadialGradient with the many examples
of how they work when applied to different views.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

295
 CONTROLS MODIFIER Covered in the SwiftUI Views Mastery book.
Includes: ActionSheet, Alert, ContextMenu, Sheet (Modals), Popover, Custom Popups and the StatusBar
Hidden modifier with the many examples of how they work when used with different views.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

www.bigmountainstudio.com 296
 LAYOUT MODIFIERS Covered in the SwiftUI Views Mastery book.
Includes: AspectRatio, Background, EdgesIgnoringSafeArea, FixedSize, Frame, Hidden,
LayoutPriority, Offset, Overlay, Padding, Position, ScaleToFill, ScaleToFit, and zIndex with the many
examples of how they work when used with different views and modifiers.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

297
 EFFECT MODIFIERS Covered in the SwiftUI Views Mastery book.
Includes: AccentColor, BlendMode, Blur, Border, Brightness, Clipped, ClipShape, ColorInvert,
ColorMultiply, ColorScheme, CompositingGroup, ContentShape, Contrast, CornerRadius,
DrawingGroup, ForegroundColor, Grayscale, HueRotation, LuminanceToAlpha, Mask, Opacity,
PreferredColorScheme, RotationEffect, Rotation3DEffect, Saturation, ScaleEffect, Shadow, and
TransformEffect with the many examples of how they work.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

298
 CUSTOM STYLING Covered in the SwiftUI Views Mastery book.
Includes: ButtonStyle, DatePickerStyle, ListStyle, NavigationViewStyle, PickerStyle, TextFieldStyle,
ToggleStyle, Global Styling, View Modifiers and Styling Shapes with the many examples of how
they work when used.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

299
 IMAGE MODIFIERS Covered in the SwiftUI Views Mastery book.
Includes: Interpolation, RenderingMode, Resizable, and Symbol ImageScale with the many
examples of how they work.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

300
 GESTURES
Covered in the SwiftUI Views Mastery book.
Includes: Drag Gesture, On Long Press Gesture, Magnification Gesture, Rotation Gesture, On Tap
Gesture, Exclusive Gesture, Simultaneous Gesture, Sequence Gesture and High Priority Gesture
with the examples of how they work when applied to different views.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

301
 OTHER MODIFIERS Covered in the SwiftUI Views Mastery book.
These are new modifiers that SwiftUI introduced after iOS 13. They include: AllowsHitTesting,
Disabled, Preference and Redacted.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

302
IMPORTING VIEWS
Covered in the SwiftUI Views Mastery book.
Includes how to use the new views that came with the release of iOS 14:
VideoPlayer view in the AVKit and Map view in the MapKit.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

303
 ACCESSIBILITY
Covered in the SwiftUI Views Mastery book.
Learn how to include accessibility to enable things like voice over and guidance to the disabled.

SAVE 10% AND UNLOCK THE BOOK TODAY FOR ONLY $55 $49.50!

304
 THE END

I hope you enjoyed this free SwiftUl Views Quick Start !

This was just the beginning of a larger book.

BIG MOUNTAIN

Studio

Continue your journey ...

www.bigmountainstudio.com 305
 Author

༡
Moe
Mar yke
Hi . I'm k ns

I'm a full - time mobile developer with over three decades of programming experience . I have created desktop ,
web and mobile apps in many fields including insurance , banking , transportation , health , and sales . I have also
given talks on programming and enjoy breaking down complex subjects into simple parts to teach in a practical
and useful manner.

youtube.com/markmoeykens Website: www.bigmountainstudio.com

Find tutorials on iOS topics where I guide you step-by- step through Join my climber's camp and see what products I have available,
all different aspects ofdevelopment.
learn something new and see what I am working on.
· Read articles
• Find courses
Download books

@BigMtnStudio @BigMtnStudio
Stay up-to-date on what I'm learning and working on. These arethe Ο Do you prefer hanging out in Instagram? Then follow and get bite-
most real-time updates you will find. sized chunks ofdev info.

306
MORE FROM ME
I have some products you might also be interested in!

Go to Big Mountain Studio to discover more.

 You Get 10% Off !

Take Advantage of This Introductory Discount !

BMS_10

Because you got this book you get an introductory discount of 10% off everything in the store . This is to encourage you to continue your
SwiftUl journey and keep getting better at your craft . Enter the code above on checkout or click the button below.

ACTIVATE DISCOUNT

(Note: You should have gotten an email with this coupon code too . Make sure you opt - in for even better discounts through sales in the
future . Go here for instructions on how to do this. )

308
 More From Me

Working with Data in SwiftUI "

DATA IN SWIFTUI DOESN'T HAVE TO BE CONFUSING . YOU WILL MAKE MISTAKES . BUT YOU DON'T HAVE TO WITH THIS BOOK.

C
XCODE

Satu THE OMPLETEXCODEPROJECT

Working with data in SwiftUl is super confusing . I know, I was there
Wor trying to sort it all out . That's why I made this simple to read book so
kin wit
g h YOUR VISUAL TIME -SAVING REFERENCE
that anyone can learn it .
Dat S
a in wiftUl Working with Data
How to architect your app
PROJECT

Learn what binding is

What is @StateObject and when should you use it?

How is @State different from @StateObject ?
in SwiftUI
How can you have data update automatically from parent to
e
Xcod Project ByMountainRade
child views?
How can you work with a data model and still be able to
Mark Moeykens preview your views while creating them ?
How do you persist data even after your app shuts down?
Working with JSON

SAVE 10% ON THIS BOOK !

www.bigmountainstudio.com 309
 More From Me

SwiftUl Views Mastery

THE COMPLETE, VISUAL TIME- SAVING REFERENCE

SWIFTUI
MASTERY Visual ReferenceGuide
VISUAL TIME-SAVING REFERENCE
Swif
tUl Views
SwiftUl Views

VIEWS
VISUALTIME-SAVINGREFERENCE
SwiftUl Views ry
Mastery VIFTUI DEVELOPERS BigMountainStudio
BigMountainStudio
r k
Ma Mo e y k e n s
Mastery

Over 1,000 pages of SwiftUI Find out how to implement action sheets , modals, popovers
Over 700 screenshots/videos showing you what you can do and custom popups
so you can quickly come back and reference the code Master all the layout modifiers including background and
Learn all the ways to work with and modify images overlay layers, scaling , offsets padding and positioning
See the many ways you can use color as views How do you hide the status bar in SwiftUI? Find out !
Discover the different gradients and how you can apply them This is just the tip of the mountain!

SAVE 10% ON THIS BOOK !

www.bigmountainstudio.com 310
 More From Me

SwiftUI Animations Mastery

DO YOU LIKE ANIMATIONS? WOULD YOU LIKE TO SEE HUNDREDS OF VIDEO ANIMATION EXAMPLES WITH THE CODE?
SWIFTUI

SwiftUI made animations super easy... except when it isn't . Most new
VISUAL Visual ReferenceGuide SwiftUl developers can get a simple animation working but as soon
as they want to customize it , they get lost and waste more time than
Swif VISUAL TIME-SAVING REFERENCE
tUl they should trying to get it working . This book will help you with that
ANIMATIONS

Anim ns
atio SwiftUI Animatio struggle .
ns
Learn all the animation types and options with embedded video
samples and code
Master spring animations
Master transitions for views that are inserted and removed from
VISUAL TIMESAVING REFERENCE
the screen
SwiftUl Animations
y ry
Master Learn how matched GeometryReader should really work
BigMounta ALTEXTBOOK Big Mountain Studio ✓ Customize animations with speeds , delays , and durations
ns Mastery
Mark Moeyke

SAVE 10% ON THIS BOOK !

www.bigmountainstudio.com 311
 More From Me

SwiftData Mastery in SwiftUI

QUICKLY LEARN APPLE'S NEW SWIFTDATA FRAMEWORK VISUALLY SO YOU CAN SAVE TIME BUILDING APP FEATURES .
SWIFTDATA

Over 500 pages - The largest SwiftData book for SwiftUI

AL
VISU PICTU
RE BOOK
REFERE
NCE What are the 4 main concepts that will help you finally
E
Swi VISUAL TIME-SAVING REFERENC understand how SwiftData works?
ftD
ata How can you start using SwiftData in just 3 steps and
under 10 minutes?
Mas
ter SwiftData Mastery How can you use Al to create a lot of mock data ?
y
How can you make your life much easier when using
MASTERY

SwiftData and SwiftUI?

How can you not only get data , but also sort , filter, and
animate with a query?

UI How do you sync data across multiple devices?

ft
in Swi What is one object you can use to prevent your UI from
ELOPERS
Big Mountain Studio
s hanging and data from getting corrupted when doing a
MarkMoeyken
large number of SwiftData operations?
BONUS: Get 4 SwiftData apps with integrations for
MapKit, PhotosUI , and Charts .

SAVE 10% ON THIS BOOK !

www.bigmountainstudio.com 312
 More From Me

Core Data Mastery in SwiftUI

QUICKLY LEARN APPLE'S CORE DATA FRAMEWORK VISUALLY SO YOU CAN SAVE TIME BUILDING APP FEATURES .

Over 500 pages - The largest Core Data book for SwiftUI
CORE

VSAL PICT R
URE BOOK EFERENCE What are the 4 main concepts that will help you finally
DATA

understand how Core Data works?

CE
Cor VISUAL TIME-SAVING REFEREN How can you start using Core Data in just 4 steps and
e Data
under 10 minutes?

Mas Core Data Mastery How can you use mock data in Core Data and preview it
ter
y while developing your UI?
MASTERY

How can you make your life much easier when using Core
Data and SwiftUI?

How can you not only get data , but also sort , filter, and
VISUAL TIME-SAVING REFERENCE
animate with a fetch request?
Core Data Mastery UI
tl
in Swif ✔ What can you do if you want to group your data into
LOPERS Big Mountain Studio sections?
ns
Mark Moeyke in SwiftUI How can you use the managed object context to insert ,
Mark AREFERENCEGUIDEFOR SWIFTUEDEVELOPERS BigMountainStude
update , and delete data?
Much, much more . Click the link to see.

SAVE 10% ON THIS BOOK !

www.bigmountainstudio.com 313
 More From Me

Combine Mastery in SwiftUI

HAVE YOU TRIED TO LEARN COMBINE AND FAILED LIKE I DID ... MULTIPLE TIMES?
COMBINE

ETE C
THE OMPLETEXCODE PROJECT
COMPL
CE
VISUAL TIME -SAVING REFEREN I finally figured out the secret to understanding Combine after 2
Com
bin years and now I'm able to share it with you in this visual , game-
e
changing reference guide .
Mas
ter
Combine Mastery
y How can you architect your apps to work with Combine?
MASTERY

Which Swift language topics should you know specifically that

iOS 16 will allow you to understand how Combine works?
What are the important 3 parts of Combine that allows you to
build new data flows?
f tU tUI
in Swi How can Combine kick off multiple API calls all at one time and
BigMa IFTUI DEVELOPERS BigMountainStudio handle all incoming data to show on your screen ? Using about
all

s
Mark Moeyken 12 lines of code...which includes error handling .

SAVE 10% ON THIS BOOK !

www.bigmountainstudio.com 314
 THANK YOU

I hope you have enjoyed this book If you find anything wrong or have Found a way to create a cool UI ? I'd
as your visual quick start reference suggestions for improvement, be super interested to see it !
guide . please let me know.
If you would like to write a positive
A lot of time and work went into this Email : review on how this book has helped
to make it as easy as possible for [email protected] you, I would love to hear that too !
you to use .
Direct Message me on Twitter:
@bigmtnstudio

www.bigmountainstudio.com 315
 PARTNERING INFO
IT’S FREE TO PARTNER UP AND MAKE MONEY. JUST FOLLOW THESE 2-STEPS:

1. Go to bigmountainstudio.com/ 2. Start sharing content (social posts,

makemoney and sign up. video mentions, blogs, etc.) with your
partner link and earn passive income.

www.bigmountainstudio.com 316
 SHARE THE LOVE

If you like this book and find it useful , I encourage you to share links to my products . I'll give you some effective sharing
tips on the next page . Here are some tips on what you can and cannot share .

YOU CAN YOU CANNOT

Share a screenshot of a page from the free book sample with Share the entire book, whether it's the free sample or paid
your followers and friends along with a link on where they can version .
get the free or paid book . ( https://www.bigmountainstudio.com )
Sell or resell my products .
Share favorable comments and goodwill with others . You helped
make the Swift international community super friendly. Let's Connect myself or my products with sites that promote general
keep it that way. hate , cyber- bullying , or discrimination of any kind .

www.bigmountainstudio.com 317
 SHARING TIPS

If you have never been an affiliate before and want some tips to effectively share my products then read on !

YOU SHOULD YOU SHOULD NOT

Be honest and genuine with your comments . People can tell Be pushy or overly aggressive .
when you're not genuine . • Make people feel wrong or stupid for not buying a product .
• Be deceptive in any way.
Be specific in your comments . Tell us exactly what you liked ,
what you learned or what helped you . Endlessly promote . Mix it in with your other content .
• Share screenshots , gifs or video of your work! •
Think you'll make money by sharing one time . You should
Help others with what you learned . Add value . casually share regularly. Try with once a week, for example .
• Be open that you are sharing an affiliate link.
Share more than one time .

www.bigmountainstudio.com 318