UITableView and UITableViewCell Customization in Swift

Shrikar Archak / January 18, 2015

3 min read

UITableView and UITableViewCell Customization in Swift

Building Airbnb Discover Page

UITableView and UITableViewCell Customization in Swift

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
UITableView and UITableViewCell Customization in Swift
  • 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.
UITableView and UITableViewCell Customization in Swift
  • Drag Label on the UITableViewCell.
UITableView and UITableViewCell Customization in Swift
  • 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.

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
    }
}

Shrikar Archak

@shrikar84

IndieHacker and Software Developer. Getting started to build in public.Tweet me @shrikar84 for any collaboration opportunity or brainstorming.

#developer#ml-engineer#seo

Subscribe to the newsletter

Get notified when new content or topic is released.

You won't receive any spam! ✌️