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 replicated
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 CodeWithChris. 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 view 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 interfaces Swift UI lifecycle is SwiftUI 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, content viewed at Swift represents your view, but as you can see,
it's all Xcode. 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
Iowa 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 the iPhone 11 and I'm going to hit this
build and run button. Now, if it's the first time you're
launching the Iowa simulator, it's going to take a while to boot up,
just like it would be to put 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 ED area. If you don't see this,
you can click on this little button here and make sure that there's
a checkmark 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 the 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 mood 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 Xcode 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 content viewed at 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 key word. 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 key word, 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 Dorte 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 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's 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 is very nicely represents what we're
writing here through Xcode. 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 they 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 coat, because if you accidentally
drag it in the middle of your Xcode, 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. OK, that's not changing that. So it is changing that,
but it's not changing here. So go ahead and select color. And, uh, OK, we can do
green and 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 textfield, which you can
search for modifiers to add. So I'm going to add one called Blurr. 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 Xcode
ed 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 going to get to a point where it's
so familiar, it's going to 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 fuzzy 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 Xcode. 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 Xcode Ed 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 dot 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 toolset
by introducing additional views and container's if you don't want to miss
that lesson, make sure you hit that subscribe
button and turn on notifications. All right.
I'll see you in the next lesson.
