web-dev-qa-db-fra.com

gridView avec différentes tailles de cellules, style pinterest

Contexte

GridView est une classe qui étend AdapterView , ce qui signifie qu'elle affiche efficacement les cellules dans un style de grille, en recyclant les anciennes vues pour les afficher sous forme de nouvelles lorsque l'utilisateur les fait défiler.

Le problème

Parfois, vous souhaitez obtenir une interface utilisateur spéciale, qui ressemble à l'interface utilisateur des tuiles Windows Phone, avec des cellules de tailles différentes les unes sur les autres.

Quelque chose comme ça:

AABB
AACC
AADD
AADD

chaque lettre représente une partie de sa cellule, donc la cellule A est 2x4, la cellule B et la cellule C prennent 2x1 chacune et la cellule D est 2x2.

Cela pourrait être encore plus que cela, où la cellule D a terminé un peu au-dessus de ce que j'ai montré, et juste en dessous, il y a une autre cellule de sorte que la fin de D et la fin de A ne sont pas nécessairement alignées.

un exemple d'application présentant ce style est pinterest .

GridView ne permet pas une telle chose.

En fait, chaque solution que j'ai essayée a des problèmes. J'aimerais demander s'il y a d'autres alternatives ou de meilleures solutions.

Ce que j'ai trouvé

Il y a plusieurs façons de gérer ce problème:

  1. En tant que classe qui étend AdapterViewGridView a la possibilité d’avoir un type pour chaque élément (à l’aide de BaseAdapter ), ce qui vous permettrait de définir comment mettre en page la cellule. 

    Cependant, cela vous limite toujours, car vous obtiendrez des rangées d’éléments, les uns en dessous des autres. vous devez les avoir alignés.

  2. GridLayout est une mise en page relativement nouvelle et assez flexible. Google a publié une bibliothèque de compatibilité Nice, prenant en charge les versions API7 et supérieures.

    Cependant, il n'utilise pas de recyclage des vues, c'est donc un mauvais choix si vous souhaitez montrer beaucoup d'éléments.

    Si vous avez beaucoup d'éléments, vous devez créer toutes les vues correspondantes.

  3. QuiltView Library - s'étend de GridLayout, a donc fondamentalement le même problème que celui-ci.

  4. StaggeredGridView - semble le plus prometteur, mais présente de nombreux bogues, en particulier lors du changement d'orientation. ces bogues incluent les cellules vides, le mauvais défilement et les NPE (rares mais qui se produisent encore). Je ne suis pas sûr non plus que cela prenne en charge l'utilisation de cellules personnalisées au lieu d'imagesViews uniquement.

  5. d'autres solutions, comme mentionne ici .

La question

Est-ce que quelqu'un connaît une autre alternative à ce problème? Peut-être quelques solutions de contournement pour l'une des solutions que j'ai présentées?

EDIT: Je pense qu’en ce qui concerne StaggeredGridView, le défilement et les exceptions peuvent être résolus en utilisant un ImageView normal dont vous définissez la taille dans le getView. Je pense que la raison de son fonctionnement étrange est que l'échantillon met à jour la taille de l'image view après son chargement à partir d'Internet. 

Cependant, le problème des cellules vides reste dans cette bibliothèque. non seulement cela, mais leurs tailles changent beaucoup, même sans changer l'orientation.

EDIT: pour l’instant, je pense que la meilleure solution consiste à utiliser la bibliothèque PinterestLikeAdapterView . 

il n'y a pas de problèmes que je peux trouver. 

cependant, il ne peut pas créer d'éléments prenant plus d'une largeur de cellule. c'est très bien quand même.

EDIT: malheureusement, il a des problèmes avec notifyDataSetChanged. J'ai rapporté à ce sujet ici .

androidandroid-gridviewcellsandroid-adapterviewandroid-gridlayout
35
android developer

Je pense qu'un RecyclerView avec StaggeredGridLayoutManager peut résoudre ce problème, et que si vous souhaitez également avoir un défilement rapide, vous pouvez essayer cette bibliothèque .

Aucune astuce supplémentaire n'est donc nécessaire, Google apportant une solution ...

4
android developer

Est-ce un peu tard pour répondre?

consultez cette bibliothèque sur etsy . Cela semble très prometteur.

https://github.com/etsy/AndroidStaggeredGrid

Je pense que c'est une version plus récente de https://github.com/maurycyw/StaggeredGridView

.

Mis à jour.

Essayez d’utiliser RecyclerView StaggeredGridLayoutManager de google à la place.

    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
    recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
    recyclerView.setItemAnimator(new DefaultItemAnimator());
    recyclerView.setAdapter(adapter);
17
Krit

Vous pourrez peut-être accomplir cela avec un seul ListView, où chaque cellule contient un modèle de grille différent. J'ai fait quelque chose de similaire à ce que vous décrivez en utilisant cette technique. Si la taille des cellules doit être unique, cela ne fonctionnera pas, mais cela devrait être suffisant pour le cas que vous avez décrit:

AABB
AACC
AADD
AADD

En créant une poignée de modèles comme celui-ci, avec divers agencements de A, B, C, D, vous pouvez ensuite les utiliser de manière aléatoire en tant que cellules ListView. De simples calculs de décalage permettraient à votre adaptateur de renseigner chaque sous-cellule pour accomplir les opérations suivantes:

AABB
AACC
AADD
AADD

BBBB
ACCC
ADDD
ADDD

AAAA
BBCC
BBCC
DDDD

AABB
AACC
AADD
AADD

AABB
AACC
DDDD
DDDD
0
Graham