iOS Tutorials: TableView with Section

OVERVIEW

Here in the project, the goal here is to populate data with the section created. In order to achieve this, we’ll create an array that contains a string which represent the section and We’ll create an array of an array that contains string which represent the items in the section. Let’s jump into action.

Create the project and drag TableView and Table View Cell from the object library. Your Main.storyboard should look like me. Before we forget, let’s configure the TableViewCell by giving it an identifier name which will be used later in the code. Here, we’ve given it a name called cell. 

Let’s jump into the coding section. We’ll have to create an IBOutlet for TableView only and include some of the TableView Protocol. Your code should look like below. The protocol used here is UITableViewDataSource and UITableViewDelegate and we’ve connected them both to the tableview by declaring it on the viewDidLoad().

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
    }

We can now create the data which include the section and the items in the section. As mentioned above, we’ve create an array that contains string which represent the section and create an array that contains an array with a string which represent the data in section.

var sectionHeader: Array<String> = ["Fruits","Vegetable","Snacks"]
var itemSection: Array<Array<String>> = [["Apple","Orange","Mango"], ["Cabbage","Tomatoes","Carrot","Cucumber","Spinach","Broccoli"] , ["Lays","Pringles","Pop Corn"]]

Some of the functions that will be used are shown below.

The first function below tell us how many section will be needed. We’ve return the value of sectionHeader which is 3 as it only contains Fruits, Vegetable and Snacks.

func numberOfSections(in tableView: UITableView) -> Int {
    return self.sectionHeader.count
}

The below code will show us the number of rows in a section. Here we’ll be returning the value of each section. Looking at the data above, we know that the fruits section contains 3 data which is Apple, Orange and Mango. Then, the vegetable section contains 6 data which is cabbage, tomatoes, carrot, cucumber, spinach, broccoli. Then the snack section contains 3 data which is lays, pringles and pop corn.

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return self.itemSection[section].count
}

The next function used here shows us the header of each section meaning the title of each section. This is the function that writes out Fruits, Vegetable and Snacks.

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return self.sectionHeader[section]
}

The function below is the one that populates the data. By now we should have all the data for the section but we are not populating the data out into each section. Remember we’ve renamed the tableviewcell into cell. Now by implementing the code below, you’ll see all the datas on each section.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    let item = self.itemSection[indexPath.section][indexPath.row]
        
    cell.textLabel?.text = item
    return cell
}

Your screen should look like below

 

The code is uploaded onto GitHub

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*