选择后,您可以在UITableViewCell上设置高度变化动画吗?

时间:2009-01-20 03:17:52

标签: ios cocoa-touch uitableview

我在我的iPhone应用程序中使用UITableView,并且我有一个属于某个组的人员列表。我希望这样当用户点击特定的人(从而选择单元格)时,单元格的高度会增加,以显示多个UI控件来编辑该人的属性。

这可能吗?

21 个答案:

答案 0 :(得分:868)

我找到了一个非常简单的解决方案,作为UITableView我正在努力的副作用......

将单元格高度存储在通常通过tableView: heightForRowAtIndexPath:报告原始高度的变量中,然后当您想要为高度变化设置动画时,只需更改变量的值并调用此...

[tableView beginUpdates];
[tableView endUpdates];

你会发现它没有完全重新加载,但足以让UITableView知道它必须重绘单元格,抓住单元格的新高度值....并猜猜是什么?它为您改变了动态。甜。

我的博客上有更详细的解释和完整的代码示例... Animate UITableView Cell Height Change

答案 1 :(得分:60)

我喜欢Simon Lee的回答。我实际上并没有尝试那种方法,但看起来它会改变列表中所有单元格的大小。我希望改变被挖掘的细胞。我有点喜欢西蒙,但差别很小。这将在选择单元格时更改其外观。它确实有动画。只是另一种方式。

创建一个int来保存当前所选单元格索引的值:

int currentSelection;

然后:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    int row = [indexPath row];
    selectedNumber = row;
    [tableView beginUpdates];
    [tableView endUpdates];
}

然后:

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

    if ([indexPath row] == currentSelection) {
        return  80;
    }
    else return 40;


}

我相信你可以在tableView中进行类似的更改:cellForRowAtIndexPath:改变单元格的类型,甚至加载单元格的xib文件。

像这样,currentSelection将从0开始。如果您不希望默认情况下选择列表的第一个单元格(在索引0处),则需要进行调整。

答案 2 :(得分:22)

添加属性以跟踪所选单元格

@property (nonatomic) int currentSelection;

将其设置为(例如)viewDidLoad中的标记值,以确保UITableView在“正常”位置开始

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    //sentinel
    self.currentSelection = -1;
}

heightForRowAtIndexPath中,您可以为所选单元格设置所需的高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    int rowHeight;
    if ([indexPath row] == self.currentSelection) {
        rowHeight = self.newCellHeight;
    } else rowHeight = 57.0f;
    return rowHeight;
}

didSelectRowAtIndexPath中,您可以保存当前选择并保存动态高度(如果需要)

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
        // do things with your cell here

        // set selection
        self.currentSelection = indexPath.row;
        // save height for full text label
        self.newCellHeight = cell.titleLbl.frame.size.height + cell.descriptionLbl.frame.size.height + 10;

        // animate
        [tableView beginUpdates];
        [tableView endUpdates];
    }
}

didDeselectRowAtIndexPath中将选择索引设置回sentinel值并将单元格设置为正常形式

- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath {       
        // do things with your cell here

        // sentinel
        self.currentSelection = -1;

        // animate
        [tableView beginUpdates];
        [tableView endUpdates];
    }
}

答案 3 :(得分:14)

reloadData不好,因为没有动画......

这就是我目前正在尝试的事情:

NSArray* paths = [NSArray arrayWithObject:[NSIndexPath indexPathForRow:0 inSection:0]];
[self.tableView beginUpdates];
[self.tableView insertRowsAtIndexPaths:paths withRowAnimation:UITableViewRowAnimationFade];
[self.tableView deleteRowsAtIndexPaths:paths withRowAnimation:UITableViewRowAnimationFade];
[self.tableView endUpdates];

它几乎正常。几乎。我正在增加单元格的高度,有时在表格视图中有一点“打嗝”,因为单元格被替换,好像保存了表格视图中的某些滚动位置,新单元格(这是第一个单元格)在表中)最终其偏移量太高,并且滚动视图反弹以重新定位它。

答案 4 :(得分:11)

我不知道连续调用beginUpdates / endUpdates的所有内容是什么,你可以使用-[UITableView reloadRowsAtIndexPaths:withAnimation:]Here is an example project

答案 5 :(得分:10)

我决定使用reloadRowsAtIndexPaths

我在didSelectRowAtIndexPath中保存所选单元格的indexPath并在结尾处调用reloadRowsAtIndexPaths(您可以发送NSMutableArray以获取要重新加载的元素列表)。

heightForRowAtIndexPath中,您可以检查indexPath是否在expandIndexPath单元格的列表中,并发送高度。

您可以查看以下基本示例: https://github.com/ferminhg/iOS-Examples/tree/master/iOS-UITableView-Cell-Height-Change/celdascambiadetam 这是一个简单的解决方案。

