[MUSIC] Yo, what's up everyone? And in this exciting section and video, we're going to start building a brand new open called CODERSWAG. 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. And what you're going to learn is you're going to 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 it's showing different pieces of data, to your favorite apps like Facebook where it's showing different people's posts. Those are all types of lists of data and so is a core foundational principle, let's go ahead and get started. And we're going to create a new Xcode project, Single View App is just fine and we're going to call this coderswag. And we're not going to include any of these just yet, so we'll leave those unchecked, and we are going to put it right here. Now that we got all the setup out of the way let's go ahead and actually start building the project. So, first thing first, is a little bit of cleanup, I'll just clean up as ViewController. As you know, we want to make things have purpose and have names, so instead of ViewController we're going to right click and go to Rename and we're going to call this CategoryVC. CategoriesVC, CategoryVC, CategoriesVC 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 this screen here is some type of label probably. This is what I like to do when I get designs, I kind of like to just break it out of my head, what do 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 cell, cell, cell, 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 up here we've got probably a navigation bar, so basically when you drill into one of these you could press a Back button on the top left and it would take you back and that's the functionality of a navigation controller which is part of IOS. So, that's kind of of a good overview of what we going to be doing so let's just mosey on over and do that. So, Main Storyboard here, well I also know from experience that I probably want to start of with a Navigation Controller. If everything's going to be navigating from screen to screen we might as well just get it started. So what you can do is here are your CategoriesVC 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, I'm zoom out a little bit here for you, CategoriesVC, okay, and then Navigation Controller, I'm going 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 Controller, it's actually going to be the Navigation Controller, okay? And on this Navigation Controller it comes with a Navigation Bar. And 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 87, 39, 40. Okay, 87, 39, 40 so I'm going to go to this Navigation Bar then on Tint, 87, 39, 40. Okay, and it doesn't look quite right so I'm going to click this Navigation Bar again and see how the Translucent is selected? I want to turn that off, I don't want it to have that translucent look too it, I just want it to be more solid so it looks like the actual window that the designer picked, okay. So we've got a Navigation Bar and notice how it will automatically set it on the CategoriesVC? That's because Navigation Controller it's going to host multiple View Controllers, it's going to push them on the top, push them on the top, push and pop, push and pop, like a stack, okay? And then they're all going to share a Navigation Bar and they all 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 we're going to make it white, so select I white for the Title color. And then what we can do is on the View Controller here the CategoriesVC see this navigation item? You can see this Title here, if you have this item selected here are the Attributes Inspector and you can set a Title here. And if we remember right, it says CODERSWAG, like so. Now, its black here which is not the right color but at runtime it'll be white because we've set it to be white. So this is looking good we've gone a little bit in the right direction so far. Let's look at it again. Okay, next thing I want to do is add this label here and so let's go ahead and do that now. I'm going to minimize this a little bit and minimize this so 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. Okay, there we go, it's looking lovely. Okay, 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 in 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 to make it say SHOP BY CATEGORY from the Attributes Inspector, it's a little bit too small. And then what I also want to do is I want to, let's move it down a little bit, 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 Neue, I don't even know how to pronounce that, I should probably learn it. Avenir, Book, the Book, yeah, I think Book is a good color, or good style, so I'm going to click Done. And that looks okay. So what I'm going to do, is I'm going to pin it I'm going to select the label click the Pin menu and 0 from the left, make sure Constrain to Margins is on, and 25 from the top that looks about right, so I'm going to click that. And there we have it, looks pretty good. It might be a little bit too close I'll just adjust it from 25 to 30. There we go. Cool. Next thing we 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 View Controller is actually a View Controller all by itself that has a prototype cell and it does a lot of management for you. And you may be tempted to do this like, Mark why don't I just use this instead of dragging a table view onto the screen? Well, 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 of it because you often need customizability. And so I'm not even going to teach Table View Controllers we're just going to talk about building custom table views which is what you're going to use anyway in most cases. So you can use this if you want, if you want some simple functionality or you want to live within the restrictions of a Table View Controller, but we're not going to do that because we want customizability. So I'm going to delete that and instead what we are going to do is we are going to a drag Table View onto our View Controller like so, 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. I'm going to click the Pin menu and we'll say 16 from the top, 0 from the left, 0 from the right and the bottom we're going to say 0 as well, at 4 constraints, perfect. Wonderful, so there's our table view. And I like it, it looks good. The next thing we're going to do is we're actually going to build a cell, a table-view cell right inside our table-view. Now, if you've ever worked with IOS before, you used to have to create a zip file, an external file where you define your table view cell, and then you would load it dynamically at run time, which you can still do. And in fact in the dev slopes app that we have, we have a few places that we're actually loading a cell from a ZIP file. And there's particular reasons for it. We needed extreme customizability and we needed it dynamically at runtime. And also, one other thing to point out, sometimes when you have a very large app, your storyboards can get really big, and they start to run really slow. Okay, really, really slow. So let's say you had ten different views on here, or controllers, that all had table views and you hand built your table view cells all in here. Your storyboard's 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 your app's not as 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 view 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. And so one thing I want to point out is this word prototype cells, 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. So what we're going to do is we are going to make this look like the image on the left hand side. So I'm going to drag it down, I'm just eyeballing it here, to about what I think the image size is. The designer did not give me exact pixel dimensions here, and so I'm not going to worry about it. I'm just going to eyeball it 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, and now I'm going to drag down on here inside the cell. This is very important. If you noticed here on the left hand side, you now see a nested hierarchy, Table View, Table View Cell, Content View of image. Make sure that you're image view and all the things inside your cell are here on this Content View. The Table View Cell has a base view which is what you'll put your things on here. Okay 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 pin it. So zero, zero, zero, instead of negative point five we'll say zero. So it goes to all the edges and corners there. And then we'll go ahead and set 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. I'm going to open up the navigator here and let's go find our assets. Okay, so I'm going to select the assets folder. And then what I'm going to do, you can see the images right here, I'm going to select all my images. And I'm just going to drag them over here into the project. Shirts, hats, things like that, okay? Done deal. Now what we're going to do is go back to our storyboard, and on this image view, we're going to select the digital image. And of course it stretched, and even if it wasn't stretched, make sure you always, always, always change this to aspect fit or aspect fill. 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 going to do is grab a label, type in the word lab for the label, and we're going to drag it in the middle of the screen, and I'm just going to 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 says 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 it has a thicker font. So we're going to go from system to custom, keep it consistent with Aveneer, and let's change it to heavy, perfect. And make it actually, let's make it size 20, and let's call this, let's say hoodies. 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 fix. Let's give it a fixed width and height just for now. If it didn't look good on a smaller phone, we could go do some more custom 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. So keep in mind that's not inside of the image. It's actually outside the content view, 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 to small. And so that 's a easy fix. So what i want to do is on this table of view cell here, I'm just going to make it a little bit bigger. Like so, yeah that looks nice. And one thing out of habit that's important to do. Let's go to our digital image and make sure clip to balances on. We don't want it to bleed over. Okay, so this looks good. Now, let's go ahead and hook some things up here. We know that we're going to need an IBL lit IV table view. We know we're going to need an IBL lit IV D cells here, but how do you do that? How do you even work with cells and IBL 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 into our project, over here, and, create a new group, here. We'll call this controller, to put the controller files in. We'll create one for model and for views, okay. Now of course, we're using model view controller, nvc. And, some of you, some of you more adventurous new developers out there are hearing things like, what's MVVM? And what's reactive programming? And should we even be doing model view controller? What about protocol oriented programming or functional programming? What are all these things, Mark? Why aren't you teaching these things? You should be teaching this and that! Well, let me just tell you something. Model view controller has been around for a long time. And 99.9% 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-oriented programming, or functional programming, or RX Swift with Reactive programming, or MVVM. Those are some cool upcoming design paradigms, but it's mostly just the hipsters using that stuff right now. So if you want to be a hipster and be cool, you can experiment with those things. Do it on your own projects, that'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 still on MVC now. So model, controller and view. Great. And I'm going to drag the categories VC into the controller folder like so. And then in the view folder what we need to do is any time you're working with a table view and a table view 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 have the cell have custom functionality. So we're going to be good programmers, okay, 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, Cocoa Touch Class, and subclass of UI table view cell is what we want, and let's call this category cell. Okay, category cell, that looks good. And I'm going to click Create. Category cell. Perfect, it added it right here. So, what we're going to do is we're going to add some IB outlets. And this time, we're going to do it a little bit differently than we've done in the past. We're going to hand code these IB outlets. And I find myself doing this a lot more often, because sometimes storyboards 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. Okay, so plus the the assistant editor where it splits the screen, it makes things really cluttered. So we're going to say at IB outlet weak VAR, and, what two IB outlets do we need on our cell? Well we need the background image. So we're going to say category image of type UI image view, exclamation point. It's going to be an implicitly unwrapped optional, meaning we're guaranteeing it's going to be there. And at IBOutlet weak var, and we're going to say categoryTitle. And this is going to be a type UILabel. Okay, so there's two IBOutlets there, one of type categoryImage and one of type categoryTitle. Okay, 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, okay, is go to your Table View cell right here, change the class okay? See this little icon here, the identity inspector? Change the class to Category Cell. Okay, 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. Okay, now you're probably seeing some other things, background view, editing accessory view. 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 our two custom IBOutlets and they are now connected. Okay, the last thing I want to do for this video, is just create IBOutlet for our table view. So in our CategoriesVC, let's create an IBOutlet, @IBOutlet weak var. And we're going to call this categoryTable, type UITableView. And do you remember earlier how I said we could create a Table View controller? Well, what the tableview controller will do, instead of inheriting for UIViewController your entire class here is a table Table View controller. And it 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 app. So we're doing things the way that most companies and developers do which is creating a custom UI view controller with a Table View on it. So there's our Table View. And the last thing here is let's just go ahead and connect it up in the main storyboard here. So on our view controller you right-click and you now see the category table. Simply drag it over, and you 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 cool. The Presenting Segue is showing a relationship between the view controllers presenting it which is the segue. So you know that it's 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. Okay, there it is and you're probably wondering, Mark is your app broken? Well, it's not broken. Why do you think it's not working? Do you have any ideas? Let me tell you a couple of things. First off, it definitely is working. We just haven't finished the functionality so this image here, it's not showing up because that was just a prototype. We're just saying this is what we want it 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. We don't have titles and image names coming from anywhere. Think about it. How would you specify an image for each of the cells? Would we create ten prototype cells if there's pretend cells? No, table views do not work like that. So here's something really important to understand about 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 reused 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 the Internet, from a server. Let's say a list of categories and images. And then your app will take them and store them in an array for instance. And then what you do is you say my Table View should have 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 it an efficient application, and you really can't do that effectively without basing it on the data. I mean, you can. You could use the US 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. And so this is the right way and there's a lot to learn about it. So we're going to call this video done and in the next exciting video, you're going to learn how to get a Table View to actually think. And actually work with data the ways that the pros do. So when you go to apply for jobs or build your own apps, you are doing it the right way. So that's it for now. See you soon.
