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.

Some other ways to tackle the issue http://stackoverflow.com/questions/29678471/expanding-and-collapsing-uitableviewcells-with-datepicker/34703276#34703276 — DogCoffee, Apr 25 '16 at 07:32
Possible duplicate of [Drop-Down List in UITableView in iOS](http://stackoverflow.com/questions/33186659/drop-down-list-in-uitableview-in-ios) — Rick, Apr 25 '16 at 14:33

Arun Gupta · Accepted Answer · 2016-04-25T07:50:47.723

5

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

edited Apr 25 '16 at 07:50

answered Apr 24 '16 at 17:11

Arun Gupta

2,628
1
20
37

nice! so where should I add the match information? (like `team1[selected_cell], team2[selected_cell]` etc. ? bewtween `beginupdates` and `endUpdates` ? – fabdurso Apr 24 '16 at 17:47
You just need to reload the selected cell and change its height in heightforRow... Are you creating your cell dynamically? You need to create your cell with all elements just change its height on selection deselection to show or hide the match details. – Arun Gupta Apr 24 '16 at 18:19
I have all the match details saved in arrays, so basically all the cells will be the same. When i select cell1, it will show details for that cell (match), when I select cell2 it will show match2 details, and so on... – fabdurso Apr 24 '16 at 21:56
should I do this with interface builder? create some textfields and retrieve the content from the arrays? – fabdurso Apr 24 '16 at 22:00
Absolutely. Let me see if get time to saw a sample to you. – Arun Gupta Apr 25 '16 at 05:37
1

Just check the sample demo at https://github.com/quantumarun/Demos/tree/master/ExpandTableCellDemo. This is just a basic concept you have to make changes to it for your requirement. – Arun Gupta Apr 25 '16 at 07:00
I'm using objective-c :D – fabdurso Apr 25 '16 at 07:11
Its easy to convert it. Do you still want me to make changes? – Arun Gupta Apr 25 '16 at 07:14
i will now try your solution. If you just could update the answer adding the info about the match details values (retrieve it from the arrays etc.) I will accept it. thanks! – fabdurso Apr 25 '16 at 07:19
could you please convert it objective-c? it's just that the question is related to objective-c. thanks! – fabdurso Apr 25 '16 at 07:33
so I tried your solution. it is almost working except for the "Outlets cannot be connected to repeating content". That's why I wrote `cell.team1.text = [teams objectAtIndex:indexPath.row];` but it seems that I cannot use this in dynamic prototype cells – fabdurso Apr 25 '16 at 21:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/110204/discussion-between-arun-gupta-and-fabersky). – Arun Gupta Apr 26 '16 at 05:52

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

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

edited May 23 '17 at 12:08

Community

1
1

answered Apr 24 '16 at 23:02

Bhavuk Jain

2,167
1
15
23

score 0 · Answer 3 · edited Apr 25 '16 at 13:25

0

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

edited Apr 25 '16 at 13:25

fabdurso

2,366
5
29
55

answered Apr 25 '16 at 12:53

Ali Pasha

1

score 0 · Answer 4 · answered Sep 02 '16 at 18:09

0

Try one of these:

obj-C: KMAccordionTableViewController
swift: AccordionTableViewController

answered Sep 02 '16 at 18:09

Klevison

3,342
2
19
32

Expandable UITableView cells showing datas

4 Answers4

Linked