如果有帮助,我会添加一些代码

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath: (NSIndexPath*)indexPath
{
    if ([indexPath isEqual:_expandIndexPath])
        return 80;

    return 40;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Celda";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    [cell.textLabel setText:@"wopwop"];

    return cell;
}

#pragma mark -
#pragma mark Tableview Delegate Methods

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSMutableArray *modifiedRows = [NSMutableArray array];
    // Deselect cell
    [tableView deselectRowAtIndexPath:indexPath animated:TRUE];
    _expandIndexPath = indexPath;
    [modifiedRows addObject:indexPath];

    // This will animate updating the row sizes
    [tableView reloadRowsAtIndexPaths:modifiedRows withRowAnimation:UITableViewRowAnimationAutomatic];
}

答案 6 :(得分:4)

现在,推荐的呼叫代替了beginUpdates() / endUpdates()

tableView.performBatchUpdates(nil, completion: nil)

Apple说,对于beginUpdates / endUpdates:“尽可能使用performBatchUpdates(_:completion :)方法而不是此方法。”

请参阅:https://developer.apple.com/documentation/uikit/uitableview/1614908-beginupdates

答案 7 :(得分:3)

尝试这是为了扩展索引行:

@property (nonatomic) NSIndexPath *expandIndexPath;
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath
{
if ([indexPath isEqual:self.expandedIndexPath])
    return 100;

return 44;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
NSMutableArray *modifiedRows = [NSMutableArray array];
if ([indexPath isEqual:self.expandIndexPath]) {
    [modifiedRows addObject:self.expandIndexPath];
    self.expandIndexPath = nil;
} else {
    if (self.expandedIndexPath)
        [modifiedRows addObject:self.expandIndexPath];

    self.expandIndexPath = indexPath;
    [modifiedRows addObject:indexPath];
}

// This will animate updating the row sizes
[tableView reloadRowsAtIndexPaths:modifiedRows withRowAnimation:UITableViewRowAnimationAutomatic];

// Preserve the deselection animation (if desired)
[tableView selectRowAtIndexPath:indexPath animated:NO scrollPosition:UITableViewScrollPositionNone];
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ViewControllerCellReuseIdentifier];
    cell.textLabel.text = [NSString stringWithFormat:@"I'm cell %ld:%ld", (long)indexPath.section, (long)indexPath.row];

return cell;
}

答案 8 :(得分:3)

BOOL flag;

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    flag = !flag;
    [tableView beginUpdates];
    [tableView reloadRowsAtIndexPaths:@[indexPath] 
                     withRowAnimation:UITableViewRowAnimationAutomatic];
    [tableView endUpdates];
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return YES == flag ? 20 : 40;
}

答案 9 :(得分:2)

只是为我这样的人搜索添加"更多细节"在定制单元格上。

[tableView beginUpdates];
[tableView endUpdates];

做了出色的工作,但不要忘记" crop"细胞视图。 从Interface Builder中选择您的Cell - >内容视图 - >从Property Inspector中选择" 剪辑子视图"

答案 10 :(得分:1)

这是一个较短版本的Simons回答Swift 3.还允许切换单元格的选择

var cellIsSelected: IndexPath?


  func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    cellIsSelected = cellIsSelected == indexPath ? nil : indexPath
    tableView.beginUpdates()
    tableView.endUpdates()
  }


  func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    if cellIsSelected == indexPath {
      return 250
    }
    return 65
  }

答案 11 :(得分:1)

西蒙·李的快速版本答案。

// MARK: - Variables 
  var isCcBccSelected = false // To toggle Bcc.



    // MARK: UITableViewDelegate
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

    // Hide the Bcc Text Field , until CC gets focused in didSelectRowAtIndexPath()
    if self.cellTypes[indexPath.row] == CellType.Bcc {
        if (isCcBccSelected) {
            return 44
        } else {
            return 0
        }
    }

    return 44.0
}

然后在didSelectRowAtIndexPath()

  func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    self.tableView.deselectRowAtIndexPath(indexPath, animated: true)

    // To Get the Focus of CC, so that we can expand Bcc
    if self.cellTypes[indexPath.row] == CellType.Cc {

        if let cell = tableView.cellForRowAtIndexPath(indexPath) as? RecipientTableViewCell {

            if cell.tag == 1 {
                cell.recipientTypeLabel.text = "Cc:"
                cell.recipientTextField.userInteractionEnabled = true
                cell.recipientTextField.becomeFirstResponder()

                isCcBccSelected = true

                tableView.beginUpdates()
                tableView.endUpdates()
            }
        }
    }
}

答案 12 :(得分:1)

是的,这是可能的。

UITableView有一个委托方法didSelectRowAtIndexPath

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [UIView animateWithDuration:.6
                          delay:0
         usingSpringWithDamping:UIViewAnimationOptionBeginFromCurrentState
          initialSpringVelocity:0
                        options:UIViewAnimationOptionBeginFromCurrentState animations:^{

                            cellindex = [NSIndexPath indexPathForRow:indexPath.row inSection:indexPath.section];
                            NSArray* indexArray = [NSArray arrayWithObjects:indexPath, nil];
                            [violatedTableView beginUpdates];
                            [violatedTableView reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationAutomatic];
                            [violatedTableView endUpdates];
                        }
                     completion:^(BOOL finished) {
    }];
}

