Hi, Alex here from rebeloper.com welcome back to my channel the number one place
for iOS developers who want to code smarter. In today's video I am going to
talk about how to use texts inside stacks in SwiftUI. If you'd like to build out
this interface with just a few minutes then keep on watching. So hit that
subscribe button if you're excited to dive into this and make sure to watch
the full video to find out the surprise bonus. So let's jump right into Xcode 11.
So let's see I'm on beta but this will work fine for you once it is out of beta
of course. So let's create a new project. Okay, so this is the default one, the one
that I have already created but let's see single view app. Let's click on next
here and I will name this let's see make sure that the language you select is
Swift and the user interface is SwiftUI. Of course, so let's click on next
here and I will just drop it right here. I will create a git repository on my Mac
so I can push it up to github so you can take a look at it. So go ahead and take a
look at the links in the description. So let's create this
and while we create it let me just resize this so you can see everything
and as you can see we have a kind of an Xcode 11 style here but I would just
close this one and maybe a resume and preview here and first of all what we
are going to do is create some new texts. Okay, well if you come from UIKit land
then texts are kind of text fields or text labels rather and there we go we
have a hello word there. So let me just change this to hello text, there we go.
And as you can see it automatically changed the live preview. So that is a
real awesome so what I want to do is create text 1 here and that will be a
string. Now just copy this out hello text, there we go and hello text 1 and I
will add this variable to the text. Let's see how that goes and it should update
but automatic preview updating paused so let's click on a resume here and we
should see hello text one real soon. There we go. Hello text one so what we
want to do here is basically add some more text, okay. So what I would do is
just simply copy and paste all of these and maybe let's just create some new
text strings here and that will be let's see 2, 3 and there we go 2 & 3 and let's
change all of these, okay. And when you are at it as you can see we have some
some issues here first of all we cannot have
more views inside a view. So we kind of need to add it inside a stack so that is
what we are going to do next but as the title of this video suggests its view
text and stacks so what is a view where basically every element that you just
add into this var body some view is a view be it text, an image, a label,
a button whatever it is basically a view and just so you know let us not go far
into our conversation but when you modify a text and we do that in just a
moment it SwiftUI also creates a new view according to those specifications.
Okay! So first of all let's fix this okay let's create a stack here and if we
go and type in here stack, okay and we will use let's see vertical stack, that's
great and let's add these 3 so I'm just selecting the 3 lines and I'm
using alt command and square brackets and it is going to push that up okay and
if you use the other one the closing square brackets it will push all of your
selected lines one down, okay and let's see the preview is still working.
Oh, so let's just have these two parentheses here and there we go we have hello text 1,
hello text 2, hello text 3. Now let's add some modifiers to this text
and as you all read this saw I'm using the code so I'm using auto completion
but you could use these real nice helper so if you hit command and select
hover over the text and click on it you will see a lot of actions that you can
take on this element and I will select show SwiftUI
inspector and there we go we have the text we could change that or rather yet
we cannot change that of course because we are using a variable the font let's
just change this to let's say large title and as you can see it already
added the code into our editor. How awesome is that
and let's add our weight let's see maybe bold here so we can see it and you saw
that it added the font weight to dot bold, okay. Color let's see I will use of
course you have all of these system colors that I would like to use let's
see here that's the orange maybe, okay. Color dot orange, okay. Let's go back and
show SwiftUI inspector and see what else do we have here well we could add
some padding or frame to it but we won't bother with that at this moment, okay.
Now let's see what if I want to let's say use all of these modifiers with the
other text so text 2 and text 3. So for that here comes the bonus extra for
in this video we are going to extract this to another SwiftUI view. So to
extract our text with all of its modifiers into subview all we have to
do is hit command and click on the text and here you can see it says extract
subview. So let's click on that and if you wait just a few moments it will
highlight the extracted view and I will call this hello view. You may call
it whatever you'd like, okay. And hit a return. Now if we just scroll a little
bit down you will see that it created a new struct with the hello view
and it has a body of type some view and it has some unresolved identifiers.
So to fix this problem all we need to do is create a variable for it. So var let's
say a text string maybe or something according to this and this will be of
type string of course and let's add this
here, okay. Now we will have another error and it says hello world type is not
convertible and let me just tap on there to string that is returning a
hello view. So as you might have already guessed this we want to add here a text
string and we are going to add text one here.
Okay and that should work fine let's hit resume and we should see basically the
same old thing. Now what I want to change here still is the font type and maybe
the color. So let's add some variables here. So let's see of our font
and that is of type font okay and let's see var foreground color and that is of
type color, okay. And now I can just simply add these instead of the
hard coded types, okay.
There we go, okay. Of course we need to add all of these here so let's see font
dot let's say title. Let's use title for now not large title and for the next
one is the foreground color. Foreground color and that will be let say blue.
Okay, that is that. Lets hit resume and see some changes here and we will of
course use this hello view to the other text. So let's delete this and real quick
let me just copy and paste this and change some attributes. The first one is
of course the text string 3 here and maybe we want to have this as yellow
and and this as red. I know my font color, foreground color variations are quite
hard but there we go we have our hello view with different texts and different
colors and finally we want to have this as maybe something like subtitle.
Something like that let's see the auto completion there we go sub-headline. And we
still need to have these names figure it out, there we go. And as you can see these
are quite small. So I want to add them into a horizontal stack. So what I want
to do is hit command and tap on this second
hello view and embed this into an HStack. So embed in HStack and as you
can see just added HStack there and just select this line or just of get your
cursor there and hit command alt and square brackets and move it up and let's
see there. There we go. Let me just make this a little bit larger so you can see
that we have a horizontal stack. Now I added these two parenthesis because
there could be some optional elements here and I will show you one and that is
the spacing you might want to use, spacing that is correct and I want to add
in here 50 so we can see all of it as you can see it already
updated the preview. So that is it for views, texts and stacks. Now you know how
to use and modify text put them into stacks and create dynamic reusable views
in SwiftUI. If you are more interested in SwiftUI tutorials make sure to hit
that notification bell because in my next video I am going to talk about the
navigation in SwiftUI. This is gonna be a really cool video where I'm gonna
share some key tips to make your navigation work seamlessly. So make sure
you hit that notification bell so you don't miss that video. In the meantime
while you wait for that video make sure you also check out these two videos that
I have over here. I talked about iOS development SwiftUI and how to
code smarter. So make sure to check out these videos as well and as always I
will see you in the next one.