Hey buddy what's going on this is Caleb with slopestyle.
And in this video we're going to start building the user interface of our application.
We're going to set up a UI Tabar controller and we're also going to import all of the assets you're
going to need in order to build this app all of the graphical assets for icons and images and everything
like that.
So let's go ahead and let's pull open our storyboard here in our project and to begin what we're actually
going to do is go up to the editor tab in the menu bar and go down to embed in.
And you can see right there tab bar controller but it's not accessible unless we select a view controller
to embedded into first so select that you controller select editor embed in and choose tab bar controller
and watch what happens.
It turns it into a tab bar controller.
Now you'll notice there's only one view controller but in the finished project there were two.
So let's go ahead and let's zoom out and let's set that up.
Now go ahead and drag in another view controller like so and you know what let's move this up and out
of the way let's bring this up a little ways.
And what we're going to do is we're going to right click and drag from the Tabar controller to this
view controller and we're going to go down to relationship segues OK.
Click on View controllers and it's going to add this Visi into the list of new controllers that this
Tabar controller manages.
OK that's really easy.
And with that believe it or not we're done.
Our Tabar controller is set up and now this Tabar controller can switch between these two controllers
simply by tapping on the tab bar button.
Now this view controller if I'm not mistaken is inheriting from are initially created view controller
class K we're actually going to rename this trending feed Visi like so.
And I'm going to go ahead and just copy that.
We're going to need to paste it here pasted here and go back to my storyboard and for the identity of
this view controller we're going to replace trending feed visi.
Now we need to set up a view controller file for this because as you can see it doesn't have an identity
doesn't know who it is.
So let's do that now.
So go ahead and right click on controller click new file Cocco touch class and it's going to be a subclass
of view controller obviously.
And this is going to be our search view controller.
So go ahead and type search Visi and that's all we got to do press.
Next make sure that it is added to the proper target and click Create just like that.
Now go back to main storyboard.
Select this controller for the identity we're gonna set search the seat.
So that is that.
Now we have a trending feed VC and we also have a search Visi which is really neat.
Now of course these are squares.
They're not the images we want.
And so with that in mind we're going to go ahead and import our assets now so click on the assets folder
and then pull open the assets you download it in the source code which you should have downloaded at
the very beginning of this section and go ahead and select all of them drag them in and you'll see that
we get all kinds of cool images.
For instance we get a cancel button we get the contributor's icon downloads icon language the search
icon.
The small search icon and the trending icon there's all kinds it's really neat.
And we can go back to main storyboard and I'm just going to show you that we can access these if I go
into this Tabar controller and go to the attributes Inspector I can change the image when it's selected.
I can set well which one is this yet trending feed.
See I can choose trending icon and as you notice the trending icon shows up right there.
That's pretty neat.
Right.
We can do the same thing with this one.
We can change this to the search icon small and you'll notice it updates to the search icon which is
perfect.
Now of course we need to change the name for these so let's just go ahead and use all caps because that's
kind of trendy right now and we're just going to say trending OK.
That's great.
And let's go ahead and scroll all the way down to our search icon here and let's just say search.
Very cool.
And you know what it looks like the words are a little bit low so we can do a custom offset for the
title.
And let's set a vertical set of maybe minus minus four.
That looks good that way they're nice and snug to one another.
We'll do a custom offset here of minus four as well.
Really cool.
And you know what.
This is pretty good.
Now I'm noticing this is the selected image right.
Meaning when the actual tab is selected it's going to show this.
But we need to set a default image as well.
So select trending icon and you'll notice that updates the icon over here.
OK so that's when it is not selected.
Now we need to do the same thing with this new controller set search icons small and you'll notice since
it's de-selected by default it's going to show up gray which is exactly what we want when it is selected
it's going to be blue when it's not selected it's going to be gray and that's pretty neat.
So as far as we're concerned this looks pretty good.
Let's go ahead and let's build and run this to a simulator device and let's see how it looks.
We should be able to select both of these and change the view controller independently.
Oh you know what why don't we change the background color here so we can actually tell.
I'll do blue here and yellow for this one.
Let's stop that and let's build it again.
Here we go.
It's got to compile all of the cocoa pod so that might take a little while but Aliko can speed up the
section and then when it's done building we're going to check it out in the simulator
ok cool build is succeeded.
That is a good sign and here's our simulator.
It's going to go ahead and load up and we will be able to tell if what we did worked.
OK let's check it out.
Here we go.
Should load trending Visi from the get go.
There we go we've got our blue background and when I click on search should load up our yellow visi.
There we go.
Look at that.
When it's selected it's blue.
When it's not selected it's gray and we can alternate between our view controllers just like that.
It's that easy.
Amazing job guys.
And in the next video so hadn't quit the simulator here in the next video we're going to start building
out our trending feed.
We see this blue on here.
We're going to go ahead an ad on the table view.
We're going to drag on a cell.
We're going to connect all the IP outlets and get it all set up to go with our swift.
I'm really excited so let's go ahead and head over to the next video and let's get started right now.