Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UItable Cell Overflow ios

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 it is loaded When I click on a cell When I click on a cell] When I click on the 2nd cell When I click on the 2nd cell When I click on the cell which is expanded
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;
}
like image 382
Gihan Avatar asked Aug 29 '12 10:08

Gihan


2 Answers

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

like image 152
alloc_iNit Avatar answered Sep 28 '22 08:09

alloc_iNit


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..!

like image 30
Gihan Avatar answered Sep 28 '22 06:09

Gihan