Expanding UITableViewCell overlapping

Question

I am trying to create a tableView where if you tap on a cell it expands and shows to buttons. The problem I had so far is that if I create the Cell with the buttons and then say that it should only have the full height if you press on it it still shows the buttons but they are overlapping with the next cells in the tableView

Is there something that the part of the cell that should be hided before tapping actually does that?

This is what I have in the viewController.m The ExpandingCell.h you find below

#import "ViewController.h"
#import "ExpandingCell.h"

@interface ViewController () <UITableViewDelegate, UITableViewDataSource>

@property (copy, nonatomic) NSArray *titleArray;
@property (strong, nonatomic) IBOutlet UITableView *tableView;

@end

@implementation ViewController

ExpandingCell *cell;
int selectedIndex = -1;

- (void)viewDidLoad {
    [super viewDidLoad];

    self.titleArray = @[@"Apple", @"Orange", @"Banana", @"Kiwi", @"Melon", @"Strawberry", @"Blueberry", @"Peach"];

}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.titleArray count];
}

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

    static NSString *CellIdentifier = @"expandingCell";

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


    cell.titleLabel.text = self.titleArray[indexPath.row];

    return cell;
}

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

    if (indexPath.row == 0) {
        return 94;
    } else {
        return 54;
    }
}

@end

The ExpandCell.h are just some Labels and Buttons which are on the Cell

#import <UIKit/UIKit.h>

@interface ExpandingCell : UITableViewCell

@property (strong, nonatomic) IBOutlet UILabel *titleLabel;
@property (strong, nonatomic) IBOutlet UILabel *scoreLabel;
@property (strong, nonatomic) IBOutlet UILabel *backgroundLabel;

@end

just for text purpose I have set the first cell as if it was selected in the: "tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath" Method.

what i get is a table view where the first cell is perfectly displaying with its height and then the rest of the cells where the buttons are overlapping over the next cell below.

(I wanted to show a screenshot but it says I need 10 reputations to do so)

If so I am really thankful for help

Answer 1

You should implement a tableView:heightForRowAtIndexPath: and return a height for row that depends on the state of your cell (expanded or not). Then after tap on your cell call [self.tableView reloadRowsAtIndexPaths:@[indexPathForYourCell]]. To prevent overlapping set YES for clipsToBounds property of your cells.