Brief Introduction to iOS Development - Part 17 - Customizing Table View Cell

In this session, we will be focusing on customizing table view cell. Although we can use basic style for our table view cell, but not all data can fit into a label. We can mixed some label and image into a single table view cell.

In the next project, we will be creating a table with an image and a label. For a start, create a single view application project known as "Intro17".

Next, we need to delete the default view controller UI and the view controller file. The storyboard should be empty as shown below.

Next, under object library, look for table view controller and drag a copy to the storyboard.

Under attribute inspector of the table view controller, make sure that the check box "Is Initial View Controller" is checked.

Then, we need to create a table view controller file for this table view controller. Create a new file, under iOS select source and Cocoa Touch Class. Click Next.

Under "Subclass of", select UITableViewController and enter the name FruitTable. The system will complete the rest of the name with "TableViewController".

Click Next and click create. A new file will be created.

Now, select the table view controller

Under Identity Inspector, select the class file you have just created. This is to link this UI to the file.

Next, select Table View under Document Outline as shown below.

Under Size Inspector, change the row height to 60.

Select Table View Cell as shown below:

Under Attribute Inspector, make sure the style remain as Custom and enter a name for the table view cell reuse identifier.

Next, drag an image view to the table view cell. It will be too big to fit into the cell. While still selecting the image view, go to Size Inspector and change the size of the image to 60 for width and 60 for height.

Now, we can fit the image view into the cell as shown below:

Next, drag a label to the cell and resize the label height as shown below. When we resize the label, align guide (long blue line) will appear to help us to position the label.

Drag the width of the label to the end of the table view cell as shown below.

Remove the text "Label" from the Attribute Inspector.

Since we are customizing the table view cell, we cannot use the default program. We need to create a new file for table view cell. Under source, select Cocoa Touch Class and click next.

Under the section "Subclass of", select UITableViewCell and enter the name Fruit. The system will name the file as FruitTableViewCell.

Click next and click Create. A new file will be created as shown below.

This file is a subclass of UITableViewCell as shown below. 

Next, we need to link file to the UI. Select the table view cell which is named myFruitCell as shown below.

Under Identity Inspector, select the new file we have just created as shown below.

Next, we need to add outlet for the image view and label we have created. Switch to assistant editor mode. Make sure right code file is shown on the right. If no please switch to FruitTableViewCell as shown below.

Control and drag the image view to the file. Named the image view as cellFruitImageView as shown below and click connect.

Do the same for label and connect with the label with the information shown below.

The resulting code should be similar to the screen shot below.

Now that the table view cell is setup, lets switch to table view controller file and setup the section headers as shown below.

Under Properties, add the following code:

    // MARK: Properties
    struct Fruit {
        var fruitName: String
        var fruitPicture: UIImage
    }
    
    var fruitCollection = [Fruit]()

Screen shot shown below:

In the previous code, we create a structure that contain a string and an image. We also create an empty array for the collection of fruits data.

After the section properties, mark another section with the following code:

    // MARK: Load Sample Fruit
    func loadSampleFruit() {
        
        let fruit1 = Fruit(fruitName: "Apple", fruitPicture: UIImage(named: "apple")!)
        let fruit2 = Fruit(fruitName: "Orange", fruitPicture: UIImage(named: "orange")!)
        let fruit3 = Fruit(fruitName: "Lemon", fruitPicture: UIImage(named: "lemon")!)
        let fruit4 = Fruit(fruitName: "Lime", fruitPicture: UIImage(named: "lime")!)
        let fruit5 = Fruit(fruitName: "Grapes", fruitPicture: UIImage(named: "grapes")!)
        let fruit6 = Fruit(fruitName: "Star Fruit", fruitPicture: UIImage(named: "starfruit")!)
        
        fruitCollection += [fruit1, fruit2, fruit3, fruit4, fruit5, fruit6]

    }

In this example, we create a set of sample fruits with sample image and add them to the array. Screen shot shown below:

Under the viewDidLoad function, add a line loadSampleFruit(). This is to run the function of loading the sample code.

Since we have created the sample, we must also include the sample pictures. You can search for image with dimension 120 x 120. Image with dimension 240 x 240 is also acceptable, so do 60 x 60. Please follow the fair use principle and do not distribute such pictures commercially. Under project navigator, select Assets as shown below. Alternatively, you can download this project form Github (link at the end of this document) and extract the pictures.

Click on the + sign and select New Folder.

Rename the folder as Fruits as shown below:

Now, click + sign again and select New Image Set as shown below:

Repeat 5 more times and rename the image to the name of various fruits as shown below. You can select your own fruit.

Finally, we need to drag the image to the 2x box for each image set as shown below.

Repeat similar for other fruits

Next, we need to configure the data source in the table view controller file as shown below.

Change the return to 1 for number of section in the table view.

For the number of rows in the table, return the count of the array. In this case, it should be fruitCollection.count as shown below.

Next, we need to uncomment the following section:

Change the reuse identifier and configure the cell as follows:

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("myFruitCell", forIndexPath: indexPath) as! FruitTableViewCell

        // Configure the cell...
        let fruit = fruitCollection[indexPath.row]
        
        cell.cellFruitImageView.image = fruit.fruitPicture
        cell.cellFruitLabel.text = fruit.fruitName

        return cell
    }

In this program, we set the reuse identifier to the name we set in the UI. Then to configure each cell, we use the index path for the table to iterate through each element in an array and assign the image and name to the image view and label respectively.

Now lets run the app and the result should be like the screen shot below.

A copy of this program can be found at Github at https://github.com/SwiftiCode/Intro17

*** End ***