How to expand and collapse rows using section header in UITableView

Question

I have a tabular view. Now I want to collapse and expand the lines by clicking on the section heading. In other words, clicking on the title bar displays for this section. How can i do this?

Answer 1

I am creating code to give you this idea. The concept is that we track the collapsed section in the NSMutableSet and add / remove it according to the user's touch in the section. Activating collapse / expand is actually an animation of adding / removing cells.

 #import "ViewController.h" @interface ViewController () < UITableViewDataSource, UITableViewDelegate> { NSMutableSet* _collapsedSections; } @property (nonatomic, weak) IBOutlet UITableView* tableView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _collapsedSections = [NSMutableSet new]; } -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 3; } -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [_collapsedSections containsObject:@(section)] ? 0 : 10; } -(NSArray*) indexPathsForSection:(int)section withNumberOfRows:(int)numberOfRows { NSMutableArray* indexPaths = [NSMutableArray new]; for (int i = 0; i < numberOfRows; i++) { NSIndexPath* indexPath = [NSIndexPath indexPathForRow:i inSection:section]; [indexPaths addObject:indexPath]; } return indexPaths; } -(void)sectionButtonTouchUpInside:(UIButton*)sender { sender.backgroundColor = [UIColor greenColor]; [self.tableView beginUpdates]; int section = sender.tag; bool shouldCollapse = ![_collapsedSections containsObject:@(section)]; if (shouldCollapse) { int numOfRows = [self.tableView numberOfRowsInSection:section]; NSArray* indexPaths = [self indexPathsForSection:section withNumberOfRows:numOfRows]; [self.tableView deleteRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationTop]; [_collapsedSections addObject:@(section)]; } else { int numOfRows = 10; NSArray* indexPaths = [self indexPathsForSection:section withNumberOfRows:numOfRows]; [self.tableView insertRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationTop]; [_collapsedSections removeObject:@(section)]; } [self.tableView endUpdates]; //[_tableView reloadData]; } -(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { UIButton* result = [UIButton buttonWithType:UIButtonTypeCustom]; [result addTarget:self action:@selector(sectionButtonTouchUpInside:) forControlEvents:UIControlEventTouchUpInside]; result.backgroundColor = [UIColor blueColor]; [result setTitle:[NSString stringWithFormat:@"Section %d", section] forState:UIControlStateNormal]; result.tag = section; return result; } -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell* result = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"]; result.textLabel.text = [NSString stringWithFormat:@"Cell %d", indexPath.row]; return result; } @end 

Answer 2

As it is now an old question. I also searched and in the last I got 1 sample code from Github. So I was thinking of sharing the link if in the near future any of them will face the same problems. https://github.com/iSofTom/STCollapseTableView

Answer 3

TLIndexPathTools does this with only a few lines of code on your part. Try to run the Collapse sample. It subclasses the TLCollapsibleTableViewController , which has some good options. It supports expanding one section at a time or several sections. It also optimizes the scroll position when you expand the section to show as many lines of the section as possible. Therefore, if you click on a section at the bottom of the screen, it will automatically scroll.

The controller code for the full sample of the sample project is as follows:

 #import "TLCollapsibleTableViewController.h" @interface CollapseTableViewController : TLCollapsibleTableViewController - (IBAction)toggleSingleSectionExpanded:(UISwitch *)sender; @end #import "CollapseTableViewController.h" #import "TLIndexPathSectionInfo.h" #import "TLCollapsibleDataModel.h" #define SECTION1_NAME @"Section 1" #define SECTION2_NAME @"Section 2" @interface CollapseTableViewController () @property (strong, nonatomic) TLIndexPathDataModel *backingDataModel; @end @implementation CollapseTableViewController - (void)viewDidLoad { [super viewDidLoad]; //define items for two sections NSArray *section1Items = @[ @"Fredricksburg", @"George Washington", @"Grand Canyon"]; NSArray *section2Items = @[ @"Jelly Bean", @"Bibliography", @"Keyboard Shortcut", @"Metadata", @"Fundamental", @"Cellar Door"]; //We're using plain string items, so we don't have a sectionNameKeyPath property //to use, so instead we explicitly create section info objects TLIndexPathSectionInfo *section1 = [[TLIndexPathSectionInfo alloc] initWithItems:section1Items andName:SECTION1_NAME]; TLIndexPathSectionInfo *section2 = [[TLIndexPathSectionInfo alloc] initWithItems:section2Items andName:SECTION2_NAME]; //create the backing model, which contains all sections and items self.backingDataModel = [[TLIndexPathDataModel alloc] initWithSectionInfos:@[section1, section2] andIdentifierKeyPath:nil andCellIdentifierKeyPath:nil]; [self collapseAll]; } - (void)tableView:(UITableView *)tableView configureCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath { NSString *item = [self.dataModel itemAtIndexPath:indexPath]; cell.textLabel.text = item; } - (IBAction)toggleSingleSectionExpanded:(UISwitch *)sender { self.singleExpandedSection = sender.isOn; [self collapseAll]; } - (void)collapseAll { self.dataModel = [[TLCollapsibleDataModel alloc] initWithBackingDataModel:self.backingDataModel collapsedSectionNames:[NSSet setWithArray:self.backingDataModel.sectionNames]]; } @end 

Answer 4

configure viewForHeaderInSection:

like this

 (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{ UILabel *lblHeader = [[UILabel alloc]init]; lblHeader.text = @"Section 0"; lblHeader.backgroundColor = [UIColor blueColor]; lblHeader.font = [UIFont fontWithName:@"Avenir" size:18]; lblHeader.textAlignment=NSTextAlignmentLeft; lblHeader.userInteractionEnabled=YES; UIGestureRecognizer *gr; if(section==0){ lblHeader.text = @"Section 0"; gr = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)]; }else if(section == 1){ lblHeader.text = @"Section 1"; gr = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture1:)]; } [lblHeader addGestureRecognizer:gr]; return lblHeader; } 

then write individual action calls

 - (void)handleGesture:(UIGestureRecognizer *)gestureRecognizer { } - (void)handleGesture1:(UIGestureRecognizer *)gestureRecognizer { }