Swift中用AutoLayout实现展开收起UI：选UITableViewCell还是Section？

Hey there! Let’s break down your problem step by step—this is a super common iOS UI pattern, so you’re in good hands.

方案选择：UITableViewCell vs Section #

First, let’s clarify which approach fits your UI better:

1. Custom UITableViewCell (Best for single-row expansion) #

If each expandable unit is a standalone row (like a single cell that reveals extra content when tapped), go with this option. You’ll embed the expanded content directly inside the cell, using AutoLayout to control its visibility and height.

2. Section-Based Expansion (Best for grouped content) #

If tapping a section header reveals an entire group of related rows (hiding/showing all rows under a section), then managing expansion via sections makes more sense. This requires tracking each section’s expanded state and adjusting row counts dynamically.

How to Implement Expand/Collapse Functionality #

Let’s dive into the details for both approaches:

Approach 1: Expand/Collapse Inside a Custom Cell #

1. Update Your Data Model
   Add a boolean property to track expansion state for each item:

   struct YourDataModel {
       let title: String
       let basicContent: String
       let expandedContent: String
       var isExpanded: Bool = false // Tracks if the cell is expanded
   }
   

2. Layout the Cell with AutoLayout

   • Add your basic content views (title, short info) and expanded content views (extra text, buttons) to the cell’s contentView.
   • Set up full constraints for all views, and add a height constraint for the expanded content container. Initially set this constraint’s constant to 0 (or hide the view).
   • When the cell expands, update this height constraint to match the expanded content’s intrinsic height, then animate the layout change.

3. Handle Tap to Toggle Expansion
   Use tableView(_:didSelectRowAt:) to toggle the state and refresh the cell:

   func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
       tableView.deselectRow(at: indexPath, animated: true)
       var item = yourDataSource[indexPath.row]
       item.isExpanded.toggle()
       yourDataSource[indexPath.row] = item
       tableView.reloadRows(at: [indexPath], with: .automatic)
   }
   

   In your cell’s configure(with:) method, apply the state:

   func configure(with item: YourDataModel) {
       titleLabel.text = item.title
       basicContentLabel.text = item.basicContent
       expandedContentLabel.text = item.expandedContent
       
       // Animate the height change
       expandedContainerHeightConstraint.constant = item.isExpanded ? expandedContentLabel.intrinsicContentSize.height : 0
       UIView.animate(withDuration: 0.3) {
           self.layoutIfNeeded()
       }
   }
   

Approach 2: Expand/Collapse Entire Sections #

1. Track Section Expansion States
   Create an array to keep track of whether each section is expanded:

   var sectionExpandedStates: [Bool] = []
   // Initialize in viewDidLoad:
   sectionExpandedStates = Array(repeating: false, count: yourSectionData.count)
   

2. Adjust Row Count Based on State
   Modify numberOfRowsInSection to return rows only if the section is expanded:

   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       return sectionExpandedStates[section] ? yourSectionData[section].rows.count : 0
   }
   

3. Add Tap Gesture to Section Header
   Create a custom header view, add a tap gesture, and toggle the state when tapped:

   class CustomHeaderView: UITableViewHeaderFooterView {
       var sectionIndex: Int?
       override init(reuseIdentifier: String?) {
           super.init(reuseIdentifier: reuseIdentifier)
           addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(headerTapped)))
       }
       
       @objc private func headerTapped() {
           guard let section = sectionIndex else { return }
           // Notify the view controller to toggle state and reload
           delegate?.toggleSection(at: section)
       }
   }
   

   In your view controller:

   func toggleSection(at section: Int) {
       sectionExpandedStates[section].toggle()
       tableView.reloadSections(IndexSet(integer: section), with: .automatic)
   }
   

AutoLayout Key Tips #

• For cell-based expansion: Ensure all views in the cell have complete constraints (top, bottom, leading, trailing) relative to the contentView. Use UITableView.automaticDimension for row height, and set a reasonable estimatedRowHeight.
• For section-based expansion: Make sure each row’s cell has proper AutoLayout constraints so the table view can calculate row heights automatically.

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