7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Build the Reminder List

One of the most important controls that you can use in any iOS application—not just WatchKit—is a table. In this lesson, you'll learn to add a table control to the first scene and begin designing the overall look and feel of the rows.

3.2 Build the Reminder List

Now that we understand the basics of putting together the interface for the WatchKit app. We can start to actually build out the interface that we're going to be using for this course. So let's go ahead and do a little bit of clean up here. And then let's start to build out one of the first actual scenes that we're gonna use for our application. So let's reopen the left side of the IDE here. And let's go ahead and get rid of our SampleInterfaceController, since we're no longer gonna need that. So we'll move that to the trash. And then we will also come back here, let's get rid of our Hello Friends, and I think to that point, we should be done. You can switch this interface controller to have its backing controller, once again, to its original one, which was the interface controller. You can do that, that would be fine, it's not really necessary, cuz we're gonna kind of start to build this out from scratch. So basically what we wanna do is we want to bring in the first scene that the user is going to see when they open up the Watch app. And we want that to be a list, we want that to be kind of a list view of all of the loaded or available reminders that the user has. So that they can go ahead and scroll through it and check out which one they wanna use at that particular point in time. So building this out is not going to be much different than what we would do typically to build out a typical table view in an iPhone application. So let's go ahead and start to put that together. So I'm going to get out of Assistant Editors, I don't really need that for now. I'm just gonna click on these lines here to the left for the Standard editor, and now I can start to put this together. So let's open up the right hand side. And so what I really I'm looking to do right now is, I want to add more controls on here. I wanna add a table control, so I can come into the right hand side of the bottom and I can search for table. And as you can see, I have a table control right here. So what I'm gonna do is I'm gonna click and drag that onto my user interface. And you're gonna see here that it looks a little deceiving, I have a Table Row, but I thought I dragged a table over there. Well, if you were to open up the Document Outline, you're gonna see that you would actually get both. So you're actually going to get a table, you're gonna get a Table Row Controller, and you're also going to get a Group in there. So you're getting a couple of things by default, and that's fine, so we're gonna start to tweak this a little bit. So just imagine that this table view is going to contain all of our reminders for this particular application. So what we really wanna do at this point is, let's design what each one of these rows is going to look like. So I've told you this in several courses in the past. I'm not really a designer, but I have kind of a basic idea as to what I want this to look like. So the first thing that I wanna do is I want to get a separator, as strange as that may sound. I'm gonna take this separator and I'm gonna drag it over into the Table Row. Now, if you have a hard time dragging it into here, you could also, once again, drag it over to the Document Outline. But I think for this particular instance, the Table Row inside the line should be fine. So let's go ahead and set some properties in the Attributes Inspector. So the first thing that I'm gonna wanna set here is the color, so let's give this just an easy to see color, let's just pick a red. And then we will come down here and we want the alignment vertical, we want that to be centered. And then we also want the height here to be relative to container. So now, if I click off of here, you're gonna see that I've got this little red line over here. So basically, what's gonna happen now, for each one of these reminders, there's going to be a row width inside this table. And then you're gonna see this line here, so it's gonna kind of denote where this row is. So it's just kind of a little bit of a visual cue that this is a reminder, so that's kind of a neat little trick. So what we can also do here is we can start to add additional things in here, and that's what we're gonna wanna do. So what I'm also gonna wanna add in here is going to be the name of the reminder. So we have that property, if you recall, over here in our Models for Reminder. We have our name, so I'm gonna wanna display that. And I think also another good thing to display there might be the durations. We might wanna display the total amount of time that that particular reminder is going to take. I think those are two very important, valuable pieces of information that we wanna share with our user. So let's come back to our interface, and so I wanna put two labels on here, basically, is what I wanna do. Now, a very useful trick that you will find when creating any sort of iOS apps is to kind of group things together so you can use them together. That becomes very important when you're dealing with a watch. Because you have limited amount of space, and to have to drag things around and get everything lined up can be fairly complicated. So what we can do is we can actually use a Group. So let's go ahead and search for Group, and that's what I'm gonna wanna drag on here next. So I have my group, so now, as you can see, within my table, I have a Table Row Controller. And then I have a group by default, I've given a group, and then within there I've put a Separator so far. And then I've put a Group, all right? So now within this group, I really just wanna put, say, two labels in here, so let's see what that's gonna look like initially. So if I go ahead and look for labels, I'm gonna drag a label over here, and we're just gonna say this is going to be the name. So let's just say this would be Name. And then I also want another label, and I want that other label to be the time or the duration. So you can already see that things are getting a little disjointed. I've kind of lost my separator, or I can't really see it very well, and we have this name and duration on it. And I want these things vertical, not horizontal, so we can start to play with this a little bit. So if I select my group here, I can change my layout to be vertical, so that's gonna clean that up a little bit. But then, we start to have a little bit of a problem here, because the distance between these two items here are a little far. We don't want that much spacing. So I can come over to the spacing here, and I can start to decrease the default spacing down to zero. I think that would be fine, cuz I can now see both, but then the next problem is, I can't really see my red line anymore. So if I come back and select my group, as you can see, we have this other in-sets property in the group section. And I can change this to Custom, and then I can kind of give some space in here. So on the left, I wanna increase my spacing a little bit. So that’s gonna look a little bit better, but as you can see, I’m still not getting that red line, so what do I have to do to get that? So if I go back into my group here, and I come down to the bottom a little bit, you’ll see in Size, I have this Width as being Relative to Container. Well, instead of doing that, I want it to Size To Fit Content. And if I Size To Fit Content, you’re gonna see everything kind of snugs up a little bit there so that I can see my Name and Duration. So that's not too bad, but right now, I want my Name to be a little bit more prominent, and the Duration, maybe not so much. So I'm gonna make sure I have my Name selected here. And what I could do here is I could maybe play with the font here a little bit, maybe, let's see what we have in here. Maybe we'll make this System, and we can make this Bold. And I think the Size there should be fine, and then maybe we could give it a Color here too, red, yeah, sure, red's not too bad. And then we can also change the Duration on the bottom, so let's change the Duration here. I think that is much more, it's a little bit more of a subtlety, so let's change the styles here, the font a little bit. Let's make this maybe System as well, we could play with it this way, maybe bring this down to, Thin, which will bring it down a little bit. There we go, so I think that's looking a little bit better. So now just kind of envision when the user comes into our app. You're gonna see here that it's going to have a row in here in the table for each reminder that's loaded into the system somewhere. That however it's been saved on the phone, or within the Apple Watch app itself, and then we'll see a row here for each one. So that definitely starts to beg the next question, though. How am I going to populate this table with all of the reminders? And then, how am I gonna get each one of those pieces of data for those reminders, namely the name and duration, to show up in each one of these rows? And just like I showed you or gave you a little bit of an introduction in the previous lesson. We talked about having subclasses and using those to be able to get ahold of some characteristics and some properties programmatically. That's exactly what we're gonna start doing with both the table and the Table Row.

Back to the top