Hey buddy what's going on this is Caleb with Deb's slopes dot com.
And in this video we're going to build out the interface for detail Visi which is the controller that
we are going to present in order to show our data show our ads by our items and hide our ads.
So let's go ahead and let's build it pull up an X code and in Interface Builder we're going to just
drag on a UI view controller like so and we're going to start by dragging on some you I image first
of all drag it on right there and we're going to just make it filled about this much of the screen.
That looks pretty good.
And let's go ahead and let's leave it like that.
Then what do we want to do.
Let's go ahead and let's pin it.
First of all zero from the left top and right.
And we're going to give it a fixed height let's do 400 So it's a nice even number.
Next up we're going to go ahead and drag on a label like so and copy and paste because just like before
we're going to have the name of the item as well as the price.
All right.
Next up we're going to drag on a view just like so.
There we go.
Whoops.
You view and stretch it to fill the screen.
That looks pretty good.
And let's go ahead and let's give this a really obnoxious background color and we're going to drag on
an obnoxious label as well to put in the center.
Because remember this is going to be our ad or at least representing what an ad would be if you're using
AdMob or another type of ad service.
That's where this would be.
So I just dragged on the label stretched it to be pretty big and centered the font.
I'm also going to set the line to be too just because of the message I want to write and I'm going to
up the font size.
But I'll wait to set the set that until I set the font.
Then beneath this we're going to add a button just like so and we're going to center it and then we're
going to copy and paste and add that button right below.
All right.
So now what I want to do is I want to actually put all of these in a stack for you.
So I'm going to hold shift and select all of them.
Then click the stack button just like that.
Now I'm going to go ahead and give it some spacing maybe of 10 between each item and you'll see it fits
pretty nicely.
So what I can do is I can go ahead and pin this just like so where it is 8 from the top 0 from the left
0 from the right.
And we're going to do eight from the bottom if it'll let us cool looks good.
So now let's go ahead and let's update these accordingly.
I'm going to select all of the chips all of the labels here like so you might have to use the document
outline and I'm going to change the font from system to Avenir next.
And now we're going to go ahead and make individual changes for the names so I'm going to make this
bold like so and I'm going to make it a little bigger maybe size 24 going to make it blue the same blue
color from before and I'm going to make this the same gray color from before the dark gray.
Now this is going to be item name.
Just like so this is going to be item price.
So I keep having that duplicate t problem with my keyboard and for the label I'm going to make say I
am an ad a very annoying ad cool.
And when I press enter it you'll see it takes up one line there I'm going to actually make it take up
to like so make it a little bigger a little beefier and let's go ahead and let's center this actually
the way it is and we're going to set a with constraint of 300.
Let's try that out.
It doesn't seem to want to.
Oh maybe that was exactly the same with let's try 200.
There we go.
Beautiful.
And I'm going to change the font to something even more obnoxious like heavy.
And let's try 36 now 36 is way too big.
Let's try.
Well let's just do it until it fits.
There we go.
18 is good.
And I'm going to make this bright red just because it's ugly.
D2 5 0 4 e.
There's an ad and for the button we're going to say buy this item for four and we're going to say whatever
the dollar amount is.
Obviously this will be changed as soon as we open the app.
And this one is going to be hide ads for 99 cents there we go.
So let's let's change.
I just cannot stand that system.
The going to change this to Avenir next.
And we're going to make the blue color the same as well just because I mean I really hate that blue
color.
There we go.
Looks a little bit better.
You know what I'm going to change the height of this.
I'm going to make it a little smaller.
And now everything fits very very cool.
So the reason I put this in a stack view is actually because when this ad goes away everything will
kind of automatically scooch up as soon as this is hidden which is pretty neat.
But I'm going to actually have to remove the bottom space constraint so that it actually can slide up
the way we want just like so.
So we have trailing top and that'll work for now.
Yeah that's good.
OK.
So now let's go ahead let's create the view controller file and we're going to use a touch class.
We're going to call this detail visi.
We're going to add it to our project and there we go let's get rid of this boilerplate nonsense and
this comment as well.
And now let's go set the identity of this controller and make that storyboard so click on that click
on your view controller and click on the identity inspector.
Choose detail ABC and press enter.
And now this is inexplicably linked to detail B see the subclass.
So let's go ahead and let's set this up by selecting detail Visi selecting automatic.
And you'll notice it pops up just like so and we're going to go ahead and start making some connections
here.
So right click and drag and we'll call this item image view with only one item image view.
Let's go ahead and let's do item label or maybe item name label.
It's a little more specific.
Hello.
Did not mean to drag that.
Let's go ahead and.
Right click from here and we're going to do item price label OK.
This is just going to be it we're going to do the view not the label.
I'm going to right click and drag and call this ugly ad view because it's pretty ugly.
Next it's going to be let's say an outlet for how about by item button.
And then we're going to go ahead and do hide
hide and button.
The reason we're doing outlets for these is because we're going to need to hide some of them or modify
the title based on the price of the item.
And so that's that.
Now we need to go ahead and set up our button Iby actions.
So right click and drag and we're going to just go ahead and change to action and just call by button
was pressed.
Of course I want to get that second tier out of there and click connect.
OK.
Next make an IB action for the hide ads button.
Go ahead and say hide ads button was pressed and make sure you change it to an action.
I always do that.
There we go.
I'm going to make some space for my codes.
And we're almost done.
We only forgot to add our close button.
So go ahead and click a button drag it onto your view controller right above the image of you there
and go ahead and drop it in place.
Now we're going to change the image from where we don't have an image but we're going to delete the
text and we're going to go ahead and find close button.
That looks pretty good.
So go ahead and set it here.
We're going to go ahead and pinnate zero from the top 16 from the left and it already has a set height
and width so I'm just going to go ahead and pin it there and leave it there.
So let's think did we miss anything.
We have all of our connections.
Oh we didn't connect our close button.
Hello.
Right click and drag.
Go ahead and create an action here and just call Close button was press to ours.
OK.
There we go connect that.
And with this button we can just go ahead and call dismiss animated true and completion is nil.
Super awesome and super easy as well.
We're not going to be able to present this and test that the dismissal just yet.
We will be able to.
But we're going to go ahead and move on to the next video where we're going to set up our table view
here or a collection view I mean to present some static data.
We're also going to basically use that static data to fill our collection view and we're going to set
up did select item an index path so that we can present that view controller with our information.
Very very cool.
Let's head over to the next video and let's get started on that process.