App Setup, Data Source, Delegate Methods (ep. 2

Max Nelson
A free video tutorial from Max Nelson
Lead iOS Development Engineer
4.1 instructor rating • 11 courses • 29,648 students

Learn more from the full course

Advanced Table View iOS App Development with Swift & Xcode

Learn Programmatic Auto Layout, UITableView, Protocols & Delegates, Custom Cells, NSAttributedString, UIKit & Swift.

05:56:43 of on-demand video • Updated May 2019

  • Expandable UITableView Sections - Drop Down Menus
  • NSLayoutConstraint for Programmatic Auto Layout
  • UIStackView, UITextField, UILabel + more UIKit
  • UITableViewDelegate Methods
  • UITableView
  • How to push UIViewControllers onto a UINavigationController stack
  • How to use multiple UINavigationControllers simultaneously
  • How to present UIViewControllers
  • Custom Protocols & Delegates
  • Custom UITableView Cells
  • UITableViewController
  • Xcode
  • Swift
  • Form Validation
English [Auto] All right. Welcome. So we're going to be building out this app that you see here on the screen in the next set of videos. So let me just kind of show you what it does when we open it the image views kind of animate and the cells are actually deleted and inserted as we close it and open it right. So they're deleted there's no cells on the screen right now. We open it. There's now to table v cells in the first section. So I expect you to have some understanding of UI table views and it would be awesome if you've worked a little bit with sections but if you don't have any experience with UI table views and you haven't worked with sections that's completely fine. You should be able to follow along perfectly fine with these videos. It might be a little challenging but you will learn and if you stick through these videos you will learn how to build this and understand a lot about UI table views but you obviously are going to have a few questions even like if you go through it all and you have no experience you're probably gonna have a few questions afterwards but that's why the comments section exists. Just drop a comment or basically leave a question in Q and A and I will get back with you. So yeah and if you are a student yourself or watching here if you want to help other students out in the comments that would be great or CUNY or whatever we want to call it right. All right. So what I want you to do is open up a new X code Project Cause we're just gonna gonna get started here and get our table view controller on the screen and get things setup with our methods okay. And then we'll hop into another video. I actually tried recording this all in one video and it turned out to be an hour long and I didn't even get the animations and that's how difficult it was to do in one video. Anyway let's call this dropdown spots app because you can see I've kind of branded this as a an app called spots cause if you open that first time you can see there's like Hemingway as in tee times. I don't think that image is the Himalayas but the Tetons definitely is. OK. So there we go. Let's go and go into our app delegate. And I want you to do eat this comment. And if you've never watched like my kind of style of programming check out my youtube channel where I show you basically how to set things up from the app delegate. That's what we're going to be doing in this video. So right now it uses storyboards right. If you were to compile this it would open it up and storyboards and we can basically just give this a background color so have you got background color of DOT yellow and if you were to compile that you'd see it's yellow. OK. But we don't want to use storyboards so what we need to do is we actually need to kind of set things up from our app delegate. We don't have to delete our storyboard file or anything I do that in a lot of my videos but I'm not going to do this one because it's not necessary but we're still not going to use it. What we're going to do is just initialize things from our app delegates will say Windows equal to UI window and then we'll say window dot make key invisible so shows a window and makes it the key window and then we'll say window route view controllers equal to view controller. So basically I'm just making an instance of our view controller class in view controller about switch. So this class making an instance of it and setting it as the window view controller. OK. So that's how you set it up from the app delegate. Now one thing I do want to do though is make it into a U.N. navigation controller because you can see in here we have spots up there like that. So it's a navigation controller. If you don't know what that is. Let's just do it right now and you'll learn. So we want that kind of top part. So what I'm gonna do is I'm going to say let nav controller is equal to UI navigation controller and let's select this bottom one with a route view controller and I'm just gonna put a view controller in it. And then now we can say that the review controller is actually the nav controller and that will work much better all right. So yeah there you go. You can see that we have a navigation controller now. Now what I want to do is set a title under review controller. We can do that in view controller dot Swift. So. So right below background color yellow will do that but let's change it to white and steady yellow. And then what I want to do is just say navigation item the title is equal to. And we'll just say spots and we should be good to go. Let's go ahead and see what's good. And also we're gonna need some images in this in this kind of series so we'll get to that in a different video but that's what these three images here are down on the bottom here they're from on Splash dot com super awesome Web site just tons of free photos it's kind of too good to be true. All right. Anyway we're set up there. Let's go out and set up our UI table view controller. So I want you to do is instead of driving this from your eye view controller let's see you at table view controller and then we'll just keep it as view controller. You can rename it if you want. I mean to prevent confusion we probably should. So I'm just going to call this table view controller and then the thing is we're going to have to rename this in a couple of places. We obviously don't in that comment. But I'm going to just keep things clean and then we have to rename the file. Well like we really don't but like I mean if we're going to rename everything we should just rename everything. So I've renamed the view controller does with the table view controller even the file name and the noun or AB delegate we have to make sure that we call it as table view controller not view controller came to go out and posit and make sure your app delegate looks something like this or it probably isn't in order. Right. These these four lines it just has to look like that. OK. And if you're still crashing at that point then just make sure that your table view controller looks like this. Positive make sure it looks like that. All right. So we should be good. Now we need to do is kind of driver methods so let's get some cells on the screen. Let's just say number of rows. Well let's say a number of sections and we'll just return three. And the reason I'm doing this is because in our completed app you can see that we have three sections. Notice how it says close open. Just basically these three sections. Those are those right. And we have to override this method. So next thing we'll do is we'll just say title for header CAD and header for care with the free will just use view for header I guess it was title for but it does matter. And in view for header we want to return this button right. So let's just say let button is equal to you a button and we'll save button set title and by default we want it to be we want it to say close because we're gonna have an open and free to control state normal and then we're going to return the button and let's compile this and see if something's on the screen. I don't think anything. Well yeah. It should show up because the sections will show regardless of whether or not you have cells. It's kind of half the point. All right. So it's there but we prob we're not really seeing anything in our titles right. So I'm gonna change the height for ROA for our header. Let's just say height for header in section let's just return I'm 40 and let's override this. And then if we're still not seeing anything we'll just. OK. So the reason we're not seeing the Enterprise is because by default the text color is is white. So when you just say button set text color title color is to white. No. Not black we don't want to change it to white again and we'll save for a controlled state normal and then we can get rid of this hyper header method. We don't need that. And now when we compile it it's going to basically look it's going to look right. Right. You're going to we will see it. All right. So you can see that it says close. And that's kind of what we want right. So what I want you to do is I want you to basically get some cells on the screen now because we don't just want these. We want to actually have cells. So let's go up here and let's just put a comment and let's just say let's say see right here we'll say header and then we can say sections in rows and then we're going to provide the rows right above this will say number of rows and then make sure it's overwritten and then it's basically just gonna be the number of rows in Section. So for now we'll return to and then let's recompile this and see what we get on the screen should just basically be blank cells. Kind of getting rid of those lines. Right. So let's see. All right sweet. So it crashed and that's because we haven't really provided a cell. Right. So it's trying to return to but there's no cell data. So we need to do is provide the the method cell for robot and then in here we just need to kind of deal. Q A reusable cell so let's say what cell is equal to table view V Q reusable cell with identifier k. If I could type. Geez. Oh I hit on there okay. Hate this keyboard. I hate Apple keyboards I hate them so much because of the arrow keys. It's freakin annoying. All right. Anyway we're gonna do is we're gonna say with cell identifiers cell I.D. and then we're going to say for it index path and then we're just going to return the cell and for the text will. Oh my gosh these arrow keys will say cell text label dot text is equal to Hello there. And then what I want you to do is we're gonna have to actually register the cell or this is going to crash right. So let's re compile this and watch it crash and if you're not at this point just positive video and get all this code in here. Ken all right you'll see it crashes and if you go into your terminal here or whatever this whatever they want to call it an X code it's going to say and it's internal inconsistency exception. Reason unable to do. Q A CELL WITH identifier salary must register a name or class for the identifier or connect a prototype so storyboard. Now I'm obviously not gonna use storyboards because I'm not Satan himself. So what I'm gonna do is I'm going to register it manually with code. So what do we want to do is we want to write a method and say setup table view and then we want to say failed private setup table view and in this method what we're gonna do and I don't know why but when I read type file private I always forget to type functions as a team with file private variables. I always forget the function var left. All right. Next thing we're gonna do is we're just going to say table view dot register and then I want you to own my frickin hack. These freakin arrow keys dog I hate them all right. They register and then register as a class for use in creating new table results we're going to select this top one. And we're just going to say UI table if you sell yourself right now what we're gonna wanna do is put in the same I.D. And real quick. Let me explain this case. So what we're doing now is using just the default you a table you saw. But when we create a custom in a few videos from now what we're gonna do is we're actually going to rename it. So it's going to be something like card cell that's what I'm going to call it. That's what I call it when I built it out. And we're basically going to replace that and then cast it in our in our cell the. But we're not going to do that. Now I just wanted to make you aware of it because that's kind of how people learn is basically just reiterating. So the fact that I mentioned it in this video is going to make it more comprehensible when you get around to it's really interesting. It's kind of cool. All right. Anyway what we want to do is we want to create a variable facility because you can see there the same and everything works great with three compiler applications C but I want to kind of drill this concept of I don't I don't know I said concept but basically you'll see that we get this right. We have our three sections in our two rows for each and then it has a low earning track. But if you've ever done any react redux specifically redux you're going to have these things called action or types right. And use constants and I didn't really understand it for the longest time but as soon as I remembered about Saudis ideas and I was the moment I realized oh that's why right if we were to change this sell it to like Saudi and we accidentally hit like f or something on the keyboard and then we recompile it it's going to crash because we've no longer we're going to get the same error we got before we type this line because we no longer have a cell registered with cell I.D. we haven't registered with cell IDF and don't ask me why we have to register it that's just how it is. But I assume it's simply because you might have other types of cells right. Like may have a table view that returns two types of cells so you might have one that is so IDF and one that somebody ok but basically what we need to do and even then you might wonder like OK why can I just cast it in here and it's like OK well now we're getting really deep into it and that's just how it's programmed beneath the surface and something we really don't need to understand anyway. What we need to do is create a constant and just call it Cell underscore I.D. and replace it there and then we can name it up here right. We can say failed private let I remembered to let this time I won't say somebody is equal to and then really this string can be whatever but obviously it makes the most sense just to do that. So the reason we're doing this is because I mean if we're really being efficient we just do that. But the reason we're doing this is because now if you were to go in here and actually type that F right and recompile it it's going to throw you an error before it even runs which is really what you want because you then you know before the app even crashes that it doesn't work. That's the whole reason you use a constant like that. And that's the whole reason if you're into react redux that you use a type in in your action creators came. Now a lot of that probably makes sense because I was just talking about redux of it but basically we're using that for that reason we want it to crash before it's better to have a crash or it's better to have a syntax error than a crash right because a crash can go undetected and you can release it to the public and then all of a sudden a user gets a crash and we know on that. OK. So that was kind of a rant but I thought it was necessary. I think it's good to just kind of fill you want and details like that and just teach you that way. So and let me know if you like that or if you prefer me to just get to the point and just build out the apps because when I'm watching videos I personally just like to watch them build it really quickly. I'm not really a fan of the lecture kind of style but I was just testing that out there to get some feedback in the comments or in the on air or whatever yeah. So let's go ahead and just say sell data and then we're really kind of set up here. If we re compiler app you can see basically what we saw before. And that's basically just our UI table view. Right. So now we're at a good point to kind of transition this into an app that looks more like this right. We've got all of our sections and we've got some data in each one of these. Now this is actually a very kind of complicated app not very complicated but it takes a little more work than you might think. I don't know that sounds really negative but it it's it's easy and you're going to learn it but it does take a little bit of coding. So what I want to do is gonna happen in the next video where we're actually going to learn how we can structure our data so that it can better fit this and then we're going to refactor our number of sections and number of rows to kind of fit this data better. Now if that does make sense just hop in the next video and we're going to learn about it. All right I'll see you all in just a moment.