web-dev-qa-db-fra.com

Espacement entre les éléments listView Android

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

Est-ce même possible? Si oui, existe-t-il un moyen 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 espacer les éléments de la liste dans ce cas?

362
Sammy

@ Asahi a bien mis le doigt dessus, mais je voulais juste ajouter un peu de XML à quiconque peut-être 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, les valeurs telles que "10", "10.0" et "10sp" sont toutes rejetées par Android pour la valeur dividerHeight. Il veut un nombre à virgule flottante et une unité, telle que "10.0sp". Comme @Goofyahead le note, vous pouvez également utiliser des pixels indépendants de l'affichage pour cette valeur (c'est-à-dire "10dp").

813
Nik Reiman

Peut-être que divider ou dividerHeight la propriété de ListView peut résoudre votre problème.

61
Asahi

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 suivant: le séparateur ne sera plus visible. Vous ne pouvez donc pas l'utiliser pour indiquer une limite nette entre vos éléments. En outre, il n’ajoute pas plus de "zone cliquable" à chaque élément. Par conséquent, si vous souhaitez rendre vos éléments cliquables et que 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 permettant d'afficher les séparateurs et d'ajuster la hauteur de chaque élément en utilisant non pas les marges, mais le 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>
42
idunnololz

Vous devez envelopper votre élément ListView (par exemple, your_listview_item) dans une autre présentation, par exemple LinearLayout et 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'élément ListView.

17
Vasu

Ma solution pour ajouter plus d’espace tout en conservant la ligne horizontale consistait à ajouter divider.xml dans le dossier res/drawable et à 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 référence mon séparateur 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 le Android:dividerHeight="16.0dp" en augmentant et en diminuant cette hauteur, je rajoute essentiellement du 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

11
kamelnyc

Si vous souhaitez afficher un séparateur avec des marges et sans l'étirer, utilisez InsetDrawable (la taille doit être dans un format qui indique @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>
8
LionKing

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"/>
7
mspapant

Je me rends compte qu'une réponse a déjà été choisie, mais je voulais juste partager ce qui a finalement fonctionné pour moi lorsque j'ai rencontré ce problème.

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

Cela a fini par me donner exactement ce que je cherchais à réaliser en utilisant Android:layout_marginBottom. J'ai trouvé que cette solution produisait un résultat plus esthétique que d'essayer d'augmenter la hauteur du diviseur.

5
Tim Severeijns

Au lieu de donner une marge, vous devriez 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>

OR

<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>
4
Rahul Raina

La solution la plus simple avec le code existant de OP (les éléments de la 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 SO réponse m'a aidé.

Remarque: Vous pouvez être confronté à un problème de recyclage des éléments de liste trop tôt sur les anciennes plates-formes, comme cela a été demandé ici .

3
Sufian

Pour mon application, j'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 null et fournir de la hauteur au diviseur a suffi pour moi.

Exemple:

Android:divider="@null"

ou

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

et ceci est résultat

enter image description here

3
Sagar Pawar
<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, paddingBottom et dividerHeight sur la même valeur pour obtenir un espacement égal entre tous les éléments et un espace en haut et en bas de la liste.

Je règle clipToPadding sur false pour que les vues soient dessinées dans cette zone de remplissage.

Je règle divider sur @null pour supprimer les lignes entre les éléments de la liste.

2
Andrew Gallasch

Un autre moyen d'augmenter l'espacement entre les éléments de liste consiste également à ajouter une vue vide au code de votre adaptateur en fournissant l'attribut layout_height avec l'espacement requis. Par exemple afin d'augmenter l'espacement du bas 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"/>

Cela donnera donc un espacement inférieur de 15 dp entre les éléments de la vue liste. Vous pouvez directement ajouter ceci 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
FingerSmith

vous avez juste besoin de rendre le fond transparent du séparateur de liste et de régler la hauteur en fonction de l’espace requis.

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

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

Je viens d'ajouter:

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

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

1
Juliagu

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

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

La solution de division est juste une solution, car un jour, lorsque vous voudrez utiliser une couleur de division (elle est transparente pour le moment), vous verrez que la ligne de division est étirée.

1
Avi Levin

Beaucoup de ces solutions fonctionnent. Toutefois, si vous souhaitez uniquement pouvoir définir la marge entre les éléments, la méthode la plus simple que j'ai proposée consiste à envelopper votre élément - dans votre cas, CheckedTextView - dans un objet LinearLayout et à y placer le formatage de la marge pour l'élément, pas la mise en page racine. Assurez-vous de donner à cette mise en page un identifiant et de le créer avec votre CheckedTextView dans votre adaptateur.

C'est ça. En effet, 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. En gros, cela gonfle la partie de la présentation de l'élément qui était ignorée auparavant.

1
jwehrle