UITableView 重新加载部分时，内容插入会发生变化。

Question

我有一个可展开的UITableView。当用户点击标题时，相关单元格将以动画形式显示（RowAnimation.Fade），然后UITableView滚动到该标题（扩展标题）。当用户再次点击该标题时，它会折叠。

我的目标是：我需要具有标题和单元格的可展开的UITableView。当用户点击标题时，单元格需要使用RowAnimation.Fade打开，然后滚动到该标题。

额外奖励：如果我可以在用户点击标题时使箭头动画，那就太好了，但我认为这会导致另一个错误，因为我们在同一线程上运行了很多动画（主线程）。

我的问题是，当用户点击标题时，tableView内容插入会更改，并且整个标题都会进入负Y位置。因此，发生了奇怪的动画。（例如，标题看起来像单元格的中心）。但是，在动画完成后，一切看起来都正确。

func toggleSection(header: DistrictTableViewHeader, section: Int) {
self.selectedHeaderIndex = section
self.cities[section].isCollapsed = !self.cities[section].isCollapsed
let contentOffset = self.tableView.contentOffset
self.tableView.reloadSections(IndexSet(integer: section), with: UITableView.RowAnimation.fade)
self.tableView.scrollToRow(at: IndexPath(row: NSNotFound, section: section) /* you can pass NSNotFound to scroll to the top of the section even if that section has 0 rows */, at: UITableView.ScrollPosition.top, animated: true)
}

此外：我设置标题和单元格的高度如下。

func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 1
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 60
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 140
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let header: DistrictTableViewHeader = tableView.dequeueReusableHeaderFooterView(withIdentifier: headerId) as! DistrictTableViewHeader
    //let header = DistrictTableViewHeader()

    header.customInit(title: self.cities[section].name, section: section, delegate: self,isColapsed: self.cities[section].isCollapsed,isSelectedHeader: section == selectedHeaderIndex ? true : false)
    return header
}

我的自定义headerView类：

protocol ExpandableHeaderViewDelegate {
func toggleSection(header: DistrictTableViewHeader, section: Int)
}

class DistrictTableViewHeader: UITableViewHeaderFooterView {
var delegate: ExpandableHeaderViewDelegate?
var section: Int!

let nameLabel: UILabel = {
   let l = UILabel()
    l.textColor = Color.DistrictsPage.headerTextColor
    return l
}()

private let arrowImage: UIImageView = {
  let i = UIImageView()
    let image = UIImage(named: "ileri")?.withRenderingMode(UIImage.RenderingMode.alwaysTemplate)
    i.image = image
    i.contentMode = .scaleAspectFit
    return i
}()
var willAnimate: Bool = false
var isColapsed: Bool!{
    didSet{
        expandCollapseHeader()
    }
}

private func expandCollapseHeader(){
    if(willAnimate){
        if(!self.isColapsed){
            let degrees : Double = 90 //the value in degrees
            self.nameLabel.textColor = Color.Common.garantiLightGreen
            self.arrowImage.tintColor = Color.Common.garantiLightGreen
            self.arrowImage.transform = CGAffineTransform.init(rotationAngle: CGFloat(degrees * .pi/180))
            self.contentView.backgroundColor = UIColor(red:0.97, green:0.97, blue:0.97, alpha:1.0)
        }else{
            let degrees : Double = 0 //the value in degrees
            self.nameLabel.textColor = Color.DistrictsPage.headerTextColor
            self.arrowImage.tintColor = UIColor.black
            self.arrowImage.transform = CGAffineTransform.init(rotationAngle: CGFloat(degrees * .pi/180))
            self.contentView.backgroundColor = UIColor.white
        }
    }else{
        if(!isColapsed){
            let degrees : Double = 90 //the value in degrees
            self.nameLabel.textColor = Color.Common.garantiLightGreen
            self.arrowImage.tintColor = Color.Common.garantiLightGreen
            self.arrowImage.transform = CGAffineTransform.init(rotationAngle: CGFloat(degrees * .pi/180))
            self.contentView.backgroundColor = UIColor(red:0.97, green:0.97, blue:0.97, alpha:1.0)
        }else{
            let degrees : Double = 0 //the value in degrees
            self.nameLabel.textColor = Color.DistrictsPage.headerTextColor
            self.arrowImage.tintColor = UIColor.black
            self.arrowImage.transform = CGAffineTransform.init(rotationAngle: CGFloat(degrees * .pi/180))
            self.contentView.backgroundColor = UIColor.white
        }
        layoutSubviews()
    }
}

override init(reuseIdentifier: String?) {

    super.init(reuseIdentifier: reuseIdentifier)
    self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(selectHeaderAction)))
    nameLabel.translatesAutoresizingMaskIntoConstraints = false
    nameLabel.font = UIFont.systemFont(ofSize: 22)
    nameLabel.textColor = Color.DistrictsPage.headerTextColor
    contentView.addSubview(nameLabel)
    nameLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
    nameLabel.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 15).isActive = true

    arrowImage.tintColor =  UIColor(red:0.32, green:0.36, blue:0.36, alpha:1.0)
    arrowImage.translatesAutoresizingMaskIntoConstraints = false
    contentView.addSubview(arrowImage)
    arrowImage.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
    arrowImage.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -20).isActive = true
    arrowImage.widthAnchor.constraint(equalToConstant: 20).isActive = true

}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}
func rotate(_ toValue: CGFloat) {
    self.transform = CGAffineTransform.init(rotationAngle: toValue)
}
@objc func selectHeaderAction(gestureRecognizer: UITapGestureRecognizer) {
    let cell = gestureRecognizer.view as! DistrictTableViewHeader
    delegate?.toggleSection(header: self, section: cell.section)
}


