Search code examples
iosobjective-cuitableviewaccordionexpandable

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.


Solution

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