Layout

Others

Sections & Headings

A table view is made up of zero or more sections, each with its own rows. Sections are identified by their index number within the table view, and rows are identified by their index number within a section.

A section header can optionally precede any section, and optionally be followed by a section footer.

Table views can have one of two styles, UITableViewStylePlain and TableViewStyleGrouped.

When you create a UITableView instance, you must specify a table style, and this style cannot be changed.

In the plain style, section headers and footers float above the content if the part of a complete section is visible.

Let's go to our FirstApp where we have created TaskList which contains Daily Tasks, Weekly Tasks, and Monthly Tasks.

Now we want to move that task list to a table view, and split it into three different sections and add headers for each section.

The storyboard has absolutely nothing to do; we need to create three separate arrays of strings for our tasksViewController.swift file.

You can see that this time we have one extra method to implement .i.e numberOfSections(in tableView: UITableView) -> Int. We have three different sections, one for daily tasks, one for weekly tasks, one for monthly tasks. So here we have just to return the number 3.

func numberOfSections(in tableView: UITableView) -> Int {
return 3
}

Next, we need to implement the tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int method. This time we have to add a little bit of logic so that we can return a different number for each section, based on the size of the array.

Moving on to the second required method tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell to return the cell for each row. So, once again, this method is called automatically, and it will ask for a UITableViewCell to be returned for each row of each section.

You can see the right data, but it still looks like one section, they are all just one after the other. Now we want to have headings for each section. So let's go into Xcode and add a new method tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? and return a string based on the section number.

You can see headings, but it is useful for some visual separation between sections. So go back into Xcode and open the Main.storyboard. Select Table View and open up the Attribute Inspector in the upper section in the right panel and change the style from Plain to Grouped.

Run your application and now you will see more separation between our different sections and the rows in those sections.