如何实现高级表视图头 [英] How to achieve an advanced table view header

问题描述

我有一个分组 UITableView 。现在，与默认表格视图标题不同，我的标题应该是下一个到单个单元格：

I have a grouped UITableView. Now unlike the default table view header my header should be next to the individual cells:

标准：

[Header Cell]
[Item 1]
[Item 2]

我需要什么

+-------+----------------+
|       |  Item 1a       |
|  h1   +----------------+
|       |  Item 1b       |
+ - - - +----------------+
|          Item 1c       |
+------------------------+
|       |  Item 2a       |
|  h2   +----------------+
|       |  Item 2b       |
+------------------------+
|       |  Item 3a       |
|  h3   +----------------+
|       |  -placeholder- |
+-------+----------------+

有些备注：

• 群组H1有三个项目


• 群组H2有两个项目


• 群组H3只有一个项目（我必须插入一个预留位置储存格，以便标头储存格可以拥有两个项目储存格的完整高度


• 当用户滚动列表时，应向上推动标题，以使两个标题单元格不重叠。

• Group H1 has three items
• Group H2 has two items
• Group H3 has just one item (I have to insert a placeholder cell so that the header cell can have the full height of two item-cells
• When the user scrolls the list then the header should be pushed upwards that the two header-cells don't overlap.

这里的挑战是标题单元格的高度：

The challenge here is the height of the header cell:

• 如果我将高度设置为0并取消选中 clip subviews ，那么标题单元格会显示，但不会被推到正确的位置。


• 如果我将标题单元格的高度设置为视觉

• If I set the height to 0 and uncheck clip subviews then that header cell is shown but does not get pushed away at the correct position.
• If I set the height of the header cell to the visual height then there is an empty space of that height across the whole width of the table which I don't want...

更新1：我刚刚意识到苹果使用这样的列表进行搜索（按邮件，邮件，联系人，日历等分组）。所以我的问题基本上是如何调整 UITableView 为了像分组的搜索结果...： - ）

Update 1: I just realized that apple uses such a list for the search (grouped by messages, mails, contacts, calenders etc.). So my question basically is how can I tweak UITableView in order to behave like the grouped search results... :-)

推荐答案

更新：我在github上创建了一个项目，正是这样。我已将所有相关的行为代码提取为两个类（ BBFloatingHeaderViewController & BBFloatingHeaderCell ）。还有一个示例项目。我希望这对其他人有用： - ）

Update: I created a project on github, which does exactly this. I have extracted all the relevant code for the behaviour into two classes (BBFloatingHeaderViewController & BBFloatingHeaderCell). There is also an example project. I hope this is useful for others :-)

这里是项目： besi / FloatingTableViewHeader

这是自述文件的摘录：

浮动UITableView标题

这些类旨在复制在iOS内置Spotlight搜索中发现的行为，其中搜索结果按类别分组，相应类别会浮动在搜索结果的左侧。

Floating UITableView headers

These classes aim to copy the behaviour found in iOS built-in Spotlight search, where the search results are grouped by category and the icon of the respective category floats on the left side of the search results.

查看示例项目请参阅如何设置类。

Check out the example project so see how to setup the classes.

1. 添加 .m + .h 文件 BBFloatingHeaderViewController 和 BBFloatingHeaderCell >
   
2. 创建一个TableView并将ViewController的类设置为 BBFloatingHeaderViewController


3. 的子类创建标题并将其类设置为 BBFloatingHeaderCell
的子类

4. 确保浮动页眉视图是 BBFloatingHeaderCell 的视图层次结构。

1. Add the .m + .h files of BBFloatingHeaderViewController and BBFloatingHeaderCell to your project.
2. Create a TableView and set the Class of the ViewController to your subclass of BBFloatingHeaderViewController
3. Create the header cell in IB and set its class to your subclass of BBFloatingHeaderCell
4. Make sure that your floating header view is the topmost view in the BBFloatingHeaderCell's view hierarchy.

结果

The result

这篇关于如何实现高级表视图头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！