UItable Cell Overflow ios

Question

I am doing an application which needs expansion of cells onclick in order to show more details. I have used a custom cell and added them to a UItableview. When i click on the cell it animates fine and go down and when i click again it goes up, this is done using changing the height of the cell. Actual custom cell size is bigger than the cell i normally show. When I click on the cell whole cell is shown. Only issue I am having is the overflow of the data. these data should be hidden when the cell is not selected. Only when it is selected theses data should be shown.

I referred to different articals, tried changing the color setting bound did not work for me. I have the same kind of problem asked in this question iphone uitablecellview overflow , tried the answer but it did not work.

All I need is how to hide the bottom part of custom cell when it is not extended, and show it when it is extended...!

These are my screen shots

When it is loaded When I click on a cell] When I click on the 2nd cell
When I click on the cell which is already expanded These are the code snips I have used....

// Declaring the SearchResultTable.
    CGRect filterFrame = CGRectMake(0,31, 320, 400);
    self.searchResultTable = [[UITableView alloc] initWithFrame:filterFrame];
    self.searchResultTable.dataSource = self;
    self.searchResultTable.delegate = self;
    self.searchResultTable.backgroundColor = [UIColor whiteColor];
    self.searchResultTable.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    self.searchResultTable.separatorColor = [UIColor lightGrayColor];
    [self.view addSubview:self.searchResultTable];

//Adding cells
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"ExpandedSearchResultTableCell";


    ExpandedSearchResultTableCell *cell = (ExpandedSearchResultTableCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];


    if (cell == nil)
    {
        cell.contentView.clipsToBounds = YES;
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"ExpandedSearchResultTableCell" owner:self options:nil];
        cell = [nib objectAtIndex:0];


    }

    cell.productNameLable.text = @"Only this should be shown";
    cell.productListLabel.text = @"This Should be hidden.. Only shown when expanded";
    cell.productApplicationLable.text=@"This Should be hidden.. Only shown when expanded";
    cell.productTargetLable.text= @"This Should be hidden.. Only shown when expanded";
    cell.productQuantityLable.text=@"This Should be hidden.. Only shown when expanded";
    cell.productReactivityLable.text=@"This Should be hidden.. Only shown when expanded";;


    return cell;
}


//on click event
(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {




    // Deselect cell
    [tableView deselectRowAtIndexPath:indexPath animated:TRUE];

    // Toggle 'selected' state
    BOOL isSelected = ![self cellIsSelected:indexPath];

    // Store cell 'selected' state keyed on indexPath
    NSNumber *selectedIndex = [NSNumber numberWithBool:isSelected];
    [selectedIndexes setObject:selectedIndex forKey:indexPath]; 

    // This is where magic happens...
    [searchResultTable beginUpdates];
    [searchResultTable endUpdates];
}

//Getting the height depending on expanded or not
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    // If our cell is selected, return double height
    if([self cellIsSelected:indexPath]) {
        return kCellHeight * 3.0;
    }

    // Cell isn't selected so return single height
    return kCellHeight;
}

Answer 1

Ok I got it done by using a single flag and a reference to cellForRowAtIndexPath cell in didSelectRowAtIndexPath. And setting my lables visible and hidden according to the collapse and the stretch. Flag is updated accordingly with whether the cell is selected or not...!!

Thanks for you help everyone..!

Answer 2

If you are looking for cell expansion with plain tableview type,

iPhone UITableView with animated expanding cells

And if in case you are using grouped tableview and want to expand on selection of section header,

Table View Animations and Gestures

Answer 3

Ooops, Loads of code made your post dirty.

I m not going through your code.

I will explain you logic.

1. Only this should be displayed will go in your indexpath.row = 0;
2. Number of rows in section will be if selected, then count of cells shown+ 1 else 1.

cell.productNameLable.text = @"Only this should be shown";
cell.productListLabel.text = @"This Should be hidden.. Only shown when expanded";
cell.productApplicationLable.text=@"This Should be hidden.. Only shown when expanded";
cell.productTargetLable.text= @"This Should be hidden.. Only shown when expanded";
cell.productQuantityLable.text=@"This Should be hidden.. Only shown when expanded";
cell.productReactivityLable.text=@"This Should be hidden.. Only shown when expanded";;

This makes your code dirty. If you are to show all data in one cell, and only one cell is added when you select one section, I will suggest to add all these in different cells.

I am still confused why you are doing these long coding, Please refer this answer for better explanation