Comment définir l'espace entre les éléments listView dans Android


371

J'ai essayé d'utiliser marginBottom sur listView pour faire de l'espace entre les éléments listView, mais les éléments sont toujours attachés ensemble.

Est-ce même possible? Si oui, existe-t-il une manière spécifique de le faire?

Mon code est ci-dessous

<LinearLayout
android:id="@+id/alarm_occurences"
android:layout_width="fill_parent" 
android:orientation="vertical"
android:layout_height="fill_parent"
android:background="#EEEEFF"
xmlns:android="http://schemas.android.com/apk/res/android">

<ListView
android:id="@+id/occurences"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>

Mon élément de liste personnalisé:

<com.android.alarm.listItems.AlarmListItem
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" 
android:background="@drawable/alarm_item_background"
android:layout_marginBottom="10dp"    
>
<CheckedTextView     
    android:id="@android:id/text1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:checkMark="?android:attr/listChoiceIndicatorMultiple"
    android:textSize="20sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:padding="10dp"

/>

</com.android.alarm.listItems.AlarmListItem>

Comment puis-je faire un espacement entre les éléments de la liste dans ce cas?

Réponses:


829

@Asahi a pratiquement mis le doigt sur la tête, mais je voulais juste ajouter un peu de XML pour quiconque pourrait flotter ici plus tard via Google:

<ListView android:id="@+id/MyListView"
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:divider="@android:color/transparent"
  android:dividerHeight="10.0sp"/>

Pour une raison quelconque, des valeurs telles que "10", "10.0" et "10sp" sont toutes rejetées par Android pour la dividerHeightvaleur. Il veut un nombre à virgule flottante et une unité, comme "10.0sp". Comme le note @Goofyahead, vous pouvez également utiliser des pixels indépendants de l'affichage pour cette valeur (c'est-à-dire "10dp").


24
Cela n'aide pas si vous voulez également montrer un diviseur sans l'étirer
Sojurn

4
FYI - peut être fait via le code - getListView (). SetDividerHeight (10)
AnhSirk Dasarp

2
ou android: divider = "@ null"
kevin

@ Sojurn J'aurais essayé un patch 9 si j'avais besoin de quelque chose comme ça.
Sufian

@Sojurn vérifie ma réponse . Il ajoute du rembourrage mais n'allonge pas le séparateur.
Sufian


43

Bien que la solution de Nik Reiman fonctionne, j'ai trouvé que ce n'était pas une solution optimale pour ce que je voulais faire. L'utilisation du séparateur pour définir les marges posait le problème que le séparateur ne serait plus visible, vous ne pouvez donc pas l'utiliser pour montrer une frontière claire entre vos articles. De plus, il n'ajoute pas plus de "zone cliquable" à chaque élément, donc si vous voulez rendre vos éléments cliquables et vos éléments sont minces, il sera très difficile pour quiconque de cliquer sur un élément car la hauteur ajoutée par le séparateur n'est pas partie d'un article.

Heureusement, j'ai trouvé une meilleure solution qui vous permet à la fois d'afficher des séparateurs et de régler la hauteur de chaque élément en utilisant non pas des marges mais du rembourrage. Voici un exemple:

ListView

<ListView
android:id="@+id/listView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

ListItem

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="10dp"
    android:paddingTop="10dp" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Item"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

En effet, une meilleure solution. Merci.
Bigyellowbee du

17

Vous devez envelopper votre ListViewarticle (par exemple your_listview_item) dans une autre disposition, par exemple LinearLayoutet ajouter une marge à your_listview_item:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <your_listview_item
        android:id="@+id/list_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
    ...
    ...
    />
</LinearLayout>

De cette façon, vous pouvez également ajouter de l'espace, si nécessaire, à droite et à gauche de l' ListViewélément.


3
Je voulais une marge gauche / droite, donc votre réponse m'a été utile, mais je n'aime pas l'idée de simplement envelopper une autre mise en page uniquement à des fins de marge
2cupsOfTech

Il y a plusieurs façons .. et c'est la mauvaise en termes de performances de mise en page .. essayez de penser à des listes avec des dizaines (ou des centaines) d'articles :)
andrea.rinaldi

