Comment définissez-vous l'espacement des colonnes avec un RecyclerView à l'aide d'un GridLayoutManager? La définition de la marge / remplissage à l'intérieur de ma mise en page n'a aucun effet.
251
Comment définissez-vous l'espacement des colonnes avec un RecyclerView à l'aide d'un GridLayoutManager? La définition de la marge / remplissage à l'intérieur de ma mise en page n'a aucun effet.
GridLayoutManager
-classementgenerateDefaultLayoutParams()
et la substitution et la parenté?Réponses:
RecyclerViews prend en charge le concept de ItemDecoration : décalages spéciaux et dessin autour de chaque élément. Comme vu dans cette réponse , vous pouvez utiliser
Ajoutez-le ensuite via
la source
RecyclerView
(et de votre utilisationclipToPadding="false"
), alors vous pouvez restructurer légèrement les choses. Si vous ne le faites pas cependant, vous déplaceriez simplement la vérification if pour la dernière fois (car vous voudriez toujours le rembourrage inférieur sur le dernier élément).GridLayoutManager
. La réponse ne fonctionnera pas sur les dispositions multi-colonnes / lignesLe code suivant fonctionne bien et chaque colonne a la même largeur:
Usage
1. pas de bord
2. avec bord
la source
Voici la solution simple étape par étape si vous souhaitez un espacement égal autour des articles et des tailles d'articles identiques.
ItemOffsetDecoration
la mise en oeuvre
Dans votre code source, ajoutez
ItemOffsetDecoration
à votreRecyclerView.
valeur de décalage d'élément doit être la moitié de la valeur réelle que vous souhaitez ajouter en tant qu'espace entre les éléments.Définissez également la valeur de décalage de l'élément comme remplissage pour son
RecyclerView
et spécifiezandroid:clipToPadding=false
.la source
Essaye ça. Il prendra soin d'un espacement égal tout autour. Fonctionne à la fois avec List, Grid et StaggeredGrid.
Édité
Le code mis à jour doit gérer la plupart des cas d'angle avec des étendues, une orientation, etc. Notez que si vous utilisez setSpanSizeLookup () avec GridLayoutManager, la définition de setSpanIndexCacheEnabled () est recommandée pour des raisons de performances.
Remarque, il semble qu'avec StaggeredGrid, il semble y avoir un bogue où l'index des enfants devient farfelu et difficile à suivre, de sorte que le code ci-dessous pourrait ne pas fonctionner très bien avec StaggeredGridLayoutManager.
J'espère que ça aide.
la source
Le code suivant gérera StaggeredGridLayoutManager, GridLayoutManager et LinearLayoutManager.
Ensuite, utilisez-le
la source
SpaceItemDecoration
ajoute en fait le remplissage au parent (la vue du recycleur).halfSpace
rembourrage est apparu (sur le côté droit) alors que je n'avais pas défini le rembourrage pour le parent en xmlVoici une solution qui ne nécessite pas "spanCount" (nombre de colonnes) Je l'utilise car j'utilise GridAutofitLayoutManager (calcule le nombre de colonnes en fonction de la taille de cellule requise)
(attention, cela ne fonctionnera que sur GridLayoutManager )
Voici le GridAutofitLayoutManager qui intéresse tout le monde:
Finalement:
la source
layoutManager.getPosition(view)
après cette vérification si la position est zéro qui sera votre en-tête .. également, cette façon vous permettra d'ajouter un autre en-tête à toutes les positions que vous voulez :)Il n'y a qu'une seule solution simple, que vous pouvez mémoriser et mettre en œuvre partout où vous en avez besoin. Pas de bugs, pas de calculs fous. Mettez de la marge dans la disposition de la carte / de l'article et mettez la même taille que le rembourrage dans RecyclerView:
item_layout.xml
activity_layout.xml
METTRE À JOUR:
la source
Si vous souhaitez FIXER la taille de votre
RecyclerView
article sur tous les appareils. Vous pouvez faire comme çarecyclerview_item.xml
dimens.xml
Activité
la source
La réponse sélectionnée est presque parfaite, mais en fonction de l'espace, la largeur des éléments peut ne pas être égale. (Dans mon cas, c'était critique). Je me suis donc retrouvé avec ce code qui augmente un peu l'espace, donc les articles ont tous la même largeur.
la source
columnCount == 1 -> { outRect.left = space outRect.right = space }
Copié le code fourni par @edwardaa et je le rend parfait pour prendre en charge RTL:
la source
Les réponses ci-dessus ont clarifié les moyens de définir la gestion des marges GridLayoutManager et LinearLayoutManager.
Mais pour StaggeredGridLayoutManager, la réponse de Pirdad Sakhizada dit: "Cela pourrait ne pas fonctionner très bien avec StaggeredGridLayoutManager". Ce devrait être le problème avec IndexOfSpan.
Vous pouvez l'obtenir de cette façon:
la source
Un peu différente de la réponse d'edwardaa, la différence est la façon dont la colonne est déterminée, car dans des cas tels que des éléments de différentes hauteurs, la colonne ne peut pas être déterminée simplement par%
spanCount
la source
la source
Voici ma modification
SpacesItemDecoration
qui peut prendre numOfColums et espace également en haut, en bas, à gauche et à droite .et utilisez le code ci-dessous sur votre logique.
la source
Il existe une solution très simple et pourtant flexible pour ce problème en utilisant uniquement XML qui fonctionne sur chaque LayoutManager.
Supposons que vous souhaitiez un espacement égal de X (8dp par exemple).
Enveloppez votre élément CardView dans une autre mise en page
Donnez à la disposition extérieure un rembourrage de X / 2 (4dp)
Rendre l'arrière-plan de mise en page externe transparent
...
...
et c'est tout. Vous avez un espacement parfait de X (8dp).
la source
Pour ceux qui ont des problèmes avec staggeredLayoutManager (comme https://imgur.com/XVutH5u )
Méthodes de recyclerView:
retourne parfois -1 comme index afin que nous puissions rencontrer des problèmes lors de la définition de itemDecor. Ma solution est de remplacer la méthode obsolète de ItemDecoration:
au lieu du débutant:
comme ça:
Semble fonctionner pour moi jusqu'à présent :)
la source
Les réponses à cette question semblent plus complexes qu'elles ne devraient l'être. Voici mon point de vue à ce sujet.
Disons que vous voulez un espacement de 1dp entre les éléments de la grille. Procédez comme suit:
la source
Cela fonctionnera également
RecyclerView
avec l'en-tête.la source
La réponse de yqritc a parfaitement fonctionné pour moi. J'utilisais Kotlin cependant voici donc l'équivalent de cela.
Tout le reste est identique.
la source
Pour les utilisateurs de StaggeredGridLayoutManager , faites attention, beaucoup de réponses ici, y compris la plus votée, calculent la colonne de l'élément avec le code ci-dessous:
ce qui suppose que les articles 1er / 3ème / 5ème / .. sont toujours situés à gauche et que les articles 2ème / 4ème / 6ème / .. sont toujours situés à droite. Cette hypothèse est-elle toujours vraie? Non.
Supposons que votre 1er élément soit de 100dp de haut et que le 2ème ne soit que de 50dp, devinez où se trouve votre 3e élément, à gauche ou à droite?
la source
Lorsque vous utilisez CardView pour les enfants, le problème des espaces entre les éléments peut être résolu en définissant app: cardUseCompatPadding sur true.
Pour des marges plus importantes, augmentez l'élévation de l'article. CardElevation est facultatif (utilisez la valeur par défaut).
la source
J'ai fini par le faire comme ça pour mon RecyclerView avec GridLayoutManager et HeaderView .
Dans le code ci-dessous, j'ai défini un espace de 4dp entre chaque élément (2dp autour de chaque élément et un rembourrage 2dp autour de l'ensemble du recyclage).
layout.xml
fragment / activité
SpaceItemDecoration.java
Utils.java
la source
Pour que https://stackoverflow.com/a/29905000/1649371 (ci-dessus) fonctionne, j'ai dû modifier les méthodes suivantes (et tous les appels suivants)
la source
Ce lien a fonctionné pour moi toutes les situations que vous pouvez essayer.
la source
Si vous avez un interrupteur à bascule qui bascule entre la liste et la grille, n'oubliez pas d'appeler
recyclerView.removeItemDecoration()
avant de définir une nouvelle décoration d'élément. Sinon, les nouveaux calculs d'espacement seraient incorrects.Quelque chose comme ça.
la source
Si vous utilisez Header avec GridLayoutManager, utilisez ce code écrit en kotlin pour l'espacement entre les grilles:
Et passer
ItemDecoration
àrecyclerview
asla source
merci la réponse d'edwardaa https://stackoverflow.com/a/30701422/2227031
Un autre point à noter est que:
si l'espacement total et la largeur totale de l'élément ne sont pas égaux à la largeur de l'écran, vous devez également ajuster la largeur de l'élément, par exemple, sur la méthode onBindViewHolder de l'adaptateur
la source
Une version Kotlin que j'ai faite sur la base de la grande réponse d'Edwardaa
la source