iOS App Development iOS Swift Tutorial iOS8 Xcode App Design

UITableView and UITableViewCell Customization in Swift

Building Airbnb Discover Page

images

Our version

images

We will be using the UITableView and custom UITableViewCell to implement this page. One way to make your app standout from the crowd is by uitableviewcell customization, and many feature likes autolayouts play and important role to make it as easy as possible. Lets get started.

  • Create a single view application
  • Delete the existing view controller on the main storyboard
  • Drag a table view controller on to the main storyboard and make it the initial view controller
  • Select the UITableViewCell and change the height of the cell to 300

images

  • Drag imageview on the UITableViewCell . Select the pin icon and set the make sure the Trailing,Leading, Top and Bottom space to 0. Also unclick the constraints to margin.

images

  • Drag Label on the UITableViewCell.

images

  • Create a model for the list of places
  • Create a new class subclassing UITableViewController and call it PlacesTableViewController
  • Create a new class subclassing UITableViewCell and call it PlacesTableViewCell
  • Select the UITableViewController and assign the class PlacesTableViewController in identity inspector
  • Select the Table view cell and assign the class PlacesTableViewCell in identity inspector
  • Create IBOutlet from imageview and label to the PlacesTableViewCell.
  • Select the tableviewcontroller > Go to Editor > Embed in Navigation Controller
  • Add the Discover title on the navigation bar. Also add two bar button items on the navigation bar for search and bookmark.

 

Tip!
In case you are looking for the application of static tableview or grouped tableview. Find out more on how to build a beautiful settings page here Xcode 6 Tutorial : Grouped UITableView

Data.swift

Just make sure you add 4 images to your project and have the name bridge.jpeg, mountain.jpeg, snow.jpeg and sunset.jpeg. You can go and find images here Stock Images.

import Foundation

class Data {
    class Entry {
        let filename : String
        let heading : String
        init(fname : String, heading : String) {
            self.heading = heading
            self.filename = fname
        }
    }

    let places = [
        Entry(fname: "bridge.jpeg", heading: "Heading 1"),
        Entry(fname: "mountain.jpeg", heading: "Heading 2"),
        Entry(fname: "snow.jpeg", heading: "Heading 3"),
        Entry(fname: "sunset.jpeg", heading: "Heading 4")
    ]

}

PlacesTableViewCell.

import UIKit

class PlacesTableViewCell: UITableViewCell {

    @IBOutlet weak var bkImageView: UIImageView!
    @IBOutlet weak var headingLabel: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()

    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }

}

PlacesTableViewController

By default tableview cell are seperated by a line. We could remove that line by setting seperatorStyle to UITableViewCellSeparatorStyle.None

import UIKit

class PlacesTableViewController: UITableViewController {

    let data = Data()
    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.separatorStyle = UITableViewCellSeparatorStyle.None
    }

    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.places.count
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as PlacesTableViewCell
        let entry = data.places[indexPath.row]
        let image = UIImage(named: entry.filename)
        cell.bkImageView.image = image
        cell.headingLabel.text = entry.heading
        return cell
    }
}

If you are interested in learning iOS Development I suggest you take a look at Building an app every month in 2015

About the author

Shrikar

Backend/Infrastructure Engineer by Day. iOS Developer for the rest of the time.

  • Andy Dewan

    I have followed your tutorial exactly, and yet my table cells are completely blank. I’ve added things like buttons to see if they would show up and they haven’t. Do you have any suggestions?

    • http://shrikar.com shrikar

      Did you change the class of the tableview cell to your custom class?

      • Vd Thatte

        Hey, Shrikar. Awesome Tutorial! I’m having the same problem though. And yes, I did change the class of my prototype cell to the custom class. Any ideas? Thanks a ton!!

  • coder

    I’m curious, using this tutorial, I would like to make a horizontal scroll / table rather than vertical. would you recommend using a collectionview to accomplish that or try to manipulate this code?

  • Eugene

    Thanks!

  • David

    I’m having the same problem you were having getting the images to show up. I updated the code to the same as what worked for you, but still not getting the images to display. The cell class is properly set and the headings display properly, but no images. Any thoughts? (xc 6.1.1)

  • David

    Found the problem. your data file has “.jpeg” as the file extensions, these need to be “.jpg” (at least that’s what I needed to fix to work on xc 6.1.1)

  • HugoC

    Hi, good work Shrikar. Now i would like to access to another viewcontroller when users clicks on a pictures. How could i perform that ? thx again

  • http://lovewidapple.blogspot.com/ divgun

    One Step Missing :)

    In the attribute inspector of Table view cell prototype , u need to add identifier “Cell”

  • Ben

    Thanks a lot Shrikar! I watched your YouTube video of this tutorial and it worked like a charm! I am a beginner tho and i am wondering how can i add more than one of these tables with images. What do i have to duplicate and set up to achieve this? My goal is to have a static TableView with different rows at as the entry point for the app and have them segue to individual TableViews with images like you have created here. Your help would be greatly appreciated! Thanks.

    • http://shrikar.com shrikar

      The logic should be same when you segue instead of seguing to UIViewController create a tableview controller and segue to that it should work exactly like you want.

      • Ben

        Thanks for your super quick reply!

        And yes, it does work. I do have a static TableView and it Segues to the PlacesTableViewController and it works perfectly.

        But when i want a second static Table cell segue to a second PlacesTableView(Controller), i thought i duplicate the Data.swift file and rename it, duplicate the PlacesTableViewController.swift file, connect it to the new Data.swift file (with different images in it) etc. But it doesnt seem to work that way. Could you guide me in the right direction? Thanks a lot.

        • http://shrikar.com shrikar

          I wouldn’t do it that way. Have only 1 table view controller but depending on what cell you tapped you can get information from different places. Lets say there are there locations A, B, C etc and when you tap on A in the viewdidload load all the locations for A, and if you tapped on B load it for all B. You can pass which cell you tapped in prepare for segue and use that information to load different data.

          • Ben

            Right. Now it comes all together. Thanks again!

  • Jay

    Hi Shrikar, awesome tutorial! I use it try to build up a phone book search which includes both name and )phone numbers. the name filter works prefectly. but the phone number remains same as row1 object = row1 object. which means the name has been filtered but the phone number didnt follow. how can i display and segue the number (numberArray[row]) following the flitered name? Thanks a lot

    newScene.nameTarget = (filtered[row])
    newScene.numberTarget = (numberArray[row])

  • Purpo

    How to do the same thing with data coming from a server (eg JSON format)?

    • Shrikar

      Search for quiz app or trivia you will get it on my site

/* ]]> */