fabersky fabersky - 3 months ago 29
iOS Question

Expandable UITableView cells showing datas

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:

enter image description here

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

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];
    }
}