Why do headers and footers follow the movement of a row when it is removed?

Question

I am building an application in Swift that relies heavily on table views. It uses both headers and footers as well as line deletion. For some strange reason, when I do a row deletion, the header and footer follow the sliding movement of the row that needs to be deleted. The following screenshots explain what I mean.

How do you avoid this?

I implement the delete function as follows:

// Deleting override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) { if editingStyle == .Delete { // Handling data source updating, cell row deletion, transition... } } 

Both the header and footer:

 // ## 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

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

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

Or implement a subclass of UITableViewHeaderFooterView, create a thread for it, register this icon with:

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

And get a title view with:

 let header = tableView.dequeueReusableHeaderFooterViewWithIdentifier("TableHeader") 

Answer 2

Just return headerCell.contentView instead of headerCell and your problem will be solved.