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.5 Add a Second Screen

Let's face it. Very few apps are able to get by with a single screen. And this app is not going to be one of them. We need a second screen that will allow the user to see the details about a reminder as well as to interact with it. Let's build it!

3.5 Add a Second Screen

Now that we have the first scene of our watch kit app put together now we need to handle the more detailed view so when we select one of these reminders I wanna be able to see the information about it and then actually interact with it. So let's begin by opening up the right hand panel of Xcode and I wanna come down to the bottom where I can get some controls and I wanna look for a controller. So we're gonna take an interface controller, and we're gonna drag it out onto the scene just like this. So let's give ourselves a little bit more room here as we're gonna be dealing mostly in the interface for this particular lesson. Okay, so now what I wanna do is I wanna design this, and give ourselves a little bit of information. Or a little bit of UI around the details of this particular reminder, and then be able to interact with it. So I'm envisioning a top section that's gonna have some overall information. So maybe the reminder name and the duration, the total duration, again. And then a center section where we're gonna get details about the stage that we're currently in. So we wanna be able to see where we are in the flow. And then, let's throw a button in there, too, so that we can interact with this. So I'm envisioning that we're gonna go through this reminder, we're gonna have an active stage. We're gonna go through each one of these stages. We'll be notified when a stage ends. And then we'll have a button to allow us to continue and transition from stage to stage and then ultimately end the entire reminder itself. Okay, so we're going to do this in a pretty similar way to what we did before, we're going to be dealing with groups. So, lets begin by finding our group. And we're going to create three of them. We're going to drag three onto the UI. So we're gonna have one on the top, we're gonna have one in the center, and we're gonna have one at the bottom. But to ensure that these things are actually where we want them, we're gonna go through each one and make sure that they are vertically aligned to the top. So I'm gonna select the first group here. And I’m going to look at the attributes inspector, and I am gonna come down here, and I want to make sure vertical is set to top. Which it is. Then we’ll come in to the center here and we want this vertical to be center, because depending on the size of the watch if you have a smaller watch or have larger watch depending on the height of the group and the controls within it, things might get a little bit disjointed if you don’t have these things set properly. Then we'll grab the last group, which is where our button's gonna be and we'll make sure that this is vertically aligned to the bottom. So now we have some nice spacing in between all of these to give our UI a nice look and feel. All right, so let's take a look at the top first. So the top is where we're gonna have some information about the actual reminder itself. So we'll come up in here to group and we will make sure that our layout is going to be vertical because we want these things stacked on top of each other and we're, once again, gonna have a couple labels. So we'll grab the first label and we'll stick it in the group. Then we'll grab another label and we'll stick it in the group as well. And I think the actual font themselves, probably not too bad, we may just leave it as is for now but let's play around with the color a little bit. I liked that red that we used before so we'll have the top here. We'll have the label for the reminder name and then the actual total duration. And then we can come into the center group, we're gonna have two in here as well. And once again, let's make sure that that group is selected and that our layout is vertical. And we'll drag one more out here so that we have two labels, and let's give these some names before I forget. So this is going to be the name and this second label is going to be the duration. Then in the middle here, we're going to have the stage. So what stage are we currently in. And then we're going to have stage duration. Call that stage duration, like that. And then on the bottom we are going to have our buttons. So what I can do now, is I can go ahead and look for a button, and I'll grab this and drag it into there. So let's play around with the color a little bit here, let's get a different color, maybe an orange-ish. To offset the stage but I can already tell I'm not going to like this layout because it's all too lined up. So we're going to have to adjust that a little bit and let's change the color button here just a touch. The text right now on the content isn't going to matter as much because I'm envisioning transitioning between certain states of the reminder itself. So we could have different text based on where we are currently within that kind of state machine. And right now I will change the color here. We'll just make it green. Just so, or not the font color. So we'll come in and just grab the background color here. We'll just make it green. Boy, that's ugly. We'll make the text color black. Okay, so here we go. At least it gives us something to look at, but like I said it's a little to lined-up, a little too matchy-matchy. So let's select this center group here and let's push it off, let's create an inset for that. So the insets here for default, we're gonna change this to be custom and we'll give it a left inset, maybe 10. How does something like that look? I think that looks pretty good. So now we have the name and the duration of the total reminder itself. Then we have whatever the active stage currently is in the center and then we'll have the button down at the bottom. So I think that's roughly what its gonna to look like, so if you wanna see what it's gonna look like in the simulator, there's a couple different ways you can do that. We don't have the tie in yet to transition from one to the other, we're gonna get there. But if you just wanna test this out a little bit, you can actually make sure you've selected this interface controller either through the storyboard or through the document outline. And then come over and once again check the is initial controller. So we'll go ahead and save that. Let's rerun our application. Yes we do want stop it. And so then once X code actually builds this and opens up the Apple Watch simulator. We should now see this second interface controller firing up first this time. And there we have it. So that's not too bad actually, I think that'll do just fine, and you can obviously play with the fonts and you can play with the sizes and all that sort of stuff. But I think for now, this should be just fine. So the next thing we're going to want to do is, we're gonna start to do similar things that we did before. We're gonna want to create some outlets. We need a backing subclass interface controller. And all those sorts of things so that we can actually get some programmatic access to this particular interface, and we're gonna do that in the next lesson.

Back to the top