Why do headers and footers follow movement of row when deleting it?

Question

I'm building an app in Swift that relies heavily upon Table Views. It uses both headers and footers, as well as row deletion. For some strange reason when I perform a row deletion, the header and footer follows the sliding movement of the row to be deleted. The below screenshots explain what I mean.

How do you avoid this?

I'm implementing the delete function like this:

// Deleting
override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
    if editingStyle == .Delete {

        // Handling data source updating, cell row deletion, transition...

    }
}

And the header and footer like this:

// ## Header ##
override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerCell = tableView.dequeueReusableCellWithIdentifier("shoppingHeader") as! ShoppingTableViewHeaderCell

    // Clear up startup background
    headerCell.textLabel?.backgroundColor = UIColor.clearColor()

    // Add covering background color
    headerCell.backgroundColor = UIColorFromHex(0x22b8a3, alpha: 1)

    // Set store image, or store title if image is unavailable
    let url = NSURL(string: dataSource[sortedStores[section]]["meta_data"]["logo"].string!)
    let data = NSData(contentsOfURL: url!)
    if data != nil { // Store image
        let image = UIImage(data: data!)
        headerCell.imageView?.image = imageResize(image: image!, cellWidth: 90, cellHeight: 30)
    } else { // Store name label
        headerCell.textLabel?.text = dataSource[sortedStores[section]]["meta_data"]["nameStore"].string
        headerCell.textLabel?.font = UIFont(name: "HelveticaNeue-Light", size: 16)
        headerCell.textLabel?.textColor = UIColor.whiteColor()
    }

    // Right hand side details: define strings
    let address = dataSource[sortedStores[section]]["meta_data"]["street"].string
    let distanceMeasure = dataSource[sortedStores[section]]["meta_data"]["distance"].int!
    let numberOfOffers = dataSource[sortedStores[section]]["offers"].count

    // Right hand side details: assign strings to variables
    headerCell.rightLabel0.text = address
    headerCell.rightLabel1.text = "\(distanceMeasure) m away"
    if numberOfOffers == 1 {
        headerCell.rightLabel2.text = "1 offer available"
    } else {
        headerCell.rightLabel2.text = "\(numberOfOffers) offers available"
    }

    // Right hand side details: set text color
    headerCell.rightLabel0.textColor = UIColor.whiteColor()
    headerCell.rightLabel1.textColor = UIColor.whiteColor()
    headerCell.rightLabel2.textColor = UIColor.whiteColor()

    return headerCell
}


// ## Footer ##
override func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let footerCell = tableView.dequeueReusableCellWithIdentifier("shoppingFooter") as! UITableViewCell

    // Set black color to show that footer moves too.
    footerCell.backgroundColor = UIColor.blackColor() //clearColor()

    return footerCell
}

Answer 1

Simply return headerCell.contentView instead of headerCell and your problem will be resolved.

Answer 2

I think using reusable cells for headers and footers is your problem. Try to use nibs instead. Create a separate .xib files for header and footer cells. And get your cell with:

let headerCell = NSBundle.mainBundle().loadNibNamed("YourNibName", owner: self, options: nil).first as! ShoppingTableViewHeaderCell

Or implement a UITableViewHeaderFooterView's subclass, create a nib for it, register this nib with:

 tableView .registerNib(UINib(nibName:"YourNibName", bundle: nil), forHeaderFooterViewReuseIdentifier: "TableHeader") 

And get your header's view with:

let header = tableView.dequeueReusableHeaderFooterViewWithIdentifier("TableHeader")