ios - 像 Twitter 应用一样展开表格视图单元格

Posted

技术标签:

【中文标题】ios - 像 Twitter 应用一样展开表格视图单元格【英文标题】:ios - Expand table view cell like Twitter app 【发布时间】:2013-02-19 21:22:56 【问题描述】:

我希望在选择推文时具有与 Twitter 应用程序相同的行为:扩展行并添加补充内容。

所以这不仅仅是基本的行大小调整。我想我需要 2 个不同的自定义单元格,所以我做了类似的事情:

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

    if ([indexPath compare:self.selectedIndexPath] != NSOrderedSame) 
        FirstCell *cell = [tableView dequeueReusableCellWithIdentifier:@"FirstCell"];
        if (!cell) 
            cell = [[FirstCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"FirstCell"];
        

        cell.firstnameLabel.text = [[self.items objectAtIndex:indexPath.row] objectForKey:@"firstname"];

        return cell;
    
    else 
        SecondCell *cell = [tableView dequeueReusableCellWithIdentifier:@"SecondCell"];
        if (!cell) 
            cell = [[SecondCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"SecondCell"];
        

        cell.firstnameLabel.text = [[self.items objectAtIndex:indexPath.row] objectForKey:@"firstname"];
        cell.lastnameLabel.text = [[self.items objectAtIndex:indexPath.row] objectForKey:@"lastname"];

        return cell;
    




- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 
    if ([indexPath compare:self.selectedIndexPath] == NSOrderedSame) 
        return 80.0;
     else 
        return 44.0;
    


#pragma mark - Table view delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

    self.selectedIndexPath = indexPath;

    [tableView reloadData];

我的问题是我想保留一个流畅的动画,比如 Twitter 应用程序,这不是我的情况,因为 [tableView reloadData](我认为这是强制性的,因为我有 2 个不同的自定义单元格)。

所以任何人都知道我需要的解决方法,或者也许有人知道 Twitter 应用程序如何处理这个动画内容?

【问题讨论】:

【参考方案1】:

你想用动画重新加载那个单元格:

[tableView beginUpdates];
[tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
[tableView endUpdates];

【讨论】:

这里的问题是,当我选择一行时,其他行保留SecondCell 类,因为它们没有重新加载(仅更改了单元格大小)。这就是我打电话给[tableView reloadData] 的原因。但如果我用beginUpdates/endUpdates 包围[tableView reloadData],则根本没有动画。有什么解决办法吗? 那么是否可以只使用相同类型的单元格并对高度和布局进行一些动态计算?我不久前写了这个:roostersoftstudios.com/2011/04/14/… 实际上我在发帖之前看到了你的博客,但这并不是我想要做的,因为你只是根据文本调整标签大小,然后根据标签大小调整单元格大小。但就我而言,我想添加一些 UIButton、UIImageView 等。这就是我认为需要 2 个自定义单元格的原因。 动态添加 UIButton 和 UIImageView 可能比创建两个唯一的单元格更容易,但是因为我不知道您的单元格布局,所以我可能错了。为什么不让每个单元格都包含您需要的所有 UI 元素,然后隐藏它们并在需要时显示它们。 是的,我想到了这个解决方案,但我认为使用 2 个自定义单元格会更容易。似乎不是:(。谢谢你的帮助。【参考方案2】:
[tableView beginUpdates];
[tableView endUpdates];

这会触发整个 tableView 的单元格行大小的更新......引用自:iPhone - Smooth animation for UITableViewCell height change including content update

编码愉快!

【讨论】:

【参考方案3】:

实际上,只需将原始代码与 rooster117 的解决方案相结合,就可以使用两个自定义单元来实现这一点,就像您最初想要的那样。将 tableView:didSelectRowAtIndexPath: 中的 [tableView reloadData] 替换为:

[tableView beginUpdates];
[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
[tableView endUpdates];

你应该有你的解决方案。

【讨论】:

以上是关于ios - 像 Twitter 应用一样展开表格视图单元格的主要内容,如果未能解决你的问题,请参考以下文章

iOS Tinder/Twitter 类似滑块分页导航和菜单

像 iPod 应用一样使用 UITableView 气泡/标注

如何创建具有最大宽度的多行 UILabel?

如何像 Twitter 一样自定义 UITableViewCell?

Twitter 的 Bootstrap 是不是像 Skeleton 一样对移动设备友好?

iOS Push UIViewController 像 Snapchat 这样的滑动手势