快速的二维表格视图
我正在实现一个用于显示带有 2 个轴的表格信息的视图，但我开始遇到渲染所有单元格的性能问题。
该视图看起来像这样：
+------------+-------------+------------+------------+------------+
| | 12.00am | 1.00am | 2.00am | 3.00am |
+------------+---------+---+---+--------+--------+---+-+---+------+
| Category 1 | x | x | x | x | x | |
+------------+---------+-------+-----+-----------+-----+---+------+
| Category 2 | | x | x |
+------------+---------+-------+----+--+--------------------------+
| Category 3 | | x | x | x |
+------------+--+---------------+-------+-------------------------+
每个 x 标记单元格的中心，或者放置在时间轴上的类别中的一段数据。该单元格将包含一个文本标签。当单元格被按下时，我需要知道它被按下了。 x 轴将包含 24 个标记，并且将包含 5 和 5 之间的任意位置。 30行数据。
目前，我已经使用 3 个主要的 UIScrollViews 实现了它；一个在顶部，一个在侧面，然后是所有单元格的一个大的。当大滚动视图滚动时，它会更新顶部和侧面滚动视图的 contentOffsets。这似乎工作得很好，而且非常直观。
大的scrollView有许多行视图，与左侧边栏中的标题对齐。然后将单元格放入各自的行视图中，并跨 x 轴移动以相对于时间标记对齐。数据单元格不一定与 x 轴的每小时时间增量精确对齐。
我遇到了两个问题：
- 它似乎真的很慢。在其中一些表中，单元格数量最多可达 2500 个。这意味着我可能需要某种视图重用策略。
- 当两个单元格彼此相邻时，有一个 2px 边框，但当它是一个单独的单元格时，有一个 1px 边框（每行和单元格视图的
CALayer都绘制了 1px 边框）。
针对第一个问题的一些可能的简单解决方案：
- 为数据单元格创建一个大视图，将其放入主 UIScrollView 中并使用 Quartz 绘制所有内容（可能在后台线程中）。
- 实施视图重用策略并处理用户快速滚动时出现的空白。
有没有人对解决这个问题的最佳方法有任何高层意见？我以前没有处理过大量的数据/视图，所以任何输入将不胜感激。
I'm implementing a view for displaying tabular information with 2 axis, but I'm starting to run into performance issues with rendering all the cells.
The view looks something like this:
+------------+-------------+------------+------------+------------+
| | 12.00am | 1.00am | 2.00am | 3.00am |
+------------+---------+---+---+--------+--------+---+-+---+------+
| Category 1 | x | x | x | x | x | |
+------------+---------+-------+-----+-----------+-----+---+------+
| Category 2 | | x | x |
+------------+---------+-------+----+--+--------------------------+
| Category 3 | | x | x | x |
+------------+--+---------------+-------+-------------------------+
Each x marks the center of a cell, or a piece of data in a category that's placed on the timeline. The cell will contain a single text label. When the cell is pressed, I need to know that it was pressed. The x axis will contain 24 markers, and there will be anywhere between 5 & 30 rows of data.
At the moment, I've implemented it using 3 main UIScrollViews; one across the top, one down the side, and then a large one for all the cells. When the large scrollview is scrolled, it updates the contentOffsets of the top and side scrollviews. This seems to work quite well, and it's quite intuitive.
The large scrollView has a number of row views, aligned with the headers in the sidebar on the left. The cells are then slotted into their respective row views, and shifted across the x axis to align relative to the time markers. The data cells do not necessarily line up precisely with the hourly time increments of the x axis.
I've encountered two problems:
- It seems to be really slow. In some of these tables, there can be up to 2500 cells. This implies I might need some kind of view re-use strategy.
- When two cells are next to each other there's a 2px border, but when it's a single cell on its' own there's a 1px border (The
CALayerof each row and cell view has a 1px border drawn).
Some possible naïve solutions to the first problem:
- Create one large view for the data cells, throw it into the main UIScrollView and draw everything using Quartz (possibly in a background thread).
- Implement a view-reuse strategy and deal with having blank space when the user scrolls around quickly.
Does anyone have any high-level input on the best way to approach this problem? I've not dealt with large amounts of data/views before, so any input would be greatly appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我创建了一个名为 DTGridView 的东西（作为 DTKit 的一部分提供），就是为了这个目的（它是为了应用程序的电子编程指南在这里）。因此它允许不同宽度的单元格，就像您在图表中所示的那样。
DTGridView 使用一个 UIScrollView 并计算所需的位置。它还实现了单元格重用（与 UITableView 的方式相同）。事实上，如果您知道如何使用表视图，那么 DTGridView 非常相似；它使用数据源来收集数据和视图，并提供委托方法（使用 gridDelegate 属性）来通知某些事件。
DTKit 包含一个示例项目，它应该可以帮助您了解如何设置网格。
如果您需要任何帮助，请告诉我。我知道整个套件需要一些更好的文档。 :)
I created something called DTGridView (available as part of DTKit), intended for this exact purpose (it was for an electronic programming guide for an app over here). So it allows differing widths of cells like you've shown in your diagram.
DTGridView uses one single UIScrollView and calculates the needed positions. It also implements cell reuse (in the same way that UITableView does). In fact if you know how to use a table view, then a DTGridView is pretty similar; It uses a dataSource to collect the data and views, and provides delegate methods (using a gridDelegate property) to notify of certain events.
DTKit contains an example project, which should help you understand how to set a grid up.
Give me a shout if you need any help. I understand the kit as a whole needs some better documenting. :)