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

2.3 Creating the Basic Layout

In this lesson we are going to focus on creating the basic layout of our application. We will primarily be dealing with three screens to navigate through the different aspects of the news feeds. We will eventually add a new screen, but we will get to that later.

2.3 Creating the Basic Layout

Okay. So, here we are in our current state of affairs, as far as our Swift Reader app is concerned. Now, we've talked a little bit about a storyboard, what a storyboard is, and how do you start to create screens and to create transitions between them using something called a segue. And now we're gonna start to actually build out what our actual UI, at least at a high level is going to look like, and then we'll spend a couple lessons actually building out the actual screens and the different widgets or controls that you're gonna find on them. So the first thing we want to do is actually wipe out our storyboard here and, and start with a fresh slate. So what I'm gonna do is I'm going to right-click and zoom out to 50% so I can see everything. And now I'm just gonna click and drag, and highlight everything here and then just hit the Delete button. And then also what you're gonna be able to do is actually remove this ViewController.swift file, so I'll go ahead and hit Delete on this guy, and since we're not gonna need him at all, we're just gonna select Move to Trash. So now as you can see here, we have a completely blank storyboard. We have a completely blank canvas that we can now start to build out the flow of our UI, and this is gonna be a, a fairly simple UI. It's gonna consist of three primary screens and we'll add in a, a fourth one later on, which is gonna be a little bit different but we'll get to that a little bit later. So, I'm gonna open up this right panel over here so I can start to see all the different things that I can add to my storyboard. So what I would like to build this UI based on is the concept of a navigation controller. So a navigation controller is a nice, pre-built piece of functionality around a screen or a controller that you can use to add a little extra flow of navigation with some nice little built-in features to your application. So we're gonna start by selecting the navigation controller, and we're gonna drag it out onto our storyboard. And as you can see, it starts with two view controllers, so I'm gonna let go there. And then once again, what you're gonna wanna do is, you're gonna want to open up your attributes inspector, and then start to select these navigation controllers. And we're gonna switch the size to 4 inch. So as you can see here, that adjusted both, and that's for a specific reason. Now in navigation controllers, you can see here, there's really not a whole lot you can do with the actual navigation controller. But one thing that you're gonna have to remember about this is that when you have a navigation controller, you always have the concept of a root view controller, which is what was brought out by default for you here in the form of this root view controller. So when you start your application, you're never gonna see just a navigation controller, you're gonna be presented with its root view controller and whatever you have in it. And as you can see here, by default, it has given us a table view that's embedded into this particular view controller. And within this table view, so you can think of that as, basically just a list that you can kind of scroll up and down. And it's made up of cells. Now as you can see here, we also get a prototype of the cells. What I'm gonna do actually here is I'm gonna zoom in to 100%, and you can begin to see what this looks like. So this table view, while you're in the storyboard view, you can start to take a look at this prototype cell and get a feeling for what it's actually going to look like. So, one thing I did notice here, and so very briefly gonna come over here to this navigation controller. If you recall when we were looking at the pre-built, pre-canned story board, you had an arrow to the left over here that pointed to this first view controller to state that this was actually the first view controller. Now that's gone, because we blew everything away. So what we're gonna wanna do is, we're gonna wanna select this particular navigation controller and lets give ourselves a little bit of room here. And what you're gonna notice, if you come down towards the middle here, where it says View Controller, it's gonna say is Initial View Controller. We're gonna wanna check that box. Now, when we check that box, we're gonna get that little arrow coming in from the left. That's gonna tell our application that this is truly the first view controller that need to get shown within our application. So that's gonna give us the start. Now we're gonna come over here to our root view controller, and we could start to change some of the different things on here. So, we, we can start off with this status bar at the top here, there are, to have a title of this root view controller, but we're not gonna like that. We don't want that. If you can remember we started to look at this application a few lessons ago, this is where we had something that said, Feeds. Now, this is going to be where we're gonna add in different news feeds that we like and have them populate these cells here. Now if you also recall, when we were looking at the actual cell on the application, we noticed that it gave a title. What was the title of the feed? Well, we want that to show up here. So we can take a look at our attributes inspector here, and you'll see that we have a style here, and by default, it says Custom, but if you click on this, you have Basic, Right Detail, Left Detail and Subtitles. So if we select Basic, you're gonna see that we're given a single line of text here which is gonna say, Title. So that means from a UI perspective, from a layout storyboard perspective, we can see that this is going to have a single line of text, and that's what we're gonna want on this particular controller. Now what we're also gonna wanna do is we're going to wanna be able to select one of these feeds and then navigate to another view controller that's ultimately going to show all of the articles associated with that feed. So let's go ahead and zoom out again to 50% so we can start to get a little bit more space here. And so what I want to do is I want to drag out another view controller. But this is also going to be a table again of all the articles. So I'm gonna select my table view controller. I'm gonna drag it out here and then once again, I'm going to select it and make sure that size is going to be 4-inch. As you can see here that we have our Table View controller here that's gonna hold our articles is looking a little bit different than the other view controllers that we have in here so far in that it doesn't have this top bar. And when we're using a navigation controller we're always gonna be presented with that. We can get rid of it, but for the most part it's always gonna be there. And we want that to have the same look and feel throughout all the screens or all the view controllers within our application, not only when it's running, but also within the storyboard just to kind of get that consistent look and feel. So what I can do here, is I can select our view controller and I can come over here to Top Bar. And, we're gonna say that we're going to have a Translucent Navigation Bar. So, now you can see we're getting that consistent look and feel across here. Now, what we want to do is we want to be able to create a transition between this Feeds view controller here and the articles view controller here. So the way that we're gonna do that is very similarly to how we created transitions or segues in a previous lesson. I'm gonna select this prototype cell. Actually I'm gonna have to zoom in, here's where I'm gonna zoom into to 100%. And I'm gonna select this prototype cell here, let's close one of these panes a little bit. I'm gonna select this prototype cell and I'm going to control-click and drag over to this table view. And I'm going to let go. And you're gonna see that I have a Selection Segue. And once again I'm presented with these different options here for the type of segue I'm going to use. And I'm gonna continue to use Show just because it's a very consistent look and feel across my application and I happen to like that. So as you can see here, as I look at the Feeds view controller, as opposed to the new view controller that's gonna contain the articles, I don't have a title up here. So I want this to be a consistent look and feel. So I'm gonna go ahead and add that up here. So we're gonna say that this is gonna be Articles. So now we have two view controllers. We have our root view controller, which is gonna contain a list of the feeds. Then we're gonna have our articles after you've selected a feed it's gonna take you to, the list of the articles associated with that feed. And then finally, when you select one of those articles I want to take you to another view controller that's actually going to take you to that web page, to whatever that link is that's embedded into that article so you can actually read the full article. So I'm gonna move over here to the right a little bit, and now I'm gonna move down and take a look at my options here as far as being able to select a particular type of view controller. Now, this doesn't have to be anything fancy, so I'm just gonna select a basic view controller here. Once again I am going to have to do the same thing. I'm gonna make sure that I select the iPhone 4-inch, so everything is consistent here. Then what I am also going to do here is I am going to make sure that I have a top bar, so I have enough space for that top bar just like I do up, on all the other view controllers here. And then I'm going to create or add in what's known as a web view, as you see right here. Now, I can drag a web view in here and I wanna make sure that this is gonna be the same size as the viewable area within my view controller. So now I may need to play with the size here a little bit, just to make sure that everything fits in here. We have a view controller that we can use to then show the actual web view and once again, what we're going to do is we're going to come over here and select the prototype cell, that's for the articles, and have it transition you over to this web view. So, I'm gonna control-click, and drag over here, and once again, we'll do a show. Now, if you do recall, we're gonna close this out to the right a little bit. I have a prototype cell for our feeds, which is just gonna contain the title, and then we're gonna have one for the articles as well. But for this one, we're gonna jazz it up just a little bit. In this case we want to have two lines. So in this case we want there to not only be the title but we want the date of the publication of this particular article. So we're gonna come up to style once again after I select my prototype cell. I can select style and this time I'm gonna collect, or select subtitle. So this is gonna give me two options. I have two lines of text to be able to put some data out here and we'll populate that with the data as we go along and then once we click on this prototype cell we'll come over and we'll actually present the view controller here. And then we'll go ahead and add in the title up here. And we'll just, for now we're just gonna put in, we're just gonna call this the title. So what we'll want to do is when we select an article or want to populate its title, up on the top bar here, and then it'll have it actually show the contents here. So, as you can see here I'll, we'll, we'll zoom out just a bit to 50%, and we'll take a look here. And so now, we have three basic screens, but there's actually four view controllers. We have our navigation controller, which is gonna be our default view, and then the root view controller, or the first thing that you see that's presented within our navigation controller is going to be feeds here, which is what we're going to populate the actual feeds that we add in. Then when you select one of those feeds, it will take you to the articles view controller, which will show you both the title as well as the publication date of that article. And then if you select one of those, it will take you to another view controller that's going to actually present the, the web page that's supplied by the link within the article to the actual end user. So that's the basic layout. And over the next couple of lessons we are now going to get into a little bit more detail on how we can start to add some functionality, or at least the possibility of adding functionality to these different view controllers so we can start to create our application layout.

Back to the top