Table views are the main list views used throughout iOS 11. This tutorial shows the basics of creating a table view in Xcode 9.
- [Instructor] Table Views are all over the built-in applications in iOS. Consider the Settings application. We have the title up here and then we have lists of items. You can scroll through the list, they have icons, and then arrows for indicators that when you click on that, you're going to be taken to a different screen. You also have a navigation bar at the top of the screen that you can use to go back. We're going to add this functionality to our application. So let's go back into Xcode and create a Table View.
The file that I'm working in is Main.storyboard so select that file and we're going to develop our user interface. To get a table view, we're going to grab it from the object library which is at the bottom right corner of the screen. You want to make sure that you're showing the utility area which is that right area. So, in the object library, which is the circle with the square on it, we're going to search for a table view. So click in that filter field right there and start to type out the word table. Now there are three different options that we have here, Table View controller, table view, and Table View cell.
Now Table View cell should be kind of obvious, it's a single cell inside of that Table View list, but what's the difference between a Table View and a Table View controller? Well, in iOS development, you're going to see this yellow circle with something inside of it kind of a lot. If we expand our View Controller Scene in the document outline, you can see that yellow circle on the white square there. That is basically saying that that creates a new screen in your application. So if you drag this out, we're going to create a new screen.
We don't want to create a second screen for our app yet. We want to create a Table View in the main screen. So to do that, just click and drag out a Table View, and I'm going to drag it to the top left corner, see how it's locking on there, so it's snapping to those guides, and then just click and drag the bottom right corner, you want to make sure that you have that icon for your cursor that shows the diagonal grab icon. And then just grab it to the bottom right corner. So just like that. You should see these blue outlines all the way around.
So we've put our Table View on the screen but there is something else to consider. If we look at the Table View with different devices, it's actually going to change sizes, or rather, it's not going to change sizes when the device size changes. For example, let's say I wanted to preview this as a different device. So inside of Interface Builder, that's the name of this mini-app that's inside of Xcode where we build interfaces, we're viewing as an iPhone 8, so if you look at the bottom you can see that right there, view as iPhone 8.
So what we're seeing here is previewing what our app will look like when we view it as an iPhone 8. What if we want to view it as a different device? You can click that option right there. That's going to open up this little menu at the bottom and you can click through these different devices to see what your app is going to preview like on those. So let's say I want to look at it on iPhone 4S. I'll click that screen and you can see, based on the bounding box of the Table View, that it's bigger than the size of the screen. So this black line here is the screen size and this blue outline is the Table View, so it's much bigger than the screen.
In other words, it's not adapting to the screen size. It can preview at other device sizes as well if you want. We'll go back it iPhone 8, now what we want to do is pin this Table View to the sides of the screen. So that way it expands and contracts based on the size of the device. Now the way that this works in iOS doesn't scale the content awkwardly. It's all handled by the system and it looks great. So to do that, I'm going to select the Table View, so make sure you see those black squares all the way around it.
If you don't have it selected just click away and click it anywhere in this blank space right here and select the Table View again, and then press shift, option, command and the equals sign. When you do that, if you have the document outline open, you're going to see that Constraints pop up right there. So Xcode has automatically added some constraints to our view. And if you don't see the document outline, by the way, you could show or hide it with this button right here. Now let's take a look at what our app looks like on different devices.
If you look at the bottom of the screen again, click on the different devices. So we'll go to iPhone SE, 4S, 8 Plus, and it fits within the screen size for every device. I'll go back to iPhone 8. So that's exactly what we want. Now let's run the application just to make sure it looks good inside of the simulator. I have an iPhone 8 simulator running already so I'm going to click where it says iPhone 8 Plus which is the default simulator and choose iPhone 8 and then I'm going to run the application with the button up here.
When the app first launches, you should see a blank, white screen, and then you should see some lines appearing on the screen. Now the lines may be hard to see so I'm going to scale up the simulator a little bit by clicking and dragging the corner and you should be able to see it now. So we don't have any data inside of our table but we do indeed have a Table View on the screen and it appears to be working and if you click and drag on it, it is scroll-able somewhat. So throughout the rest of this chapter, we're going to look at putting data inside of the Table View and organizing that data.
- Creating an Xcode project
- Configuring Xcode preferences
- Creating a table view controller
- Setting a data source for the table view
- Deleting, editing, and saving app data
- Working with multiple view controllers