@ andrea.spot, cela n'aurait pas d'importance pour les listes contenant des dizaines ou des centaines d'éléments, à moins que ce soit le nombre d'éléments visibles à l'écran à la fois. ListView utilise le recyclage des vues (si vous avez correctement implémenté votre adaptateur).
ataulm

1
Cela ne fonctionnera pas si les éléments ListView auront un arrière
vovahost

11

Ma solution pour ajouter plus d'espace mais garder la ligne horizontale était d'ajouter divider.xmldans le res/drawabledossier et de définir la forme de la ligne à l'intérieur:

divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >

    <stroke
        android:width="1px"
        android:color="@color/nice_blue" />

</shape>

puis dans ma liste je fais référence à mon diviseur comme suit:

<ListView
    android:id="@+id/listViewScheduledReminders"
    android:layout_width="match_parent"
    android:layout_height="0dip"
    android:layout_marginBottom="@dimen/mediumMargin"
    android:layout_weight="1"
    android:divider="@drawable/divider"
    android:dividerHeight="16.0dp"
    android:padding="@dimen/smallMargin" >

</ListView>

remarquez android:dividerHeight="16.0dp"en augmentant et en diminuant cette hauteur, j'ajoute essentiellement plus de rembourrage en haut et en bas de la ligne de séparation.

J'ai utilisé cette page pour référence: http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element


8

Si vous voulez montrer un diviseur avec des marges et sans l'étirer - utilisez InsetDrawable (la taille doit être dans un format, à propos duquel dit @Nik Reiman):

ListView:

<ListView
    android:id="@+id/listView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:cacheColorHint="#00000000"
    android:divider="@drawable/separator_line"
    android:dividerHeight="10.0px"/>

@ drawable / separator_line:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="5.0px"
    android:insetRight="5.0px"
    android:insetTop="8.0px"
    android:insetBottom="8.0px">

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <gradient
            android:startColor="@color/colorStart"
            android:centerColor="@color/colorCenter"
            android:endColor="@color/colorEnd"
            android:type="linear"
            android:angle="0">
        </gradient>
    </shape>
</inset>

7

Vous pouvez utiliser:

android:divider="@null"
android:dividerHeight="3dp"

exemple:

<ListView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView" android:layout_gravity="center_horizontal"
        android:dividerHeight="3dp"
        android:divider="@null" android:clickable="false"/>

Combiner null avec la disposition des éléments de liste produit le meilleur effet
Prof

6

Pour ma candidature, je l'ai fait de cette façon

 <ListView
    android:id="@+id/staff_jobassigned_listview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@null"
    android:dividerHeight="10dp">

</ListView>

juste set the divider to nullet fournir de la hauteur au séparateur a fait pour moi.

Exemple :

android:divider="@null"

ou

android:divider="@android:color/transparent"

et c'est le résultat

entrez la description de l'image ici


Je pense que c'est mieux android:divider="@android:color/transparent".
CoolMind

5

Je me rends compte qu'une réponse a déjà été sélectionnée, mais je voulais juste partager ce qui a fini par fonctionner pour moi lorsque j'ai rencontré ce problème.

J'avais une listView où chaque entrée dans la listView était définie par sa propre mise en page, similaire à ce que Sammy a posté dans sa question. J'ai essayé l'approche suggérée de changer la hauteur du séparateur, mais cela n'a pas fini par être trop joli, même avec un séparateur invisible. Après quelques expérimentations, j'ai simplement ajouté un android:paddingBottom="5dip"au dernier élément de disposition TextView dans le fichier XML qui définit les entrées individuelles de listView.

Cela a fini par me donner exactement ce que j'essayais de réaliser via l'utilisation de android:layout_marginBottom. J'ai trouvé cette solution pour produire un résultat plus esthétique que d'essayer d'augmenter la hauteur du séparateur.


4

Au lieu de donner une marge, vous devez donner un rembourrage:

<ListView
    android:id="@+id/listView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:divider="@android:color/green"
    android:dividerHeight="4dp"
    android:layout_alignParentTop="true"
    android:padding="5dp" >

</ListView>

OU

<ListView
    android:id="@+id/listView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:paddingTop="2dp"
    android:divider="@android:color/green"
    android:dividerHeight="4dp"
    android:paddingLeft="1dp"
    android:paddingRight="1dp"
    android:paddingBottom="2dp"
    android:paddingStart="0dp"
    android:paddingEnd="0dp" >

</ListView>

3

