11

I want to expand tableview cell on it's click. There is a tableview in which two cells are expandable and others are not. I need when i click on expandable cell it should show cells under it and on clicking again it should hide. There is a image below defining this.

enter image description here

How can i achieve this functionality, please guide for the above. Thanks in advance.

Dipendra
  • 620
  • 6
  • 8
iPhone Programmatically
  • 1,211
  • 2
  • 22
  • 54

7 Answers7

12

Here is the complete Tutorial with Expandable UITableView

Here’s the code snip for that.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([self tableView:tableView canCollapseSection:indexPath.section])
    {
        if (!indexPath.row)
        {
            // only first row toggles exapand/collapse
            [tableView deselectRowAtIndexPath:indexPath animated:YES];

            NSInteger section = indexPath.section;
            BOOL currentlyExpanded = [expandedSections containsIndex:section];
            NSInteger rows;

            NSMutableArray *tmpArray = [NSMutableArray array];

            if (currentlyExpanded)
            {
                rows = [self tableView:tableView numberOfRowsInSection:section];
                [expandedSections removeIndex:section];

            }
            else
            {
                [expandedSections addIndex:section];
                rows = [self tableView:tableView numberOfRowsInSection:section];
            }

            for (int i=1; i<rows; i++)
            {
                NSIndexPath *tmpIndexPath = [NSIndexPath indexPathForRow:i 
                                                               inSection:section];
                [tmpArray addObject:tmpIndexPath];
            }

            UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];

            if (currentlyExpanded)
            {
                [tableView deleteRowsAtIndexPaths:tmpArray 
                                 withRowAnimation:UITableViewRowAnimationTop];

                cell.accessoryView = [DTCustomColoredAccessory accessoryWithColor:[UIColor grayColor] type:DTCustomColoredAccessoryTypeDown];

            }
            else
            {
                [tableView insertRowsAtIndexPaths:tmpArray 
                                 withRowAnimation:UITableViewRowAnimationTop];
                cell.accessoryView =  [DTCustomColoredAccessory accessoryWithColor:[UIColor grayColor] type:DTCustomColoredAccessoryTypeUp];

            }
        }
    }
}

as shown below picture

enter image description here

This and this one solution also help you to understand how to manage Expandable TableView

Community
  • 1
  • 1
swiftBoy
  • 35,607
  • 26
  • 136
  • 135
  • This is group table, i am asking for plain table only. – iPhone Programmatically Feb 27 '13 at 10:14
  • @iPhone did you check [this](http://www.roostersoftstudios.com/2011/04/14/iphone-uitableview-with-animated-expanding-cells/) its for plain table – swiftBoy Feb 27 '13 at 10:19
  • I have seen such sample before posting question, this uses section expands, in plain we only one section only cell needs to expand. – iPhone Programmatically Feb 27 '13 at 10:21
  • @iPhone you can download sample code zip file [here](http://dl.dropbox.com/u/11290499/table.zip) which one is create for just Table's row expand, hope that helps Good Luck!! – swiftBoy Feb 27 '13 at 10:36
  • I got your first tutorial as right and easy solution, but it is giving problem that when done with text it is ok, but i am using images on cell not text and text on submenu, they are overlapping. Why, can you help in that. – iPhone Programmatically Mar 01 '13 at 04:55
4

Okay, what I'm thinking is, The titles, Events, Overhead and Friends would be the custom UIView with UIImageView for background, UILabel for title, and UIButton for expand. So basically

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

having return count of the titles you've.

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

having return UIView for each titles.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

having count of the rows within that title. You may need to maintain an array for this.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;

having height of the cell item

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section

initially it should be 0 (zero) for all sections, when user tap on expand, it should be increase with respect to number of rows * cell height within that section.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

You may need some good logic for setting all rows for expansion

Your expansion buttons actions something like,

- (void) expandSection:(UIButton *)sender;

that you can identify which section to be expand using sender.tag, so don't forget to add tag properly. You may need an int in .h file for store the current section, and can be use in - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section datasource method.

3

I think What you want is already given by Apple. You can take a look at Sample Code provided by Apple under the title of Table View Animations and Gestures.

Bhavin
  • 27,155
  • 11
  • 55
  • 94
2

I have given the example source code below. You can customize this example based on your requirement.

Source Code Link : Click here

Output Screen:

enter image description here

Karthik
  • 747
  • 4
  • 21
  • 48
2

JKExpandTableView is MIT-licensed iOS library that implements the expandable table view. Be sure to checkout the included sample project as well.

screenshot

mobileideafactory
  • 1,640
  • 1
  • 22
  • 30
0

This is possible by the delegate

- (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath {
       //write code here
    }
Prasad G
  • 6,702
  • 7
  • 42
  • 65
Xcoder
  • 1,762
  • 13
  • 17
0

The accepted answer is true but the link is outdated. To get that example to work you have to do extra things:

Download ExpandableTableCells project from here:
https://github.com/cocoanetics/Examples

Download DTCustomColoredAccessory.h and .m files from here: https://github.com/Cocoanetics/DTFoundation/tree/develop/Core/Source/iOS

Put the DTCustomColoredAccessory files in the ExpandableTableCells project.

There you have it a working example, it is easier to edit and move from there instead of trying to write from zero.

Esqarrouth
  • 38,543
  • 21
  • 161
  • 168
  • I've download the `Download ExpandableTableCells project` and added the Download DTCustomColoredAccessory.h and .m files. But I'm getting an error "error: linker command failed with exit code 1 (use -v to see invocation)" Could you please help with it? – Luai Kalkatawi Jan 26 '15 at 13:33