Hi, Alex here from rebeloper.com. In today's video I want to take you behind the
scenes to create a TabView in SwiftUI. If you are interested in building out this
project with a lot of animations then make sure to keep on watching. Hit that
subscribe button, open up next code and let's dive in.
All right, let's take a look at the demo project that we are going to build out
today and learn about tab view, okay. This is the demo project that I have just set
up for you and as you can see it has four tabs down at the bottom. It starts
with the store, but if you can see that we have our apps and take a look at this
awesome animation that you can write on your own or just take a look at the link
in the description to find out where on all of this github repository lives, okay.
Let's move forward to about us and some awesome animations to hear if you want
to take a look at it. Of course there is an animations, SwiftUI animations
tutorial on the channel so don't miss that either. Let's take a look at the
blog and if I click on here it comes up real and nice and if I just click on it
again it's coming back so awesome animations
but in this tutorial we are going to focus on the tab view. So let's just stop
this and start with our demo project and it has a content view and all of these
constants blog view store view and so on that we are going to add. So first things
first let's add in here our tab view view. There we go and then inside the
tab view let's add our first view and that is our apps view, okay. And that will be
a tab item and inside here we are going to add our
tap item views and that is an image, image and that will be of system, there we go
system name and we are going to use our
constants for our system name and that is game controller dot fill, person dot
fill and that is added into the constants so we may omit any typos.
So constants, tab bar image name and tap bar zero. So underneath the image we are
going to add our text here and it will contain again pretty simple our constants
dot tab bar text dot and tab bar zero, okay.
Now let's add in here why we are at it tag, there we go. And the tag should be
zero for now, okay. Let's build and run and see what we have here. We should see
the apps you basically inside our tab view. There you have it.
We have our word game controller and the text apps and here we have Rebeloper
Messages, okay. Now what we still want to add in here is
our assets, so I will just click, go over that and add them in here. Let me just
jump to this definition, show in finder.
Okay! You won't have to add any of these but I will just add them real quick here.
Great! Let's build and run again and we should see right now
our were apps view. There we go. Looking awesome. Now let's add all of our
other views. So I'm just going to copy and paste this so it will be quicker
and once I have this hit command A to select everything and control I to ident
everything to its place and instead of this apps view let's add in about us
view the third one is the blog view.
There we go and finally the store view. Okay and let's select the image names.
One, two and three and finally the text under those images. One, two and three.
Now as you can see we have the tags so we have to change those tags too. One, two
and three and let's just build and run and see if all of this is okay and after
that we are just going to set up our tags because as you can see now the
the app starts with the first one apps. So the apps view. Let's take a look at up
about us, the blog, store, all is okay, okay. One final thing that I see here is I
want to set the images font. So font and let's set this to let's say
large title, okay. I'm just going to copy all of
this for the image, there we go. Looks much better in my opinion. Let's indent
everything and great. Now all we have to do here is set a state for our, state
variable for our tags.
So @ state var selected
equals and let's select 3, okay. And now that we have this as a state
selected in the tab view let's add in here selected, let's just wait for auto
completion selection, selection, there we go and select it.
There we go.
Okay let's add
a dollar sign there awesome. Now let's build and run and we should see
the store view come up as the first selected view in our tab view. Awesome.
There we go. A little bit too for our large title let me just remove this to title or
whatever you would like, okay. Finally I am going to show you how to
tint the tab bar color, okay. And all you have to do is just select the curly
brackets that closes the tab view and add in here accent color and let's have
here color dot red, okay. Let's build and run one more time and see how
that looks like, okay. Everything is red as its supposed to be
and finally I'm just going to add this tab bar so called tab bar a tint color
not the icons the accent color but a tint color and that is a pretty UIKit
like but let me just go in here and type in init
two curly braces and UITabBar.appearance
background color equals UIColor
dot and I will just use maybe purple. Let's see how that looks like.
Let's build it run and see all of the changes.
Okay! Let's just fix this, there we go and build and run, okay. As you can see it has
a purple tint. Well not what you might expect from it but you know this trick
as well. Now I hope you enjoyed this video about creating tab views.
Now speaking of tab view I want you to hit that notification bell because in my
next video I'm actually gonna film everything about geometry reader in SwiftUI.
If you are interested, make sure to hit the notification bell
so you don't miss that video. In a meantime while you wait make sure to
take a look also at these two videos that I have over here I talked a lot
about iOS developments, SwiftUI and how to code smarter. So make sure to check
out these videos as well and as usual I will see you in the next one.