CODEWITHSUNDEEP
iphoneiosuitableview
iPhone Programmatically
iPhone Programmatically

Reputation: 1227

Expand UITableView cell in UITableViewstylePlain

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.

Upvotes: 11

Views: 12683

Answers (7)

Esqarrouth
Esqarrouth

Reputation: 39181

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.

Upvotes: 0

swiftBoy
swiftBoy

Reputation: 35783

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

Upvotes: 12

mobileideafactory
mobileideafactory

Reputation: 1670

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

screenshot

Upvotes: 2

Bhavin
Bhavin

Reputation: 27225

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.

Upvotes: 3

Karthik
Karthik

Reputation: 747

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

Upvotes: 2

Xcoder
Xcoder

Reputation: 1807

This is possible by the delegate

- (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath {
       //write code here
    }

Upvotes: 0

Arvind Patidar
Arvind Patidar

Reputation: 81

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.

Upvotes: 4

Related Questions