One of the simplest UITableView projects

Basic Project Settings

Xcode does not provide a project template that uses UITableView directly, but we can manually create one based on a “Single View Application”.

Create a new “Single View Application” called UITableViewDemo, and then disable landscape mode using the Settings shown in the following image:

“For an iPhone app, we usually don’t choose Upside Down either, because the Mic and headset are in the opposite position when calling, which can easily cause trouble for users.”

Special note

Replace the new ViewController

Open main. storyboard, select “View Controller” in the scene, and delete it (because we need to bring in a new UITableView Controller) :

Then, opening the ViewController. Swift, change the ViewController to EpisodeListViewController, and let it from UITableViewController inheritance:


class EpisodeListViewController: UITableViewController { }

Copy the code

And then, in the list of projects, we put the ViewController. Swift filename, amended as EpisodeListViewController. Swift:

Then, go back to main. storyboard, in the “Object Library “, and drag a UITableViewController in:

The Identity inspector, we set the class to: EpisodeListViewController:

In this way, we brought in UITableViewController and EpisodeListViewController “correlation”.

“It’s important to set the Custom Class for the Controller. A lot of times our code doesn’t work because we forgot to set it.”

Special note

Finally, in the “Attribute Inspector “, we set our newly added UITableViewController to “Initial ViewController “. A big arrow will appear on the left of the UITableViewController:

So our UITableView will be loaded as the default View. Command + R, and we’ll see an empty UITableView in the emulator.

Table row Vs Table cell

Next, before we add anything to our UITableView, we need to distinguish between two concepts. In fact, our Table may contain a lot of content, and each record can be considered a row in the Table. But in reality, there’s only so much content that can be displayed on one screen of the iPhone, and we don’t have to allocate UI resources for content that doesn’t need to be displayed. So, for UITableView, every row on the screen, we’re going to have a UITableViewCell object. Finally, we have a limited set of UITableViewCell objects that display everything we need to display.

In fact, when we drag a UITableView into a Storyboard, Xcode already has a prototype of a UITableViewCell ready for us:

To customize the Cell, we can select it in “Document Outline “:

“Of course, you can also select it in the Storyboard, but make sure you select the Cell and not the Table View.”

Special note

Then, drag a UILabel in:

We let it fill the entire UITableViewCell, and Xcode will give us a hint for alignment:

Then, re-select the “Table View Cell” (make sure UILabel and Table View are not selected), set the Accessory to the “Disclosure Indicator “in the “Attribute Inspector”, A small arrow will appear on the right side of the Cell, indicating that clicking will switch to a new screen:

Next, we will give this Cell an “alias”, which is important. When we need to display multiple types of cells in a Table View, we can use this “alias” to create different Cell objects. Select the Table View Cell, and in the “Attribute Inspector “we set the identifier to “EpisodeItem” :

This completes the basic setup of a UITableViewCell object. In short, it can be summed up in three parts:

Customize Cell UI;
Set the Accessory;
Set Identifier;

After that, Command + R recompiled and executed, and the result was still an empty UITableView, which is normal, because we defined a Cell “prototype” without adding any real content. In the simulation in the last video, for: How many rows does a UITableView display? What does each line contain? UITableViewController outsources all of this to its delegate. We simply implement the corresponding protocol method.

UITableView Delegate

Back to EpisodeListViewController. Swift, hold down the Command click UITableViewController, in its definition, we can see the following code:

@available(iOS 2.0, *) public class UITableViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { }Copy the code

It complies with two protocols, the UITableViewDataSource and the UITableViewDelegate. The former determines what the UITableView displays, and the latter determines the user interaction of the UITableView. Let’s implement UITableViewDataSource first.

In EpisodeListViewController. Swift, add the following code:


class EpisodeListViewController: UITableViewController {
    // Omit for simplicity...

    override func tableView(tableView: UITableView, 
        numberOfRowsInSection section: Int) -> Int {
        return1; }}Copy the code

Just like the simulation in the last video, we use tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) defines the number of rows in a UITableView. For demonstration purposes, we just hard-code it to display one row.

Next, we need to determine the actual contents of each Cell. This is done using another method of UITableViewDataSource:


class EpisodeListViewController: UITableViewController {
    // Omit for simplicity...

    override func tableView(tableView: UITableView, 
        cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = 
            tableView.dequeueReusableCellWithIdentifier(
                "EpisodeItem".forIndexPath: indexPath)

        returncell; }}Copy the code

Here, we can think of indexPath as the position of different cells on the screen. We create a UITableViewCell object at each indexPath position using the Cell identifier we set up in our Storyboard, and then return it to the UITableView.

Then, Command + R compilers and executes, and we see a one-line UITableView in the emulator, whose Cell is our custom EpisodeItem.

“Here, we can ignore the status bar overwriting part of the UITableView, and we’ll deal with that later.”

Special note

These two methods, these are almost the methods that we have to define when we’re using UITableViewController. However, the contents of our Cell are the same on every line. In the next video, we’ll look at how custom cells and UITableView handle common user interaction events.

One of the simplest UITableView projects