Everybody what's going on this is Caleb with slopes slopestyle.
And in this video we're going to create our X code project we're going to build the user interface of
our application and we're going to wire it up to the appropriate code files.
So go ahead and pull open X code click Create new project and click single view app.
All right.
Now let's go ahead and name this accelerometer Tron.
That sounds fun.
Boom.
Click next.
Click create and boom you've got yourself a project.
So go ahead and uncheck landscape left landscape right just because that's kind of what I want to do
in this app to ensure that we don't rotate and then lose our our accelerometer data or have to deal
with any kind of rotation.
But yeah that's fine.
So go ahead and open maynt storyboard and I'm going to actually delete the View Controller and replace
it with a table view controller so we just have one built in.
Because that's what we're using is a table view controller.
So in order to actually reflect these changes we should change this to say UI Table View Controller.
And I'll just name this list Table View Controller.
OK.
We're going to take that name and we're going to replace it in all of the required places like here
here and here.
And then if we go into main storyboard we can actually choose this and set its identity to our custom
subclass.
Beautiful.
So now what we're going to do is we're going to go ahead and pull this cell down a ways.
Actually let's just do it manually by making this 120 pixels high and then selecting the table view
and setting the row height to match 120 as well.
And now for each cell what we have to do is we actually need to drive drag in a UI image.
OK so dragging a UI image like so.
And go ahead and leave it at that.
OK that looks great.
And go ahead and constrain it.
Like this zero from the top left right and bottom.
And you know that's looking pretty good.
Now we need a label to go on top of that.
So go ahead and type UI label and drag it on top of the image view there.
Well no let's drag it up to the top corner and we're going to actually extend this label the entire
width of the cell and we're going to zero from all sides like so then go ahead and click on the Assistant
Editor center the text there and we're going to change the font to look much cooler.
So I'm going to choose Avenir next and I'm actually going to go ahead and choose heavy italic because
it's a cool looking font and I'm going to set it up to be maybe something like 50 points and it looks
pretty good.
Let's let's go ahead and set a background color of black and we're going to set the opacity down to
maybe 30 percent or so just to give us kind of like a peek behind the image behind it.
And we're going to set the font color actually to be white.
OK and let's just set this to say cameras and that's going to actually go in line with what we're about
to do.
So now that we have our label and our image view properly in there we need to add our assets.
I have six image files that you need to take from the source code.
There is an assets folder download and you can drag in these six images.
And if we want to look through them here we've got the first image here is a nice photo of a camera
a city an animal or a buffalo or a bowl or something some flowers.
We've got a nice flower stand in a city and a cool urban scene.
So what we're going to do is we're going to go into our storyboard here and choose the imagery and just
give it number one.
OK the camera.
But this is where things get interesting.
If I set aspect Phil what it's going to do is it's going to pinch the image on the left and right sides
and let it fill the whole frame of the cell.
But what if I wanted to move my phone around right.
I could only move it up and down.
And the image would slide a parallax effect lets you move in any angle to view a different piece of
the image.
So instead of doing aspect Phil and actually going to do Center.
And it does zoomed in quite a bit.
If you want you could resize the images but if it's centered and zoomed in like this it's going to allow
us to move in all directions and that's why we're doing that actually.
So now what we need to do is we need to go into the subclass here list table view controller and we
need to go ahead and link everything up with Iby outlets.
So go ahead and open up your assistant editor get rid of did receive memory warning and you know what
the cool thing is since this is a table view controller.
We don't need to conform to table view delegate or table view data source.
And we also don't need an outlet for our table view it's already here.
But what I can do is I can go ahead and say hey table view delegate equals self table view data source
equals self and if I do that it's not going to give me an error because I'm using the table view controller
subclass.
But if I want to use this table I'm going to need a few things right.
I'm going to need a number of sections in table view.
And we actually need to override that.
And for our sections we're just going to have one K one section of row so return 1.
Then we're going to have number of rows in section K and this is going to be a number of a number of
cells.
We'll get to that later.
Then we're going to need cell frough an index path.
And this is where we're going to return a configured cell with image and name.
OK.
So like we'll have an image and we'll return a name like cameras.
OK.
Very very cool.
You know what guys this is all we need to do to set up this view controller but we need to go ahead
and move on to the next video where we're going to go ahead and create the parallax cell subclass and
we're going to go ahead and wire that up as well then configure it here on our table view.
So let's go and head over to the next video where we're going to do that now let's build our parallax
cell.
I'll see you there.