Increase height of a cell when textfield in it begins editing

Question

I have a tableview in which a cell contains a textfield and a button. I want to show the area with the button only when the textfield becomes active.

Thus for that time i want to provide a different height so that the textfield is visible only and when textfield becomes active i want to increase the height of the tableviewcell to show the button. Kindly help.

My cell is something like this.

When the textfield is not selected i want it to appear like :

When the textfield is selected i want it to appear like :

Its not related to "Using Auto Layout in UITableView for dynamic cell layouts & variable row heights" as i want to determine the height based on the textfield selected.

@AnoopNyati : from where do i reload the cells? Reloading them wont change the height as i m not updating the height anywhere yet. — Ankit Kumar Gupta, Jan 25 '17 at 08:05
Since you want to increase the height you will have to configure the height. Is it possible for you to use tableView:heightForRowAtIndexPath: to define height? — Anoop Nyati, Jan 25 '17 at 08:11
@AnkitKumarGupta There are lots of tutorials already present in stack, why doesn't you used them? Try some samples first and then still you have doubt then ask. Thanks. — dahiya_boy, Jan 25 '17 at 08:35
Possible duplicate of [Using Auto Layout in UITableView for dynamic cell layouts & variable row heights](http://stackoverflow.com/questions/18746929/using-auto-layout-in-uitableview-for-dynamic-cell-layouts-variable-row-heights) — dahiya_boy, Jan 25 '17 at 08:36

score 2 · Accepted Answer · answered Jan 25 '17 at 10:00

So basically you want need to update the particular cell and increase its height. For that you need implement UITextFieldDelegate methods to make sure you get notified when textfield is about go in editing mode.

Also you need to maintain an indexPath of the current cell to increase the height for the particular cell.

@property(nonatomic, strong) NSIndexPath *selectedIndexPath;

Set its initial value to nil

Implement delegate method

- (void)textFieldDidBeginEditing:(UITextField *)textField
{
    UITableViewCell *cell = (UITableViewCell*)textField.superview;
    NSIndexPath *indexPath = [self.tableView indexPathForCell:cell];
    if( indexPath != nil) //Returns nil if cell is not visible
    {
        if( self.selectedIndexPath != nil )
        {
            //We need to reload two cells -  one to hide UIButton of current cell, make visible the new UIButton for which textfield is being currently edited
            NSIndexPath *previousIndexPath = self.selectedIndexPath;
            self.selectedIndexPath = indexPath;
            [self.tableView reloadRowsAtIndexPaths:@[indexPath, previousIndexPath] withRowAnimation:UITableViewRowAnimationNone];
        }
        else
        {
            //Reload the cell to show the button
            self.selectedIndexPath = indexPath;
            [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
        }
    }
}

Once the cell is reloaded, make sure you update the height using UITableViewDelegate method

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if( self.selectedIndexPath && [indexPath compare:self.selectedIndexPath] == NSOrderedSame)
    {
        return kHeightWithButton; //assuming its some constant defined in the code
    }
    return kHeightWithoutButton;
}

Also depending on how you are handling constraints for your UITableViewCell you may need to invoke updateConstraints method of the cell. A sample code like be

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomTableViewCell *cell; //Assuming the you have some custom class to handle cell
    cell = [tableView dequeueReusableCellWithIdentifier:@"myCell"];

    if( cell == nil )
    {
        cell = [[CustomTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"myCell"];
        //... code for initialization
        cell.textField.delegate = self; //set the delegate to self so that we get delegate methods
    }

    if( self.selectedIndexPath && [indexPath compare:self.selectedIndexPath] == NSOrderedSame)
    {
        cell.button.hidden = NO;
    }
    else
    {
        cell.button.hidden = YES;
    }
    [cell updateConstraints];//update constraint to adjust the UIButton's visibility and constraints

    //... other code if any

    return cell;
}

Hope it helps!

I had already implemented something like this using custom delegates from the cell. My approach was similar so an upvote and accepted answer. And i was using Swift 3. Thanks for such detail elaboration and finding time to dis. Really appreciated. If you find my question appropriate kindly upvote. — Ankit Kumar Gupta, Jan 25 '17 at 12:40

Increase height of a cell when textfield in it begins editing

1 Answers1