但是在您的情况下,如果用户滚动并选择不同的单元格,那么您需要让最后选择的单元格缩小并展开当前选定的单元格reloadRowsAtIndexPaths:调用heightForRowAtIndexPath:,以便相应处理。

答案 13 :(得分:0)

Swift 4及以上

将以下代码添加到表视图的didselect行委托方法中

tableView.beginUpdates()
tableView.setNeedsLayout()
tableView.endUpdates()

答案 14 :(得分:0)

输入 -

<强> tableView.beginUpdates() tableView.endUpdates() 这些功能不会调用

func tableView(_ tableView:UITableView,cellForRowAt indexPath:IndexPath) - &gt; UITableViewCell {}

但是,如果你这样做, tableView.reloadRows(at:[selectedIndexPath!as IndexPath],with:.none)

它会打电话给      func tableView(_ tableView:UITableView,cellForRowAt indexPath:IndexPath) - &gt; UITableViewCell {} 这个功能。

答案 15 :(得分:0)

Simon Lee's answer的快速版本:

tableView.beginUpdates()
tableView.endUpdates()

请注意,您应该修改高度属性之前 endUpdates()

答案 16 :(得分:0)

在iOS 7及更高版本之后检查此方法。

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return UITableViewAutomaticDimension;
}

在iOS 8中对此进行了改进。我们可以将其设置为表视图本身的属性。

答案 17 :(得分:0)

我使用了@ Joy的精彩答案,它与ios 8.4和XCode 7.1.1完美配合。

如果您希望自己的单元格可切换,我将-tableViewDidSelect更改为以下内容:

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
//This is the bit I changed, so that if tapped once on the cell, 
//cell is expanded. If tapped again on the same cell, 
//cell is collapsed. 
    if (self.currentSelection==indexPath.row) {
        self.currentSelection = -1;
    }else{
        self.currentSelection = indexPath.row;
    }
        // animate
        [tableView beginUpdates];
        [tableView endUpdates];

}

我希望这对你有所帮助。

答案 18 :(得分:0)

这是我的自定义UITableView子类的代码,它在表格单元格中展开UITextView,而不重新加载(并且丢失了键盘焦点):

- (void)textViewDidChange:(UITextView *)textView {
    CGFloat textHeight = [textView sizeThatFits:CGSizeMake(self.width, MAXFLOAT)].height;
    // Check, if text height changed
    if (self.previousTextHeight != textHeight && self.previousTextHeight > 0) {
        [self beginUpdates];

        // Calculate difference in height
        CGFloat difference = textHeight - self.previousTextHeight;

        // Update currently editing cell's height
        CGRect editingCellFrame = self.editingCell.frame;
        editingCellFrame.size.height += difference;
        self.editingCell.frame = editingCellFrame;

        // Update UITableView contentSize
        self.contentSize = CGSizeMake(self.contentSize.width, self.contentSize.height + difference);

        // Scroll to bottom if cell is at the end of the table
        if (self.editingNoteInEndOfTable) {
            self.contentOffset = CGPointMake(self.contentOffset.x, self.contentOffset.y + difference);
        } else {
            // Update all next to editing cells
            NSInteger editingCellIndex = [self.visibleCells indexOfObject:self.editingCell];
            for (NSInteger i = editingCellIndex; i < self.visibleCells.count; i++) {
                UITableViewCell *cell = self.visibleCells[i];
                CGRect cellFrame = cell.frame;
                cellFrame.origin.y += difference;
                cell.frame = cellFrame;
            }
        }
        [self endUpdates];
    }
    self.previousTextHeight = textHeight;
}

答案 19 :(得分:-1)

我刚刚解决了这个问题:

static int s_CellHeight = 30;
static int s_CellHeightEditing = 60;

- (void)onTimer {
    cellHeight++;
    [tableView reloadData];
    if (cellHeight < s_CellHeightEditing)
        heightAnimationTimer = [[NSTimer scheduledTimerWithTimeInterval:0.001 target:self selector:@selector(onTimer) userInfo:nil repeats:NO] retain];
}

- (CGFloat)tableView:(UITableView *)_tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
        if (isInEdit) {
            return cellHeight;
        }
        cellHeight = s_CellHeight;
        return s_CellHeight;
}

当我需要扩展单元格高度时,我设置isInEdit = YES并调用方法[self onTimer],它会激活单元格增长,直到达到s_CellHeightEditing值: - )

答案 20 :(得分:-2)

获取所选行的索引路径。重新加载表格。在UITableViewDelegate的heightForRowAtIndexPath方法中,将所选行的高度设置为不同的高度,而其他行返回正常的行高