Implementing Expandable/Collapsible Sections in UITableView for iOS

Introduction

In iOS development, UITableView is a common component used to display list data. Occasionally, developers need to implement expandable and collapsible sections, similar to an accordion effect, to enhance user experience. Based on community Q&A data, this article deeply analyzes core methods for achieving this functionality.

Core Method

As described in the best answer, an effective approach is to use a custom header row as the first row of each section. This method maintains a boolean array to track the expansion state of sections and toggles the state upon user click, reloading the section with animation.

Implementation steps include:

1. Define an array sectionExpanded to store boolean values for each section.
2. In tableView:didSelectRowAtIndexPath:, check if it is a header row and update the boolean value.
3. Use reloadSections:withRowAnimation: to reload the section and apply animation.
4. In tableView:numberOfRowsInSection:, return the row count based on the boolean value.
5. In tableView:cellForRowAtIndexPath:, provide different cells for header rows and regular rows.

Code Example

Here is a simplified implementation in Objective-C:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.row == 0) {
        NSNumber *currentState = self.sectionExpanded[indexPath.section];
        self.sectionExpanded[indexPath.section] = @(![currentState boolValue]);
        [tableView reloadSections:[NSIndexSet indexSetWithIndex:indexPath.section] withRowAnimation:UITableViewRowAnimationFade];
    }
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if ([self.sectionExpanded[section] boolValue]) {
        return [self.dataForSection[section] count] + 1;
    } else {
        return 1;
    }
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.row == 0) {
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"HeaderCell"];
        cell.textLabel.text = @"Section Header";
        return cell;
    } else {
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"DataCell"];
        cell.textLabel.text = self.dataForSection[indexPath.section][indexPath.row - 1];
        return cell;
    }
}

In the code, self.sectionExpanded is an NSMutableArray, and self.dataForSection is an array of NSArrays.

Overview of Alternative Methods

Besides the above method, one can use tableView:viewForHeaderInSection: to return a custom UIView as the header, with buttons or gestures to trigger expansion/collapse. For example, Answer 2 references Apple's sample, and Answers 3 and 4 provide Swift implementations using SectionHeaderView class or custom CollapsibleTableViewHeader cells.

Discussion and Comparison

The custom header row method is straightforward and easy to implement but may require additional cell identifier management. Using UIView as header view allows more flexible UI customization but can be more complex. The choice depends on specific needs, such as UI design and performance considerations. For instance, Apple's sample method might be preferable for grouped styles or complex animations.

Conclusion

Implementing expandable/collapsible sections in UITableView involves multiple methods, with the core being controlling section row counts and adding animations. This article recommends starting with the custom header row approach, which developers can adapt and optimize based on project requirements. Proper data management and UITableView delegate methods enable a smooth user experience.