Yo what's up everyone Mark Bryce here at Dover slopes dot com and in this exciting section and video
we're going to start building a brand new app called coater swag and basically the idea of the app is
it's a online store where you can purchase clothing and other items that are programming related.
You know like kind of like our Web site coater swag can go and purchase cool slope swag and stuff.
Anyway let's we're building we're building the app version of it.
And what you're going to learn is you can learn all about table views and collection views basically
how to show lists of data and that's really important because pretty much every app in the world of
any value has to show some type of data whether it's a game like clash Royale where there's a chat room
and showing different pieces of data to your favorite apps like Facebook where it's showing different
people's post those are all types of lists of data.
And so is a core foundational principle.
Let's go ahead and get started.
So first things first we're going to do some good stuff.
So what I'm going to do here is we're going to go into the appropriate directory CD section 5 for me.
You can put this wherever you want.
If you are cloning your own repo you would go to a big bucket or get the a repository and copy that
clone you RL like I have done so here just to show you I've got this new Israel for this brand new repository
that I am bringing in over here.
And what I'm going to do is just clone it down and show what straight from there so.
So here's the A C coder swag project.
Fantastic.
And what we're going to do is first create an X called Project and then we're going to make the X code
project the repository that will push up to.
So let's open up X code beta and or the X code 9 release.
If it is released at this point in time and we're going to create a new X code project single view app
is just fine and we're going to call this code or swag.
And we're not going include any of these just yet.
So we'll leave those unchecked and we're going to put it right here.
Perfect.
Here's our project if I go back to my terminal we should see something in there which we do.
So CD coater swag where you go into the directory and to do it to initialize it as a repository and
then get a remote add origin.
That's what I'm calling my Orjan and I'm putting in the euro.
OK.
So when I do get status now we have some red which is good.
New files get at Dash a get commit dash em and we're going to call this initial commit and get check
out the dash be less than 0 1.
We are creating new branches for all of our lessons here.
You don't have to do that you can create your own branches for features but it's good to have get going
for you.
So now that we got all the setup out of the way let's go ahead and actually start building the project.
So first things first is a little bit of cleanup.
I was cleaning up the view controller as you know we want to make things a purpose and have names.
So and sort of you control we're going to right click and go to rename and we're going to call this
category category B C categories B C category B C categories b c I like that better press enter.
Because again look at the picture there.
We've got categories here.
All right.
And let's talk about that a little more.
So what we have on the screen here is some type of label probably this is what I like.
I like to do when I get the Zions I kind of like to just break it out of my head.
What are these belong to in Interface Builder.
So we've got a label here.
We've got some items here and I know from experience that these are going to be Table View cells.
So this is a cell.
This is a sell sell sell.
And inside of it there's a background image on each one and there's some type of label in the middle
here to describe what it is and then appear with that probably a navigation bar.
So basically when you drill into one of these you could press a back button on the top left and would
take you back and that's the functionality of a navigation controller which is part of the BIOS.
So that's kind of a good overview of what we're going to be doing so let's just mosey on over and do
that.
So I mean storyboard here.
While I also know from experience that I probably want to start off with the navigation controller if
everything's going to be navigating from screen to screen you might as well just get it started.
So what you can do is categories be selected go to editor embed in navigation controller and what you're
going to see here is a new view controller pop up on the screen and then zoom out a little bit here
for you.
Category's B.C..
OK.
And the navigation control I get to put it over here on the right hand side.
So the starting point of the app see this arrow here.
It means that that's the starting view control is actually going to be the navigation controller.
OK.
And on this navigation controller comes with the navigation bar.
So if we look at our image again we know that the navigation bar is this nice red color.
So let's go ahead and see what color this is.
Eighty seven thirty nine forty OK.
Eighty seven thirty nine forty.
So I'm going to go to the navigation bar and on the tent 87 39 40
and it doesn't look quite right.
So I'm a click this navigation bar again and see how the translucence selected I want to turn that off
I don't want it to have that translucent look too I just want it to be more solid so it looks like the
actual window that the designer picked.
OK.
So we got a navigation bar and not automatically said on the categories b c that's because a navigation
controller OK.
It's going to have it's going to host multiple controllers is going to push them on the top push them
on the top push and pop push and pop like a stack.
OK.
And and then they're all going to share a navigation bar and they'll have a title and things like that
as well too.
So really cool.
And what we're going to do here also is this title color.
OK we're going to make it white.
So select white for the title color and then what we can do is on the View Controller here.
The categories Visi see this navigation item you can see this title here.
If you have this item selected here the attributes inspector and you can get a title here.
And if we remember right this coder swak.
So now it's black here which is not the right color but at runtime it will be white because we've said
it to be white.
So this is looking good.
We've gone a little bit in the right direction so far.
So look at it again.
Next thing I want to do is add this label here and it'll square and do that now I'm going to minimize
this a little bit to minimize this.
We can see both.
I like having it visible in front of me as I'm working so I don't have to go back and forth.
OK.
There we go.
It's looking lovely.
OK.
And I've just closed off the navigator on the left hand side.
So we need a label here so let's do that.
So type in the word label at the bottom right.
And the object library and there's a label and it looks like it's a little bit further from the top
just by style wise so that's fine.
Make it a little bit bigger here.
And I'm going make it say shop by category and the attributes inspector.
It's a little bit too small.
And then what I also want to do is I want to I want to move it down give it a different font so it looks
more like the one in the picture.
So let's go to font and change it to Avenir.
So from system to custom and from Helvetica new way you knew we you didn't know how to pronounce shipwright
learned Avenir book book.
Yeah I think book is a good color or a good style.
I'm going to click done and it looks OK.
So what we do is I'm going to pin it I'm going to select the label click the pin menu and zero from
the left.
Make sure constrain the margins is on and 25 from the top.
That looks about right.
I'm going to click that.
And there we have it looks pretty good.
It might be a little bit too close adjusted too.
From 25 to 30.
There we go.
Cool.
Next thing we need to do is actually create a table view.
So let's do that.
Type in the word table and you're going to see a few things here.
You're going to see Table View Controller Table View table view So what are all these things.
Well a table the controller is actually a view controller all by itself that has a prototype cell on
it and it does a lot of management for you and you may be tempted to do this like oh Mark why don't
I just use this instead of dragging a table view onto the screen.
Let me tell you from professional experience almost in every single case in any app I've ever built.
It's never a good decision to build a table view controller to use Apple's default implementation it
because you often need custom ability.
OK.
And so I'm going to I'm not going to teach table controllers.
We're just going to talk about building custom table use which is what you're going to use anyway in
most cases so you can use this if you want if you want simple some simple functionality or you want
to live within the restrictions of a table view controller.
But we're not going to do that.
OK.
Because we want custom ability.
So I'm gonna delete that and said what we're going to do is we're going to drag a table view on to our
view controller like so.
OK.
And I'll put it right about here.
Now we know from the image that the table view actually goes to the edges of the screen.
So that makes our life easy to the edges and to the bottom.
So from edge to edge and then down to the bottom and click the pin menu and we'll say 16 from the top
zero from the left zero from the right and the bottom we're going to say zero as well at four constraints.
Perfect.
Wonderful.
So there's our table view and I like it looks good.
The next thing we're going to do is we're actually going to build a cell a table cell right and center
table for you.
Now if you didn't work with us before you used to have to create a zip file an external file where you
defined your table view cell and then you would load it dynamically at runtime which you can still do
and in fact in the def slopes app that we have we have a few places where we're actually loading a cell
from a zip file.
And there's there's particular reasons for it.
We needed extreme custom ability and we needed it dynamically at runtime.
And also one other thing to point out sometimes when we have a very large app your storyboards can get
really big and they start to run really slow.
Ok really really slow.
So let's say you had 10 different views on here or controllers that all had table views and you hand
built your table cells all in here your storyboards going to start running really slow depending on
what computer you have.
So sometimes it's nice to break things out into their own files so it's not so you're not a slow or
you can have multiple storyboards.
In our case a simple table view cell built right in here is going to be just fine.
So what I'm going to do is take this table B-cell and we are going to drag it into the table view.
Now you couldn't drag it on there unless there was a table view there first.
OK.
And so one thing I want to point out is this word prototype sells that's not going to appear when your
app runs so don't worry about that.
And what's important is what's inside this White space right here OK.
So what we're going to do is we're going to make this look like the image on the left hand side is going
to drag it down.
I'm just eyeballing it here.
What I think that image size is the designer did not give me its exact pixel dimensions here.
And so I'm not going to worry about it I'm just going to eyeball here.
So we got this cell here and we know that we're going to need some type of image.
So I'm going to go down to the object library and type in the word image.
Now I want to drag that on here inside the cell.
This is very important.
If you notice here on the left hand side you see a nested hierarchy Table View table view cell content
view image make sure that your image view and all the things inside your cell are here on this content
view table view still has a base view which is what you'll put your things on here.
OK.
So what we're going to do is we're going to drag this to the edges of the cell line it up where it's
supposed to go like so.
And then we're going to pinnate So 0 0 0 and that of negative point five will say zero.
So it goes to all the edges and corners there and then we'll go ahead and send an image here just so
we can kind of see what it looks like.
But I guess we can't do that because we haven't dragged them in so let's grab all of our assets now
and drag them in and then open up the navigator here and let's go find our assets.
So I must let the assets folder and the what I'm going to do.
You can see the images right here.
I mean it's like all my images and I'm just going to drag them over here to the project shirts hats
things like that.
Done deal.
Now what we're going to do is go back to our store board and on this image of you we're going to select
the digital image.
And of course it's stretched.
And even if it wasn't stretched make sure you always always always change just to Aspect fit or aspect
feel.
In our case we wanted to fill the screen here so it looks good there.
So it looks good to me.
And the next thing we're to do is grab a label type in the word lab for label and we're going to drag
it in the middle of the screen and it can make it a little bit bigger a little bit wider there.
Because I know it may be larger than it is right now.
So it's this label it's really black hard to see.
So first off let's change the color to white and it looks like it's all caps and also has a thicker
font so we're going to go from system to custom.
Keep it consistent with Avenir and let's change it to heavy perfect and make it actually and make it
size 20 and it's called this at Slate Hoodie's it doesn't matter what we put here we're just kind of
eyeballing it to make sure it looks nice center the text and let's see how it looks.
I think it looks pretty good.
So let's go ahead and do a few things.
Let's go ahead and just give it a fixed let's give it a fixed width and height just for now you know
it didn't look good on a smaller phone we could go do some work have some constraints.
But I think this would be good for now.
And what I also want to do is click the align menu and just do it horizontally and vertically in the
container.
OK.
So keep in mind that's not inside of the image it's actually outside the content because you can't drag
other views on top of an image view.
And so there is our prototype cell and what a prototype cell is is basically you're designing out your
cell.
How it's going to look and then in code you replace the images and the labels and things like that.
Now I'm looking at this image a little more and I think that it's still a little too small.
And so that's an easy fix.
So what I want to do is on this table you sell here just to make it a little bit bigger.
Like so yeah it looks nice.
And then one thing just out of habit that's important to do is let's go to our digital image here and
let's make sure clip two bounces on.
We don't want it to bleed over.
OK.
So this looks good.
Now let's go ahead and hook some things up here we know that we're going to need an Ivy outlet for table
view.
We know we're going to need it.
I'll be out in it for these cells here.
But how do you do that how do you even like work with cells and I.V. outlets and fill the labels out
and all that stuff.
Well it's going to require a little bit of setup first so let's go to our project over here and create
a new group here.
We'll call this controller with the controller files and we'll create one for modeling for views.
OK.
Now of course we're using model view controller NBC and some of you some of your more adventurous new
developers out there are hearing things like what's MVB em and what's re-active programming and should
we even be doing model view controller we're about protocol oriented programming or functional program
what are all these things more why are you dodging these things.
Should be teaching this and that.
Well let me just tell you something.
Most of the control has been around for a long time and like ninety nine point nine percent of all the
apps that are being built right now in the professional industry are using MVC you're not seeing large
companies completely adopt protocol or into programming or functional programming or are x swift with
reactive programming or nvm like those are some cool upcoming design paradigms but it's mostly the hipsters
use that stuff right now.
So hipster.
Be cool.
You can experience those things.
Do your own projects.
It's great but we are teaching the foundational principles that are actually out there in the business
world right now.
Not to say those other design principles aren't good and will be happening in the future.
We're just all we're still on NBC now.
So model controller and view great and going to drag the categories b c into the controller folder like
so and then in the view folder what we need to do is anytime you're working with a table view and a
table cell you have to create a custom class for that cell.
Otherwise you can't assign images and put labels and things in it and had the cell have custom functionality.
So we're going to be good programmers.
OK and we're going to create a custom class that can have a reusable cell over and over again that we
can populate with data.
So in this view folder we're going to go to New File Coque touch class and subclass of table cells what
we want and let's call this category cell K category so that looks good.
And I click Create
category so perfect it edited it right here.
So what we're going to do is we're going to add some outlets and this time we're going to do a little
bit differently than we've done in the past.
We're going to hand-code these outlets and I find myself doing this a lot more often because sometimes
store rewards are really slow and you're already in the code and it's just easier to do it while you're
here and then go back and connect them later.
OK.
So plus the the assistant editor where it splits the screen that makes things really cluttered.
So we're going to say at Iby outlet we are and what to IBM let's do we need on our cell.
Well we need the background image so we're going to say category image of type you image view.
Exclamation point is going to be an implicitly unwrapped optional.
I mean we're guaranteeing it's going to be there.
And at IBM it weak bar and we're going to say category title and this is going to be of type I label.
OK.
So there's two ip outlets there one of type category image and one type category title.
OK.
So let's go back to our storyboard and I'll show you how you can connect those up since we did it in
code.
All you have to do OK is go to your table view cell right here.
Change the class OK.
See this little icon here the identity inspector.
Change the class to category cell.
OK now click this category cell again on the left hand side.
And if you right click it you will now see category title and category image right here.
And all you have to do is literally drag it over and drag it over to the label.
Now you're probably seeing some other things.
A background view editing a review.
There are some other default properties that table view cells have that you can set.
We're just not using them right now.
And we don't need them.
These are two custom IAB outlets and they are now connected.
OK.
The last thing I want to do for this video is just create an outlet for our table view.
So in our categories ABC Let's create an outlet at the outlet bar and we're going to call this category
table type table view.
And do you remember earlier how I said you could create a table view controller.
Well what the table view controller will do instead of inheriting for you have you control your entire
class here's a table table view controller and an already implements things like table view and the
functions that you need under the hood to connect the table view up.
But again it has limited ability when you want to have a fully customized out.
So we're doing things the way that most companies and developers do which is creating custom custom
you have a controller with a table view on it.
So there's a table view and last thing here is let's just go ahead and let's go ahead and connect it
up in the main storyboard here.
So on our view controller you right click and you see the category table simply drag it over and see
how it notices which things are which That's really nice so just drag it over and it's now connected
it.
This is kind of cool the presenting Segway is showing a relationship between the the the view controller
presenting it which is the Segway So you know that it's inside of a camera inside of a view controller
here.
So let's just go ahead and run it just for fun and see if we get any crashes or see if it works or what's
going on all together.
OK.
There it is.
And you're probably running wondering Mark is at broken.
Well it's not broken.
It's just.
Why do you think it's not working.
Any ideas.
Let me tell you a couple of things.
First off it definitely is working.
We just haven't finished the functionality so immature image here it's not showing up because that was
just a prototype We're just saying this is what we wanted to look like when it's actually working.
But the reality is we are not feeding the table view with any data at all.
There's no data anywhere.
Like we don't have titles and image names coming from anywhere.
Like think about it how would you specify an image for each of these cells would we create 10 prototype
cells if there's 10 cells.
No table views do not work like that.
So here's here's something really important understand about Tator and data and collection views and
table views is that when you have a group of data that you would display in a table what you do is you
create a view that can be re-used and you reuse it and create as many as needed based on the data that
you have.
So a lot of apps what they'll do is they'll go download a list of things from internet from a server
let's say a list of categories and images and then you're your apple take them and store them in an
array for instance.
And then what you do is you say my table view should have you know as many rows as there is items in
this array.
And then you take each item out of the array and you display it dynamically into the table views.
And that's what makes an efficient application.
And you really can't really can't do that effectively without basing it on the data.
I mean you can you could use a scroll view for instance and then you could load up items dynamically
on it.
And there's one for each one you may have to custom code each one but it's not the right way.
So this is the right way.
And there's a lot to learn about.
So we're going to call this video done.
And then the next exciting video you're going to learn how to get a table you'd actually think and how
to work with data the ways that the pros do.
So when you go to apply for jobs or build your own apps you doing it the right way.
So that's it for now.
Marc price of slopes dot com.
See you soon.