自定义表头多选TableView：解决分区展开/折叠时箭头抖动问题

Hey there, let's break down why your arrow is jittering and fix it step by step.

What's Causing the Jitter? #

First, let's diagnose the issues in your current code:

1. Reversed Logic: Your setExpanded method does the opposite of what you want—when the section should be expanded (arrow up), it rotates an already-up arrow 180° to point down. That's a core logic mismatch.
2. Unreliable Angle Check: Calculating the arrow's current angle via atan2 on the transform's a/b values is prone to precision errors. When the header is reused or reloaded, this check can trigger incorrect rotations.
3. Duplicate Animations: In toggleSection, you call header.setExpanded manually and then reload the section. This triggers viewForHeaderInSection again, which calls setExpanded a second time—two overlapping animations cause the jitter.

Step-by-Step Fix #

1. Refactor the Header to Bind State Directly

Update your CollapsibleFilterTableViewHeader to use a dedicated isExpanded property that automatically updates the arrow direction, no angle guessing needed:

class CollapsibleFilterTableViewHeader: UITableViewHeaderFooterView {
    @IBOutlet weak var arrowImageView: UIImageView!
    var isExpanded: Bool = false {
        didSet {
            updateArrowDirection()
        }
    }
    weak var delegate: FilterHeaderDelegate? // Keep your existing delegate protocol

    private func updateArrowDirection() {
        // Set target angle: up = 0 radians, down = π radians
        // Adjust this if your arrow's default orientation is different
        let targetAngle: CGFloat = isExpanded ? 0 : .pi
        
        // Smooth animation to avoid jumps
        UIView.animate(withDuration: 0.25) {
            self.arrowImageView.transform = CGAffineTransform(rotationAngle: targetAngle)
        }
    }

    // Optional: Keep this method for backward compatibility
    func setExpanded(expanded: Bool) {
        isExpanded = expanded
    }

    // Handle header tap (adjust to match your trigger method)
    @objc func headerTapped() {
        delegate?.toggleSection(header: self)
    }
}

2. Fix the View Controller Logic to Avoid Duplicate Animations

In your FiltersViewController, stop reloading the entire section (which re-creates the header) and instead update only the rows and header state directly:

class FiltersViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    @IBOutlet weak var filtersTableView: UITableView!
    var filterSections: [FilterSection] = [] // Your section data model array

    // MARK: - UITableView Setup
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "CollapsibleFilterTableViewHeader") as! CollapsibleFilterTableViewHeader
        let sectionData = filterSections[section]
        header.isExpanded = sectionData.isExpanded
        header.delegate = self
        return header
    }

    func toggleSection(header: CollapsibleFilterTableViewHeader, section: Int) {
        let sectionData = filterSections[section]
        let newExpandedState = !sectionData.isExpanded
        
        // Update your data source first
        filterSections[section].isExpanded = newExpandedState
        
        // Update the header directly (no need to reload the section!)
        header.isExpanded = newExpandedState
        
        // Only refresh the rows in the section, not the whole section
        let rowCount = sectionData.rows.count
        let indexPaths = (0..<rowCount).map { IndexPath(row: $0, section: section) }
        
        if newExpandedState {
            filtersTableView.insertRows(at: indexPaths, with: .automatic)
        } else {
            filtersTableView.deleteRows(at: indexPaths, with: .automatic)
        }
    }
}

3. Align Initial State

Double-check your arrow image's default orientation:

• If the arrow starts pointing up, set isExpanded's initial value to true (matches expanded state)
• If it starts pointing down, set isExpanded to false (matches collapsed state)

This ensures the first load doesn't trigger an unexpected animation.

Why This Works #

• Direct State Binding: No more guessing the arrow's current angle—we explicitly set the direction based on the section's expansion state.
• Single Animation: We update the header's state directly instead of relying on section reloads, so only one smooth rotation happens.
• Lightweight Refresh: Inserting/deleting rows instead of reloading the section avoids re-creating the header entirely, eliminating redundant work and animation conflicts.

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