Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Swift
  • Overview
  • Transcript

2.2 Storyboard Basics

An important part of modern iPhone development is the use of Storyboards. Storyboards are simple graphical representations of the flow of your application, in which you can design the individual screens and the interaction between them. This lesson will cover the basics for you to become comfortable with Storyboards.

2.2 Storyboard Basics

As promised in the previous lesson, we're gonna start to dig into the basics of storyboards here. Now, this is definitely not going to be an in-depth, give you everything there is to know about all the bits and pieces of storyboards, but it's definitely going to show you the basics so you can see how to work with them and what are the different pieces. So if you were to go into your project and select Main.storyboard, you're gonna see a view that's very similar to this. Now I kinda have mine zoomed in a little bit so it's easier for you to read. But what you see here, is a view controller, and if you've ever done any sort of development with iOS before, you'll know that a view controller is part of the MVC framework, or at least that type of idea of MVC of model view controller that everything within iOS is built around. Now, every time you're talking about creating a screen within your application, you're gonna be dealing with a view controller. You have to have a view controller in order to be able to present something like a view, which is the V of MVC. In order to show a view, you need to have a controller which just so happens to be this fella right here. Now, by default, you're given this out of the box to kind of start your application. You can start to drag things out here, and put widgets on here, and do whatever it is you want to do to this particular view. And that's what ultimately your screen is going to be painted as. Now you see this kind of arrow coming out of nowhere. Well in a minute we're going to discuss what the arrows mean, but this is a special arrow. This one is actually denoting that this particular view controller is the one that's going to be loaded by default when your application starts. So you have to have a starting point within your application, and that's what this little arrow designates. So what do you do with these? Well first of all, this is a little big. Right now there's kind of not much real estate for me to work on, so you can definitely zoom in and zoom out. You can right-click in here at any point in time and zoom to a different level. So we can zoom down to 50% if we want. And that allows us to be able to move around a little bit more, so then I can go, drag this out of the way and I could create more screens or, or things of that nature. So let's go ahead and play with this a little bit. So I'm gonna open up the right panel here, which is where I get to find, a lot of different widgets and things that I can put onto my screen. I can put on some tables. I can create a split view, or a tab-based view, or just a simple page view. And so, I have a lot of different options here of what I basically wanna do so I have a bunch of different options here about maybe how I want this particular screen to look. Now this is a vanilla view controller here, there's not a lot going on. That's this first option here. This is the out of the box, absolute basic. You can create a navigation controller, which we'll see in a lot more detail in the upcoming lessons that allow you to navigate forwards and backwards within your application. I can create some tables or a tab bar or maybe a split view controller or even just a simple page view that will allow me to kind of page back and forth between different pieces of my application. And there's a couple of ones within here. And then you start to see these basic widgets or controls down here that you can start to play with. Now an interesting thing here is if I grab one of these, let's say label, if I wanna put some text on my screen, and I drag this over here to view controller, nothing happens. Well, what do I do? So, do I, do I need, do I need to select this or something and then drag this over here? Well, the problem here is that we need to get into a little bit more detail here. We need to see up close and personal so once you're zoomed in on it and you actually have given this particular view controller, say focus, if you wanna call it that. Now is when we can actually start to add controls to it. When you're zoomed out, you can't. You, you'll only be able to reposition screens, and, and move things around a little bit. But to order, in order to actually add things to the screen, you have to be zoomed in. So let's just see how this works. I can drag a label out here, and you'll see I have some lines that pop up to help me kind of center my controls that I wanna put out there, so I can put in a label here, and I can select it, I can double-click, and I can say, Hello There. And it will go ahead and size it for me nicely, and I'll put it in the middle. Maybe I should learn how to spell a little bit better. There we go, Hello There. So that's nice, and I can drag out a button here, maybe. And line this up, and as you can see I can center it here and I can change this button text to say, maybe, Click Me or something like that. And so I can continue to do this as much as I want and grab all these controls and slap them out here wherever I really want to, until I'm really happy with how this is looking. And then I can come up here and let's let's choose, you can choose any, any sort of simulator that you have support for. IPhone 6 is obviously the latest, but it's gonna be a little bit large for my screen, so I'm gonna back it back down to just the 4S for now. We'll play around with some of the different ones, but as you can see up here in the top, you'll see a, a, the name of our project here and a little arrow here, and if you select this iPhone whatever, it's going to show you all the different simulators you have installed and have available to use for debugging your application. So like I said, we'll play around with this a little bit more later, but for now, we'll just pick something relatively small, so it fits on the screen while we'll say iPhone 4s. And so now, I've built my screen. This is my starting screen because of this arrow here, that's how I know that. So now, I can save this and I can either go up to File > Save, or as you can see, I can select Command+S. So throughout the rest of the course, I'm just gonna be using Command+S. And then I can go ahead and, and debug this. So I can use the keyboard shortcuts, which I will later, and we'll show you those. But for now, you can just come up to this little play button and go ahead and click this guy. So this is going to then compile your application. It's going to start up the iPhone simulator, if it's not already done, and as you can see there, you saw our little launch screen. And now we have a little bit of an interesting issue. Our first issue that you're probably gonna run into is this little guy here. So now, when we were creating this, or adding some features to our UI, everything looks centered here and all really nice and pretty, but when I run it in the simulator, something's a little off here. Well, the problem you see here is that this is being designed for a different size device whereas I'm running this on a small iPhone 4s, so everything is kinda off to the side. So let's go ahead and stop this so we can hit the stop button here. Now I'm going to select this view controller so that I can come over to my attributes inspector and that's this little slider looking button up here. And now I can come in here and I can select size, now in here by default you're gonna have Inferred but then you can choose to change what the size of the particular windows or view controllers are within your storyboard. So I'm going to change this to an iPhone, let's say, we'll do 4-inch. So now you can see why we were having that problem. So I can grab my label, slide it over to the left here. Center these things once again like this. I'll go ahead and hit Command+S to save. And then we'll go and hit the play button again. And now when our application runs we're gonna be all nice and pretty here where everything is centered very nicely. So we have our label, we can click our button, obviously it's not doing anything yet, so let's go ahead and make it do something. So we'll go ahead and stop this for now. And now what I wanna do is, I wanna add another screen. So this is gonna be one of the important things that you're gonna have to remember as we move forward, not only in this course, but also in any sort of other app development. You do, cuz odds are you're gonna have more than one screen. So, let's go ahead and right click, and we're gonna zoom out to 50%. And now we can drag this guy over a little bit. And we can start to work with this a little bit more. So let's come up here to the different view controllers, which are at the top, and I'm just gonna throw out another plain view controller, nothing really crazy. And as you can see, this is, once again, made very large, so we're gonna make sure to select size 4-inch again so that we're being consistent. And now what I wanna do is I want to introduce the concept of what's called a segue. A segue is a transition from one screen, one view controller to another. So let's say in this case I want to segue, or transition, from this first view controller over to the second view controller when the user clicks the Click Me button. So what I'm gonna do here, just to differentiate so we know that these things are different, is I'm gonna zoom back into 100%. And I'm gonna move this over just a tad and I'm going to put out a label here. And we'll double click on this and we'll say here, View Controller 2, just so that we know it's something different. So now what I want to do, is I want to transition from this first view controller over to the second one when the user clicks the button. So the way that we do that is by coming over to what it is we want to start this segue or this transat, transition from. And I'm going to control-click on this guy and I'm gonna drag over to this other view controller and I'm gonna let go. Now you have a number of different options here of different types of segues. So built in, we've got these segues. We have show, show detail, present modally, pop over and custom. So, typically within this course we're gonna stick with show, because it's the basic. It's just gonna kinda slide that other view controller in there so you can see what's going on. And then these other ones, I'll let you play with them on your own, but they're just different ways of presenting these view controllers. So I'm gonna select show. And now we're going to see we have another arrow here, but this time it has a start and it has an end, which basically means that this is a segue instead of this first one here which is just denoting the start of your application or that first view controller. So now we have this segue and a segue in itself has properties. So I can select this guy and I can open up my right pane again, and as you can see here, I can give it an identifier, which is gonna become very important later on, so that within our code, I can know when this particular segue is about to begin and at, and when it is actually firing because I can use this segue to pass data from the source to the destination. So we're not worried about that just yet. We'll get to that later on. But that's one of the very cool features of segues. And I can also change the type of segue from show to detail to modally or as a popover, but we're gonna stick with show for the time being. So that's basically it. I'm gonna save that with Ctrl+S. And then I'm gonna go ahead and hit Start. So once again, I'm gonna get my application here. I have Hello There and Click Me. If I now select Click Me, you can see that view controller slid up, view controller two slid up from the top and that's the basic functionality of the show segue. So that's really some of the basic fundamentals here of the storyboard, at least for what we're gonna be using it for. Now you'll see later on as we go that we have some icons up here, one of them being the view controller. So, this is how we select this particular view controller and we're able to add some functionality and some click handers and, click handlers and button handlers a little bit later on so we'll see how that works as well as the first responder which we'll talk a lot, talk a little bit about later on as we're not gonna really use it too much as far as this particular course is concerned as well as exit. So I can then trigger some of these buttons or some events within our application to actually exit the application and, and we'll see that a little bit later on as well. So, for this course what you're really gonna need to know is that we have a number of view controllers that are gonna house our screens. The screen's our application. We can drag and drop different controls and things with on our view controllers. And then we create transitions between them, using these segues. And you'll see a little bit later on how we're gonna use those segues to actually figure out at what part of our application, at what part of our UI we are in. And actually send some data across from the source to the destination, which is gonna be very important when we are transitioning from, say, the title of a particular blog feed to the articles of the blog feed or maybe from the article to the particular web view that's going to allow us to actually read it. And that's how we're going to pass that data across. So, that's probably enough for now, and I'm gonna give you a little more tidbits here and there as we go along to, to increase your knowledge of how to use these segues within your storyboard.

Back to the top