如何重新创建 TweetBot 样式的“下拉”单元格菜单？

Posted 2023-03-04

【中文标题】如何重新创建 TweetBot 样式的“下拉”单元格菜单？

【英文标题】：How could I recreate the TweetBot style 'drop-down' cell menus?

【发布时间】：2011-11-08 22:40:35

【问题描述】：

“TweetBot”应用程序在每个单元格下方都有一个下拉菜单，点击该单元格时会显示该下拉菜单。菜单显示为不同的单元格，直接位于点击的单元格下方。这是一个（相当大的）屏幕截图，以使其更清晰：

这个界面理念非常适合我正在创建的应用程序。由于需要正确匹配单元格/索引路径，它并不像听起来那么简单。我对如何实现这一点有一些想法 - 但是：

您将如何实现此功能（或者如果您已经完成此功能，您是如何实现的？）或者更好 - 是否已经有任何开源实现？

【参考方案1】：

创建单元格时，创建 2 个 UIView，一个包含所有正常内容，另一个包含下拉菜单。

设置下拉视图的自动调整大小掩码，使其具有不灵活的高度和灵活的上边距。 （其余照常） 设置普通内容视图的自动调整大小掩码，使其具有不灵活的边距和灵活的宽度和高度。

为两个视图分别设置一个标签。

在内容视图之前添加下拉视图，使其被内容视图隐藏（内容视图也不能有透明背景）

在表格视图委托方法中，当一个单元格被按下时，设置添加的内容视图的自动调整大小掩码，使用标签到达它，除了不灵活的高度和灵活的下边距外，与之前相同。并添加：

[tableView beginUpdates];
[tableView endUpdates];

创建一个实例变量来保存一个 NSIndexPath 对象。将变量设置为按下单元格的索引路径。

在table view的委托方法中设置单元格的高度，添加if语句，使下拉框的高度与选中单元格的高度相加（会在上面介绍的实例变量中）

将必要的 if 语句添加到单元格按下方法以确定是显示下拉列表还是隐藏它。

这只是一个粗略的向单元格添加下拉菜单的方法，还有其他方法，可能会更好。当我使用笔记本电脑时，我可能会添加一些代码和更好的细节。

【讨论】：

谢谢，这种方式的主要限制是 cell.contentView 不能是透明的。在我的情况下它需要，这使得解决方案变得更加棘手，因为我无法在单元格后面隐藏任何东西！

【参考方案2】：

答案是：难度很大。特别是如果您的 UITableViewCells 是半透明的并且是“分组”表格视图样式，就像我的情况一样。

我仍然没有让这个解决方案完美运行，尤其是在每个部分的末端都有圆角问题。不过，这里是我到目前为止的工作方式的基本概述。

子类 UITableViewCell - 例如，ExtendableTableViewCell。

创建一个简单的类来管理扩展的单元格。

从这个简单的类中，让它调用一个方法 ExtendableTableViewCell，例如extendCell，只要单元格应该 延长。

在extendCell中，添加相关的扩展动画。有所有 各种带有遮罩、边界和锚点的动画技巧 在半透明细胞的情况下是必需的 - 我仍然 还没有完善。

如果有人能找到更好的方法，或者对我如何解决动画问题或很好地扩展部分中的底部单元格有任何想法，请说！

【参考方案3】：

约旦似乎在这方面取得了一些进展；我自己没有尝试过这样的事情，但这是我的看法：

在每个常规 UITableViewCell 之间插入一个 0px 高度的透明 UITableViewCell。您应该可以使用ConfigureCellForIndexPath: 中的if(index%2) 条件块轻松完成此操作

将工具栏设置为 UITableView 的子视图，但将 UITableViewCells 放置在其上方。当用户点击一个单元格时，您只需将工具栏重新定位在该单元格的底部并将透明单元格设置为工具栏的高度即可。

请记住在动画完成后将工具栏带到透明单元格的前面。否则用户将向虚拟单元发送触摸事件

您需要考虑用户点击下界在屏幕外的单元格的情况，并滚动 UITableView 以保持自定义工具栏处于视图中。否则用户可能甚至没有意识到工具栏已打开。

祝你好运！

【讨论】：

谢谢，如果我使用的是非半透明单元格，那么这将是一种方法。不过，这样一来，您似乎就可以看到隐藏在其他单元格后面的工具栏:)

Jordan，一个可能的解决方案是将工具栏的高度也设置为 0px，并将其与透明单元格一起设置动画。或者，在工具栏顶部放置另一个与背景颜色相同颜色的视图，然后让它从那里滑出。同样的错觉。

这是我一开始的想法。但是......我的背景是一张图片，所以同样的颜色技巧是行不通的。而且，如果我这样设置动画，它会以压扁的方式进行动画处理。我正在尝试创建的动画是它平滑地滑出上述单元格的动画，没有拉伸。不过谢谢

您可以将 UIImageView 与背景图像一起使用。调整它的大小，使其恰好在被点击的单元格的下限处结束，并将图像设置为 not 缩放以适应..而不是在该点将其裁剪掉。我不记得设置是什么了。另外，透明单元格对性能不是很不利吗？

透明单元格似乎工作正常，滚动流畅等。如果我将图片设置为背景的一部分，您将能够在滚动时看到它。是的，我知道 - 很难，但透明单元格看起来真的很棒。我宁愿不重新设计应用程序的外观，但如果我不能让它工作，我可能不得不重新设计。