On swipe to delete, the header and footer section

Question

I have a problem with my TableView. After adding a section footer, I realized that it moves when I swipe-to-delete.

I have created a minimal project with just this function to show the problem I face. This is the result I get

I have two TableViewCell : DetailCell

import UIKit

class DetailCell: UITableViewCell {


@IBOutlet weak var myTextLabel: UILabel!


override func awakeFromNib() {
    super.awakeFromNib()
}

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

}

and HeaderFooterCell

import UIKit

class HeaderFooterCell: UITableViewCell {
@IBOutlet weak var thisTextLabel: UILabel!

override func awakeFromNib() {
    super.awakeFromNib()
}

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

}

This is the tableViewController

import UIKit

class TableViewController: UITableViewController {

override func viewDidLoad() {
    super.viewDidLoad()
    let statusBarHeight = UIApplication.shared.statusBarFrame.height
    self.tableView.contentInset = UIEdgeInsetsMake(statusBarHeight, 0.0, 0.0, 0.0)
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
}

// MARK: - Table view data source

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

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 5
}


override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "myTableViewCell", for: indexPath) as! DetailCell
        switch indexPath.row {
            case 0: cell.myTextLabel?.text = "one - one - one - one"
            case 1: cell.myTextLabel?.text = "two - two - two - two"
            case 2: cell.myTextLabel?.text = "three - three - three - three"
            case 3: cell.myTextLabel?.text = "four - four - four - four"
            case 4: cell.myTextLabel?.text = "five - five - five - five"
            default: break
        }
        return cell
}

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 44
}
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let cell = tableView.dequeueReusableCell(withIdentifier: "headerOrFooterCell") as! HeaderFooterCell
    cell.thisTextLabel.text = "Less"
    return cell
}

override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 44
}
override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let cell = tableView.dequeueReusableCell(withIdentifier: "headerOrFooterCell") as! HeaderFooterCell
    cell.thisTextLabel.text = "More"
    return cell
}

// MARK: RowAction for DELETE and MODIFY
override func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
    let delete = UITableViewRowAction(style: .destructive, title: "Delete") { (action, indexPath) in
        print ("Delete")
    }

    let modify = UITableViewRowAction(style: .normal, title: "Modify") { (action, indexPath) in
        print("Modify")
    }

    return [delete, modify]
}

}

Did I make a mistake, or is there a way to 'block' horizontally the header and Footer?

Answer 1

Change type of header and footer to UITableViewHeaderFooterView and then use .dequeueReusableHeaderFooterView(withIdentifier: "headerOrFooterCell") tableView method. Don't forget to register nibs. I tested code below and it works without problem you were writing about.

import UIKit

class DetailCell: UITableViewCell {
  @IBOutlet weak var myTextLabel: UILabel!
  override func awakeFromNib() {
    super.awakeFromNib()
  }
}



class HeaderFooterCell: UITableViewHeaderFooterView {
  @IBOutlet weak var thisTextLabel: UILabel!

  override func awakeFromNib() {
    super.awakeFromNib()
  }
}


class TableViewController: UITableViewController {

  override func viewDidLoad() {
    super.viewDidLoad()
    let statusBarHeight = UIApplication.shared.statusBarFrame.height
    self.tableView.contentInset = UIEdgeInsetsMake(statusBarHeight, 0.0, 0.0, 0.0)

    self.tableView.register(UINib(nibName:"DetailCell", bundle: nil), forCellReuseIdentifier: "myTableViewCell")
    self.tableView.register(UINib(nibName:"HeaderFooterCell", bundle: nil), forHeaderFooterViewReuseIdentifier: "headerOrFooterCell")
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
  }

  // MARK: - Table view data source

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

  override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 5
  }


  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "myTableViewCell", for: indexPath) as! DetailCell
    switch indexPath.row {
    case 0: cell.myTextLabel?.text = "one - one - one - one"
    case 1: cell.myTextLabel?.text = "two - two - two - two"
    case 2: cell.myTextLabel?.text = "three - three - three - three"
    case 3: cell.myTextLabel?.text = "four - four - four - four"
    case 4: cell.myTextLabel?.text = "five - five - five - five"
    default: break
    }
    return cell
  }

  override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 44
  }
  override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    let cell = tableView.dequeueReusableHeaderFooterView(withIdentifier: "headerOrFooterCell") as! HeaderFooterCell

    cell.thisTextLabel.text = "Less"
    return cell
  }

  override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 44
  }
  override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let cell = tableView.dequeueReusableHeaderFooterView(withIdentifier: "headerOrFooterCell") as! HeaderFooterCell
    cell.thisTextLabel.text = "More"
    return cell
  }

  // MARK: RowAction for DELETE and MODIFY
  override func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
    let delete = UITableViewRowAction(style: .destructive, title: "Delete") { (action, indexPath) in
      print ("Delete")
    }

    let modify = UITableViewRowAction(style: .normal, title: "Modify") { (action, indexPath) in
      print("Modify")
    }

    return [delete, modify]
  }

}