La solution la plus simple avec le code existant d'OP (les éléments de liste ont déjà un remplissage) consiste à ajouter le code suivant:

listView.setDivider(new ColorDrawable(Color.TRANSPARENT));  //hide the divider
listView.setClipToPadding(false);   // list items won't clip, so padding stays

Cette réponse SO m'a aidé.

Remarque: Vous pouvez rencontrer un bogue de l'élément de liste recyclant trop tôt sur les anciennes plates-formes, comme cela a été demandé ici .


1
vous pouvez définir le séparateur sur null et définir dividerHeight sur ce que vous voulez.
Andrew Gallasch

1
@Andy, je pense que cela supprimera également le rembourrage entre les éléments. Ce qui créera le problème que le PO voulait résoudre.
Sufian

2
<ListView
    android:clipToPadding="false"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:dividerHeight="10dp"
    android:divider="@null"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</ListView>

et définissez paddingTop, paddingBottomet dividerHeightsur la même valeur pour obtenir un espacement égal entre tous les éléments et l'espace en haut et en bas de la liste.

J'ai décidé clipToPaddingde falselaisser les vues être dessinées dans cette zone rembourrée.

J'ai mis dividerà @nullsupprimer les lignes entre les éléments de la liste.


2

Une autre façon d'augmenter l'espacement entre les éléments de la liste consiste à ajouter une vue vide à votre code d'adaptateur en fournissant l'attribut layout_height avec l'espacement dont vous avez besoin. Par exemple, afin d'augmenter l'espacement inférieur entre vos éléments de liste, ajoutez cette vue factice (vue vide) à la fin de vos éléments de liste.

<View
    android:layout_width="match_parent"
    android:layout_height="15dp"/>

Ainsi, cela fournira un espacement inférieur de 15 dp entre les éléments d'affichage de liste. Vous pouvez l'ajouter directement si la disposition parent est LinearLayout et que l'orientation est verticale ou prenez les mesures appropriées pour une autre disposition. J'espère que cela t'aides :-)


2

il vous suffit de rendre l'arrière-plan transparent du séparateur de liste et de faire la hauteur en fonction de votre espace nécessaire.

<ListView 
         android:id="@+id/custom_list"
         android:layout_height="match_parent"
         android:layout_width="match_parent"
         android:divider="#00ffffff"
         android:dividerHeight="20dp"/>

1

J'ai trouvé une solution pas si bonne pour cela au cas où vous utilisez une HorizontalListView, car les séparateurs ne semblent pas fonctionner avec, mais je pense que cela fonctionnera dans les deux cas pour le ListView plus commun.

Ajout juste:

<View
android:layout_marginBottom="xx dp/sp"/>

dans la vue la plus basse de la disposition que vous gonflez dans la classe d'adaptateur créera un espacement entre les éléments


1

Afin de donner un espacement entre les vues à l'intérieur d'une liste, veuillez utiliser un remplissage sur vos vues gonflées.

Vous pouvez utiliser android:paddingBottom="(number)dp"&& android:paddingTop="(number)dp"sur votre vue ou les vues que vous gonflez dans votre vue de liste.

La solution de séparation n'est qu'un correctif, car un jour, lorsque vous voudrez utiliser une couleur de séparation (en ce moment, elle est transparente), vous verrez que la ligne de séparation est étirée.


1

Beaucoup de ces solutions fonctionnent. Cependant, si tout ce que vous voulez est de pouvoir définir la marge entre les éléments, la méthode la plus simple que j'ai trouvée consiste à encapsuler votre élément - dans votre cas, CheckedTextView - dans un LinearLayout et à mettre en forme votre marge pour l'élément en cela, pas le root-layout. Assurez-vous de donner à cette disposition d'habillage un identifiant et de le créer avec votre CheckedTextView dans votre adaptateur.

C'est ça. En fait, vous instanciez la marge au niveau de l'élément pour ListView. Parce que ListView ne connaît aucune disposition d'élément - seul votre adaptateur le sait. Cela gonfle essentiellement la partie de la mise en page de l'élément qui était ignorée auparavant.


0

Cela vous aidera à ajouter la hauteur du séparateur.

 getListView().setDividerHeight(10)

Si vous souhaitez ajouter une vue personnalisée, vous pouvez ajouter une petite vue dans la disposition d'élément listView elle-même.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.