How to add spacing between UITableViewCell How to add spacing between UITableViewCell objective-c objective-c

How to add spacing between UITableViewCell


My easy solution using Swift :

// Inside UITableViewCell subclassoverride func layoutSubviews() {    super.layoutSubviews()    contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))}

Resultenter image description here


Swift Version

Updated for Swift 3

This answer is somewhat more general than the original question for the sake of future viewers. It is a supplemental example to the basic UITableView example for Swift.

enter image description here

Overview

The basic idea is to create a new section (rather than a new row) for each array item. The sections can then be spaced using the section header height.

How to do it

  • Set up your project as described in UITableView example for Swift. (That is, add a UITableView and hook up the tableView outlet to the View Controller).

  • In the Interface Builder, change the main view background color to light blue and the UITableView background color to clear.

  • Replace the ViewController.swift code with the following.

ViewController.swift

import UIKitclass ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {        // These strings will be the data for the table view cells    let animals: [String] = ["Horse", "Cow", "Camel", "Sheep", "Goat"]        let cellReuseIdentifier = "cell"    let cellSpacingHeight: CGFloat = 5        @IBOutlet var tableView: UITableView!        override func viewDidLoad() {        super.viewDidLoad()                // These tasks can also be done in IB if you prefer.        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)        tableView.delegate = self        tableView.dataSource = self    }        // MARK: - Table View delegate methods        func numberOfSections(in tableView: UITableView) -> Int {        return self.animals.count    }        // There is just one row in every section    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {        return 1    }        // Set the spacing between sections    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {        return cellSpacingHeight    }        // Make the background color show through    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {        let headerView = UIView()        headerView.backgroundColor = UIColor.clear        return headerView    }        // create a cell for each table view row    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {                let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!                // note that indexPath.section is used rather than indexPath.row        cell.textLabel?.text = self.animals[indexPath.section]                // add border and color        cell.backgroundColor = UIColor.white        cell.layer.borderColor = UIColor.black.cgColor        cell.layer.borderWidth = 1        cell.layer.cornerRadius = 8        cell.clipsToBounds = true                return cell    }        // method to run when table view cell is tapped    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {        // note that indexPath.section is used rather than indexPath.row        print("You tapped cell number \(indexPath.section).")    }}

Note that indexPath.section is used rather than indexPath.row in order to get the proper values for the array elements and tap positions.

How did you get the extra padding/space on the right and left?

I got it the same way you add spacing to any view. I used auto layout constraints. Just use the pin tool in the Interface Builder to add spacing for the leading and trailing constraints.


The way I achieve adding spacing between cells is to make numberOfSections = "Your array count" and make each section contains only one row. And then define headerView and its height.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{    return yourArry.count;}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{    return 1;}-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{    return cellSpacingHeight;}-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{    UIView *v = [UIView new];    [v setBackgroundColor:[UIColor clearColor]];    return v;}