Vue de table rapide, en deux dimensions

Question

Je suis en train d'implémenter une vue pour afficher des informations tabulaires avec 2 axes, mais je commence à rencontrer des problèmes de performance avec le rendu de toutes les cellules.

La vue ressemble à ceci:

+------------+-------------+------------+------------+------------+ 
|   | 12.00am | 1.00am | 2.00am | 3.00am | 
+------------+---------+---+---+--------+--------+---+-+---+------+ 
| Category 1 | x | x |  x  | x | x |  | 
+------------+---------+-------+-----+-----------+-----+---+------+ 
| Category 2 |   |  x  |    x    | 
+------------+---------+-------+----+--+--------------------------+ 
| Category 3 | |  x  | x |   x   | 
+------------+--+---------------+-------+-------------------------+ 

Chaque x marque le centre d'une cellule ou d'un morceau de données dans une catégorie qui est placée sur la timeline. La cellule contiendra une seule étiquette de texte. Quand la cellule est pressée, j'ai besoin de savoir qu'elle a été pressée. L'axe x contiendra 24 marqueurs, et il y aura entre 5 & 30 lignes de données.

À l'heure actuelle, je l'ai mis en œuvre en utilisant 3 principaux UIScrollViews; l'un en haut, l'autre sur le côté, puis un grand pour toutes les cellules. Lorsque la grande scrollview défile, elle met à jour les contentOffsets des scrollviews supérieur et latéral. Cela semble fonctionner assez bien, et c'est assez intuitif.

La grande scrollView a un certain nombre de vues de lignes, alignées avec les en-têtes dans la barre latérale sur la gauche. Les cellules sont ensuite fendues dans leurs vues de rangée respectives, et déplacées sur l'axe x pour s'aligner par rapport aux marqueurs de temps. Les cellules de données ne s'alignent pas nécessairement avec les incréments horaires de l'axe x.

J'ai rencontré deux problèmes:

1. Il semble être très lent. Dans certains de ces tableaux, il peut y avoir jusqu'à 2500 cellules. Cela implique que je pourrais avoir besoin d'une sorte de stratégie de réutilisation de vue.
2. Lorsque deux cellules sont côte à côte, il y a une bordure de 2px, mais lorsqu'il s'agit d'une seule cellule, il y a une bordure de 1px (la CALayer de chaque ligne et la cellule ont une bordure 1px).

Certaines solutions naïves possibles au premier problème:

1. Créer une grande vue pour les cellules de données, le jeter dans la principale UIScrollView et dessiner tout en utilisant Quartz (peut-être dans un fil d'arrière-plan).
2. Implémentez une stratégie de réutilisation de vue et gérez l'espace vide lorsque l'utilisateur effectue un défilement rapide.

Est-ce que quelqu'un a des commentaires de haut niveau sur la meilleure façon d'aborder ce problème? Je n'ai pas traité de grandes quantités de données/vues auparavant, donc toute contribution serait grandement appréciée.

Answer 1

J'ai créé quelque chose appelé DTGridView (disponible dans le cadre de DTKit), destiné à cet effet précis (il s'agissait d'un guide de programmation électronique pour une application ici). Ainsi, il permet différentes largeurs de cellules comme vous l'avez montré dans votre diagramme. DTGridView utilise un seul UIScrollView et calcule les positions nécessaires. Il implémente également la réutilisation des cellules (de la même manière que UITableView). En fait, si vous savez comment utiliser une vue de table, alors un DTGridView est assez similaire; Il utilise une source de données pour collecter les données et les vues, et fournit des méthodes déléguées (en utilisant une propriété gridDelegate) pour notifier certains événements. DTKit contient un exemple de projet, qui devrait vous aider à comprendre comment configurer une grille.N'hésitez pas à me contacter si vous avez besoin d'aide. Je comprends que le kit dans son ensemble a besoin d'une meilleure documentation. :)