hello and welcome in this lesson i'm
going to show you how to use xcode to
build user interfaces with swift ui
i'm going to first teach you how to
preview your app's user interface so
that you can actually see what you're
building
and then we're going to take a look at
how to use xcode to visually construct
the user interface
or ui for short now up until this point
the lessons have been more or less
passive meaning that you can just sit
back and watch the lessons
but starting from now we're going to
take a more active approach
i want you to watch what i do replicate
it on your own xcode project and attempt
any of the challenges that i have for
you at the end of the lesson
this is the best way to learn and quite
frankly if you're only going to be
watching the lessons without
trying it out for yourself you're not
making the best use of your time
and i speak from personal experience
now just in case you're new around here
hi my name is chris and welcome to code
with chris the place to be if you want
to learn how to make an
app before we begin i have a quick
question for you do you have an app idea
that you're trying to build
let me know by leaving a quick comment
below and on your way down there if you
wouldn't mind please give this video a
thumbs up because it really helps out
the video
thank you so much for that all right
this time we're going to get our hands
dirty so let's do it
let's start by creating a brand new
xcode project
we're going to choose ios app
and i'm going to call this one ui test
just make sure
interface is swift ui lifecycle is swift
ui app and language is swift
other than that you can name it anything
you want let's go ahead
and save our project
and like i mentioned in the previous
lesson contentview.swift
represents your view but as you can see
it's all
code so how do you actually see what
your ui
looks like well there are two different
ways the first way
is to launch your app in an ios
simulator like i mentioned before so
let's go ahead and do that first
select one that you fancy so i'm going
to select
iphone 11 and i'm going to hit this
build and run button
now if it's the first time you're
launching the ios simulator it's going
to take a while to boot up
just like it would be to boot up a real
device
for me because i've launched the
simulator before
it's happening really really quickly as
you can see
by default your project has a hello
world label
we're going to talk about that in a
second but first let me show you
the other way you can preview your app
so let's go ahead and stop our project
and that's going to stop the app from
running in the simulator
the second way is to preview your app in
this
canvas right here that's part of the
editor
area if you don't see this
you can click on this little button here
and make sure that there's a check mark
beside canvas
and if you're looking at a dot swift
file which is a view
you're going to be able to see this
canvas otherwise
if you're looking at this entry point
file here you can see that there's no
preview
so let's go back to content view make
sure we have our preview here
and click resume it's going to build and
run it and then you're going to see the
preview here again if this is the first
time you're doing it it might take a
little while
let's use these zoom controls down here
and zoom out a little bit so
that we can see the whole thing now just
off the bat there
are a couple of things i want to mention
here this is simply a preview
whereas when you launched it in the
simulator you're actually
installing that app in a virtual
device so that you can interact with it
and test it
here this is a preview that you cannot
interact with
but there is a way that you can so if
you click this button here
live preview it goes into a mode where
it's just like the simulator that you
saw before
but it's in this preview canvas so you
can go ahead and hit stop
and then again it just becomes a normal
preview that's only for
previewing purposes another cool thing
about using this preview canvas is that
you can
hit this button here and you can choose
a different device you can choose a
layout you can choose dark mode or light
mode and
you can pick a number of different
things this is the preferred way
to preview your ui because as you are
building your ui
through code on this side you're going
to be able to see things
change on the right here without having
to
relaunch the app in the simulator
all right now let's dive in and talk
about how we're going to actually build
the user interface
so make sure you have contentview.swift
highlighted and go ahead
and hide the file navigator now there is
a bunch of code here that make up the
view
but we're going to go through it in
depth later on when you learn some of
the swift programming basics for now
to avoid confusion i just want to draw
your attention to one thing
which is this piece of code right
here what i've highlighted on the screen
is what is generating this label here
that you see
in the preview notice that we have a
text keyword
we have the hello world piece of text
that you can see here and we also have
this
padding element here which gives the
padding around the word
let's take a look at this piece of code
and break it down i'm actually just
going to
go ahead and delete it as you can see
xcode is going to throw all sorts of
complaints and errors but don't worry
we're going to fix it right away now our
user interface elements
have to live in between this opening
bracket
and this closing bracket and you can
only have one
user interface element now obviously
that doesn't make sense because
our user interfaces are made up of more
than one element but that's where
container elements come into play
and i'll show you a couple of those in
this lesson as well
for now let's recreate that text element
so what we write
is that text keyword followed by a pair
of
brackets like that rounded brackets
and then inside there we have a pair of
quotation marks
and then we put the piece of text that
we want to display
so here i'm just going to put hello but
you'll notice that
this blue frame wraps very tightly
against
my hello text if you wanted to add
the padding back then you would
write dot and then you would just type
in padding and using autocomplete you
can just select that one right there
and just like that we've recreated that
label with padding
this right here is the text element or
the label
this part with the dot padding this is
called a modifier
and you can think of a modifier as an
attachment to
an element that changes the look and
behavior of it
in this case this padding modifier adds
padding to the text element so that if
there is an element right beside it
there will be some space surrounding our
text element
and there are actually many more
modifiers that we can add to our user
interface elements
for instance i can add one called
background and i'll just add it to the
end of the padding one
and i'm going to say that the background
for this label should be blue
so you can see that our preview canvas
very nicely
represents what we're writing here
through code
if there's any time that things get out
of sync maybe the code you're writing
here
is saying the background should be green
but you're not seeing it here
the code is considered the source of
truth because ultimately
the preview canvas and even what you see
in the inspector
panel are just visual representations
of the code and that brings me to my
next point which is
when you're building the user interface
you don't have to
write code there are so many visual ways
for you to
build the code let's erase this text
element again
and let me show you some of the ways in
which you can we can visually
build the user interface i talked about
the library panel before
so you can see here that we can simply
select search for the text element
select it and we can
drag it into our code
editor right here and then we can change
the placeholder text but we don't even
have to
change the text here if you click on
this text element
and you go into the inspector panel you
can change it here
like that and then also in this
inspector panel you'll see that there
are a bunch of modifiers that we can add
so to add the padding i could click this
to add top padding only and you can see
that the code changes
and it's specifying that i only want
padding on the top and you can see it
reflected here
or i can click this one here
and turn padding on or off and you can
see now i have padding on all sides
so in addition to some of the modifiers
that you see here
down here there's a text box where you
can search for more modifiers
so i can search for the background one
and click that
and then select that blue background as
you can see here
and then i can also add that padding now
in addition
to using the modifiers that you see here
and
using this add modifier text box you can
also
use the library to add modifiers so this
first tab
gives you all of the user interface
elements that you can
add to your view here on the second tab
are modifiers
so as you can see there's the padding
one
there's the background one so how do you
go about adding these modifiers
well you just click and you drag it but
here you have to make sure that you drag
it to the end of the code
because if you accidentally
drag it in the middle of your code
it might not take or you might get
something like that
and that clearly is an error so let's
undo that
so as if that weren't enough there are a
couple more ways i want to show you
on how you can modify your user
interface
elements visually instead of writing
code first of all
let's finish configuring this background
and
we're going to select blue right there
or maybe green
okay that's not changing that so it is
changing that but it's not changing here
so
i'm gonna go ahead and select
color and uh okay we can do green
lowercase g all right so you can hold
down command on your keyboard
and then you can click on the user
interface element
from your preview right here
and then there are a number of things
you can do with that element including
this one
show swift ui inspector and then
again you get this add modifier text
field
which you can search for modifiers to
add so i'm going to add one called blur
you can see that it is blurring the
color green
and you can see that now my background
is a blurry green
now you can do the same thing on the
code editor side so you can hold down
command
and you can click the text element and
you get this menu
you can again click show swift ui
inspector
and from here you can see that this menu
looks like the inspector here
and we can also add modifiers as well
so to illustrate my point i've shown you
a whole bunch of different ways
for you to modify your user interface
visually
you don't have to write the code but
over time as you're doing this in the
visual manner you're seeing the code
that is generated
over and over again you're gonna get to
a point where it's so familiar
it's gonna be faster for you just to
type it out rather than clicking
everywhere
so it's a really neat way to learn the
user interface code
isn't that pretty cool xcode has come a
long way it used to be really fussy to
use the visual interface builder with
xcode but swift ui really has changed
things for the better
now just to recap you learned about the
text element and how to use a modifier
to customize its
look and behavior a modifier is
something that
can change the look or behavior of a
view element
you also learned that the user interface
is built from swift code
but however there is a multitude of ways
in xcode to visually build and construct
your ui now the cool thing is that as
you're
visually customizing your ui through the
preview canvas or the
inspector panel the code in the code
editor
is updating and changing accordingly so
this is a great way to learn
the swift code to reinforce what you've
learned today
i have a quick quiz and challenge for
you to access them
simply visit codewithchris.com and log
into or
create your own account and then enroll
into the 14 day beginner challenge
and there you can access all of the
quizzes and challenges
i highly recommend that you go and do
that to make your learning really
effective
now the next time we sit together i'm
going to be expanding your tool set
by introducing additional views and
containers if you don't want to miss
that lesson make sure you hit that
subscribe button
and turn on bell notifications alright
i'll see you in the next lesson