func customInit(title: String, section: Int, delegate: ExpandableHeaderViewDelegate,isColapsed: Bool, isSelectedHeader: Bool) {
    self.nameLabel.text = title
    self.nameLabel.accessibilityIdentifier = title
    self.section = section
    self.delegate = delegate
    self.willAnimate = isSelectedHeader
    self.isColapsed = isColapsed
}

override func layoutSubviews() {
    super.layoutSubviews()
    self.contentView.backgroundColor = UIColor.white

}
}

在下图中，可以清楚地看到错误。当“Some Data”和“Another City”打开并点击“Some Data”时，会出现动画错误。“Another city”会移到其单元格上方，然后向上移动。应该做的是，“Another city”应该保持在原位，然后在关闭“Some Data”单元格时向上移动。 示例项目：https://github.com/emreond/tableViewLayoutIssue

- Emre Önder

---

为什么这个问题会被踩？你能解释一下吗？ - Emre Önder

你好@Emre，我刚刚看了你的问题，但是我无法确定动画中出现了什么问题，你能否制作一个小视频或gif并将链接放在这里...这样我就可以得到确切的问题。还有一件事...如果你有任何其他样本（可能是应用程序或设计），描述你期望的行为，那么更好理解你的问题。顺便说一句，我不是一个会downvote你的问题的人。 - Mehul Thakkar

@EmreÖnder 你可以试试这个。https://dev59.com/3WQo5IYBdhLWcg3wbexJ - Shubham

还在寻找解决方案吗？或者已经找到了一个。 - Mahesh Agrawal

我使用了RATreeView。它是一个使用tableview创建的包装器。 - Mahesh Agrawal

Answer 1

经过多日的搜索和尝试，我发现将UITableViewStyle更改为组可以解决问题。因此，我将初始化UITableView更改为：

let tableView = UITableView.init(frame: CGRect.zero, style: .grouped)

另外，在滚动方面，我需要添加CATransaction以捕获完成。

CATransaction.begin()
DispatchQueue.main.async {
self.tableView.beginUpdates()
CATransaction.setCompletionBlock {
    // Code to be executed upon completion
        self.tableView.scrollToRow(at: IndexPath(row: NSNotFound, section: section) /* you can pass NSNotFound to scroll to the top of the section even if that section has 0 rows */, at: UITableView.ScrollPosition.top, animated: true)
}
    self.tableView.reloadSections(IndexSet.init(integer: section), with: UITableView.RowAnimation.fade)
    self.tableView.endUpdates()
}
CATransaction.commit()
}

- Emre Önder

Answer 2

我曾经遇到过同样的问题，你可以使用以下方法来解决：

UIView.performWithoutAnimation {
    self.tableView.reloadSections(IndexSet(integer: section), with: .fade)
}

当然，你会失去动画效果，但也不会再出现闪烁问题。

- Guillaume Ramey

---

但是我也想要像我在问题中提到的那样的动画。 - Emre Önder