Expandable UITableView cells showing datas

Question

I have some sport matches cataloged by year, and for every match I have the final result, the match date and the scorer(s).

I'm showing those matches in a 'Table View', like this:

So what I'd like to achieve is: when clicking on a cell, show the match details as shown in the picture.

I also found some libraries to achieve the accordion/expandable style, but no-one does the job. They just expand the cell and show another cell.

Answer 1

Try one of these:

• obj-C: KMAccordionTableViewController
• swift: AccordionTableViewController

Answer 2

you can user HVtableview for this purpose, Try this link https://github.com/xerxes235/HVTableView

Answer 3

You don't even need to use expandable/accordion in this case. Here is how you can tackle this. Lets says your cell size when normal is 40 and when particular clicked is 100. In heightForRowAtIndexPath you can check which cell is selected and return more height

if(selectedRow == indexPath.row) {
    return 100;
} else {
    return 40;
}

Then what you can do is in didSelectRowAtIndexPath or a clickEvent method

[self.tableView beginUpdates];
[[self tableView] reloadRowsAtIndexPaths:@[[NSIndexPath indexPathForItem: selectedRow inSection:0]] withRowAnimation:UITableViewRowAnimationAutomatic];
[self.tableView endUpdates];

So it will be your cell will be rendered all of it but based on height you are hiding or showing content.

Updated Answer with Enter Source

ViewController.m

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
if(selectedIndex == indexPath.row)
    return 100;
else
    return 40;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    customCell *cell = (UITableViewCell*)[tableView dequeueReusableCellWithIdentifier:@"Cell"];
    NSDictionary *matches = self.dataArray[indexPath.row];
    cell.matchName.text = [matches objectForKey@"MatchName"];
    if() {
        cell.heightConstraintSecondView.constant = 0;
    } else {
        cell.heightConstraintSecondView.constant = 59;
        cell.team1.text = [matches objectForKey@"Team1"];
        cell.team2.text = [matches objectForKey@"Team2"];
        cell.score.text = [matches objectForKey@"Score"];
    } 
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    selectedIndex = indexPath.row;
    [self.tableView beginUpdates];
    [[self tableView] reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
    [self.tableView endUpdates];
    }
}

Answer 4

The cleaner way is to create 2 cells with different identifiers and change it at run time when you click the cell. Check this question: Drop-Down List in UITableView in iOS