iOS Swift：如何在TableView添加UIView并置于单元格上层？

我尝试在TableView上方添加一个UIView，但该视图被单元格遮挡。需求是让这个视图一半位于第0组的footer上，一半位于第1组的header上（空白区域是header的内边距）。

我使用了bringSubviewToFront方法但并未生效，以下是我试过的所有方法（已注释）：

func setupMyRankView(){
//        tableView.addSubview(myRankView)

//      tableView.footerView(forSection: 0)?.insertSubview(myRankView, aboveSubview: self.view)
//        tableView.footerView(forSection: 0)?.bringSubviewToFront(myRankView)
                self.view.bringSubviewToFront(myRankView)
//        tableView.cellForRow(at: indexPath)?.insertSubview(myRankView, aboveSubview: self.view)
//        tableView.cellForRow(at: indexPath)?.bringSubviewToFront(myRankView)
        
       myRankView.myRankLabel.text = "Hello"
       
    }

解决方法 #

1. 调整视图层级：将UIView添加到TableView的父视图 #

TableView的cell、header、footer都是它的子视图，直接添加到TableView内部会被动态复用的cell层级覆盖。正确做法是把myRankView添加到TableView的父视图上，确保它的层级在TableView之上：

func setupMyRankView(){
    // 先移除旧的视图避免重复添加
    myRankView.removeFromSuperview()
    // 添加到父视图而非TableView内部
    self.view.addSubview(myRankView)
    // 确保视图在最上层
    self.view.bringSubviewToFront(myRankView)
    
    myRankView.myRankLabel.text = "Hello"
    // 后续设置布局约束或frame
    setupMyRankViewLayout()
}

2. 精准计算跨区域的位置 #

要让视图跨第0组footer和第1组header，需要获取这两个视图的坐标系位置并计算中心点：

func setupMyRankViewLayout(){
    guard let footer0 = tableView.footerView(forSection: 0),
          let header1 = tableView.headerView(forSection: 1) else {
        return
    }
    
    // 将footer和header的frame转换到父视图坐标系
    let footerFrameInSuperview = tableView.convert(footer0.frame, to: self.view)
    let headerFrameInSuperview = tableView.convert(header1.frame, to: self.view)
    
    // 计算视图中心y轴：取footer底部和header顶部的中点
    let centerY = (footerFrameInSuperview.maxY + headerFrameInSuperview.minY) / 2
    // 自定义视图尺寸，这里假设宽度和TableView一致
    let width = tableView.bounds.width
    let height: CGFloat = 60 // 根据需求调整
    
    myRankView.frame = CGRect(x: 0, y: centerY - height/2, width: width, height: height)
}

3. 处理滚动时的位置同步 #

如果TableView支持滚动，需要在滚动时重新计算视图位置，避免视图偏移：

extension YourViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        guard scrollView == tableView else { return }
        setupMyRankViewLayout()
    }
}

注意事项 #

• 不要将视图添加到footer或header内部，否则会随着TableView滚动被复用或移出屏幕，导致视图消失或位置错乱。
• 确保myRankView.clipsToBounds = false，避免跨区域的内容被裁剪。
• 若使用AutoLayout，可以将视图的约束绑定到footer和header的位置，通过监听TableView滚动更新约束常数。

内容的提问来源于stack exchange，提问作者Rohan Dalmotra