Fast, 2 Dimensional Table View

Question

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:

1. 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.
2. 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 CALayer of each row and cell view has a 1px border drawn).

Some possible naïve solutions to the first problem:

1. Create one large view for the data cells, throw it into the main UIScrollView and draw everything using Quartz (possibly in a background thread).
2. 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.

Answer 1

Hi Nathan,

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. :)