Hey you guys have to go on this is Caleb with Debb slopes dot com.
And in this video we're going to build out the feed the sea and the group's Visi which if you remember
from our simulator Let's go take a peek.
Let's sorry.
Let me log in to my account here.
OK we're going to log in.
Very cool.
The feed we see has a nice long table view here of every post that anyone has posted publicly.
And we're going to set up groups Visi so that we have a nice channel here where you can access all the
groups that you're part of.
Very cool.
And let's do it now pull open your X code project.
Lovely.
Very very good let's close that.
Let's stop the running so that we do not waste any memory.
And let's go to the main story storyboard.
OK.
Very cool.
And this is where we're actually going to start using our Tabar controller so you can zoom on over to
that.
And you know what there's something we need to do what we need to do first is we need to select the
document here and there's something that you can do that.
I actually just learned when I was starting to make this course is that you can set a global tint so
every button you add every tab bar button is set to the same tint which I thought was really cool.
And for all the buttons we're going to actually be using that teal color.
So go ahead and set that Teal 0 for ABC 5.
Set that to be your global tent.
And now as you can see the button here for the tab bar set to that global tent which is really cool.
You can of course change it but it's great for what we're doing in this course.
So now let's go ahead and build out feed Visi and to do that we're going to actually modify these View
Controller files so that they fit the name.
I don't like that this is just called first view controller that's boring.
So I'm going to change it to say feed visi.
This one I'm going to change to be groups VC and back in the board.
We of course need to change this because it still thinks that it's a first view controller.
It's not OK change that to feed Visi then we're going to change this two groups visi.
All right.
Very cool.
Not too bad.
And now what we can do is we can actually start building out the interface so get rid of these labels
that are provided by X code.
We don't need those and we're going to start in on feed's VC.
So go ahead and let's change the title here to say feed.
We're also going to set the image to be our feed tab icon.
Very cool.
And so now that will show up while we're at it let's go ahead and change second to say groups and we'll
also change the icon to be our group's tab icon.
Simple enough.
And you know what.
I thought that these looked actually cooler in green.
And so what we're going to do is on the tab bar the tent is blue like it like it we've set it to be
but we're actually going to change it to be green.
OK.
And you know you don't really notice that change until you go off the Tabar and selected again but they
are now green.
Now there's another thing we need to change and that is this Tabar is currently kind of a gray color.
We want it to be dark.
So select the tab control or tab and then for the bar tent set it to be that kind of light ish gray
color and you'll see it turns to that really cool gray suite.
So next up what we're going to do is we're going to dive into feed visi.
Let's go ahead and begin by actually setting the far this back background to be that light gray colors.
Well that looks good.
And if you're wondering that color is 4 1 4 5 5 0 and we're going to put a view up at the top here and
that's going to house all of our buttons.
So go ahead and type you I have you and you view drag it on and of course we need to resize it.
So go ahead and let's make this 70.
I think that looks pretty good.
Let's set the background to be that very dark black color.
OK.
Very cool.
That looks pretty good.
And now we need to give it a label and a button.
So let's do that now by typing UI label.
Drag one on here and center it.
That looks good.
Next we need a button.
Drag it on and you'll see because of the global tint.
The text color is already the right blue.
Very helpful.
Let's get rid of button and this is going to be to compose a new post.
So tap compose and you'll see it changes to the compose image like we want for these buttons on the
side we're trying to mimic a UI navigation controller we're not actually using one but we want to do
that.
And so we're going to set this actually to be 30 from the top and 20 from the right give it a fixed
width and height of 30 and pin that exactly in place.
Now we're getting some issues here because it appears that we are not properly pinned in our place.
What's the deal.
Oh of course we have not yet set constraints on this outer view so go ahead and pin this zero from the
left top and right and then give it a fixed height of 70 and you'll see the button goes back into its
spot and the constraints are perfect.
Next choose your label.
We're going to actually stretch it out here a little ways and we're going to center the font change
the color to that nice bright green and change the font.
To be Menlo.
OK.
Set it to be 18 and then change the words to say feed.
Very cool.
Now let's go ahead and let's pin this.
How do we want to do this.
I want it to be perfectly centered but I also want it to be perfectly in line with the button so to
do that I'm going to go ahead and select my label here I'm going to go ahead and select the alignment
button and pin it horizontally in the container.
Then I'm going to select the label and the button and I'm going to go ahead and give these the same
vertical centers.
OK.
Now to make sure this stays the same size I'm going to go ahead and give this a height and width that
is fixed.
And now we're good.
That'll stay exactly in its place.
We're actually going to replicate this later on.
And we're going to use it throughout our app.
So this is just a cool way to make a sort of a pseudo UI navigation controller type view.
OK.
Simple as that.
Now what we're going to do is we're going to drag on AUI table view.
And that is where we're going to Houghs all of our posts so drag it onto the view.
And we're going to scale it so that it fits the entire width of the view.
You'll notice though that it snaps 8 from the top and it won't actually snap on to this view.
That's because we have to do it manually using constraints.
So once you've stretched it out click the pin button and we're going to pin it from all sides but change
this eight to zero and watch what happens when you add four constraints.
It moves up exactly where it's supposed to be.
Very cool.
Now we're going to drop in a table view cell just like that.
We're going to stretch it so that it is 100 high and you know what we're going to actually modify this
custom Lee.
So that's good.
The row height is 100.
But we need to also set that in our table view to be 100.
Otherwise there will be differences.
OK.
We're going to come back to this cell later on.
We're going to actually build out the cell and change the colors at Image views labels et etc..
But for now this is great.
Let's leave it at this with one small change.
Click on your table view.
And we want to set the background of our table view to match the background that is now hiding behind
this.
So undo that Select the table view and scroll down.
Change the background color to be the lighter of the two grace and that's that.
Very cool.
If we build and run this now we should take a look and see if our feet is actually showing up the way
we want.
So build and run.
Let's see how it does.
Beautiful looks like our simulator is up.
We're switching over and look at that.
We get a feed.
Each cell is one hundred high we have a button a label and looks like these are stuck showing the wrong
color.
That is not what we want.
So let's go ahead let's head back and change this.
It appears that these are successfully showing it appears that these are good as well.
OK we have set our bar item.
OK that's good.
We have set these to look good our image tint.
That might be the problem.
Let's set that to green and let's try to build and run it again.
Let's see if that changes from the default blue to our appropriate green color much better.
OK.
Awesome.
So the tent and the text are now both the right green color.
We have an awesome table view here and now let's build out groups we see first of all we need to set
the identity here to be groups Visi we push enter.
It looks like it's still holding onto its name.
So let's go ahead and let's actually change this to groups.
Oh you know what.
It won't let us.
That's odd huh.
Interesting.
Well it looks like we're successfully setting its identity to groups we.
And it's showing up as a groups scene.
But for some reason we can't really seem to get rid of that second name.
Maybe that's just a bug in Interface Builder Let's check huh.
Interesting.
OK well you know what if we run into issues we can fix that later on.
But for now let's just go ahead and keep with what we're doing.
And you know what for this view controller we're basically going to duplicate what we have here but
we're going to change it and modify it so that it's four groups.
So I'm actually going to go ahead and copy this select this view controller and paste it.
And that's actually going to allow me to just kind of duplicate what I've already done.
The only thing I need to change is the constraints pinning it to the left top and right and giving it
a fixed height of 70 although it looks like that constraint carried over.
Ah yes.
So get rid of the one that says greater than or equal to 70.
And of course we're going to want to change this to say groups with the underscore of course.
And let's change the width to 70 or so maybe 100 so that everything fits awesome.
Now for groups we're going to give the ability to add a group.
So go ahead and we're going to change the image to add new icon and that will give us a nice little
plus button which is really cool.
Next we're going to add a table view just like we did here and you know what we're going to copy and
paste it to.
The nice thing is that we have not set up any Iby outlets or actions that could carry over and causes
problems.
That's why I'm doing this for now.
So go ahead and select your table view copy it select your other view controller and paste it and now
will just drag it into its perfect place and give it some constraints.
So pinnate zero from the left top right and bottom and that's that.
Let's go see if it works let's build and run and let's check to see if we have a nice lovely feed VC
and group visi.
OK.
Feed VC looks awesome groups.
VC also looks awesome.
Plus putten feed we VC looks good but I'm seeing a problem.
The inactive icon hides it's the same color as the Tabar So we need to fix that as well.
Let's go ahead and let's find out what the deal is.
So groups if we select this it appears that the selected image is good.
OK that's great.
It appears that the selected image is good.
The unselected image I believe the tent is supposed to be light grey.
Let's see if that works let's set it to our like gray here.
Let's move on and let's go ahead and let's check to see if that fixed our problem by changing it to
grey.
OK so that definitely changed the tint of the image.
We want it to be green.
The bartender we want to be grey and 0 in the overall tent.
Perhaps we want to be that like great let's give that a shot and see if that fixes the problem.
So no I did not fix the problem it looks like they're still hiding.
So let's go change it again.
Maybe let's try red.
Make it very obvious that it's the right color see if that fixes the problem.
OK it appears that does not solve the problem either.
So let's just go ahead and set this default and interesting.
So what is the deal here.
Looks like when we are selected that is the image.
The position is fine the image is fine.
Images also find yet they're all fine.
That looks good the background.
You know what Perhaps this is the problem.
Let's go ahead and let's try to set this to our dark gray color.
Let's build and run.
Let's see if that fixes anything for us.
OK.
No.
So interesting we're still having trouble here.
OK so let's go ahead let's change this Tabar to have a clear color in the background.
Change the tent back to that green and let's go ahead and let's try this again.
BuildOn run.
Whoops and run to the simulator of course and let's see if that fixed our problem this is really odd.
I did not have this problem before so you're kind of getting to see me solve this.
Like I would in real life.
Let's see if that fixed our issue.
And no weird even if I zoom in it appears that that is just totally not there.
Super weird.
We've given it.
I see the problem.
It's really obvious guys.
So I've set the image here.
I have chosen an image from the selected image but the bar item is still referencing that old first
image.
That's one of the dangers of using the pre-built projects from Apple.
Sometimes you forgot forget very simple things like that.
My goodness.
OK choose feed tab icon and now it shows up here.
Look at that.
OK.
Select groups and change second to groups tab icon.
Sorry guys that took far too long.
If we build and run now you can actually see that it is going to appropriately show up the right color
when not selected.
There it is.
And when selected it changes to the green icon.
My goodness sorry guys.
You probably were watching me going just fix it.
You probably saw it before me so I apologize for that but it's now fixed.
We have an awesome feed VC and groups Visi it looks great.
Let's go ahead and let's move on to the next video where we're going to create the profile of you controller.
We're going to add a new controller to the UI tab bar controller and we're going to make sure that all
the icons are working the way they're supposed to.
And let's go ahead and let's head over to the next video and let's do it.