Come impostare lo spazio tra gli elementi di listView in Android


371

Ho provato a usare marginBottom su listView per fare spazio tra listView Item, ma comunque gli elementi sono collegati insieme.

È anche possibile? Se sì, esiste un modo specifico per farlo?

Il mio codice è sotto

<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>

La mia voce di elenco personalizzata:

<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>

Come posso spaziare tra le voci dell'elenco in questo caso?

Risposte:


829

@Asahi ha praticamente colpito l'unghia sulla testa, ma volevo solo aggiungere un po 'di XML per chiunque magari fluttuasse qui in seguito tramite 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"/>

Per qualche motivo, valori come "10", "10.0" e "10sp" sono tutti rifiutati da Android per il dividerHeightvalore. Vuole un numero in virgola mobile e un'unità, come "10.0sp". Come osserva @Goofyahead, puoi anche usare pixel indipendenti dalla visualizzazione per questo valore (ad esempio "10dp").


24
Questo non aiuta se vuoi anche mostrare un divisore senza allungarlo
Sojurn

4
Cordiali saluti - può essere fatto tramite il codice - getListView (). SetDividerHeight (10)
AnhSirk Dasarp

2
o android: divider = "@ null"
kevin

@Sojurn avrei provato una patch 9 se avessi avuto bisogno di qualcosa del genere.
Sufian,

@Sojurn controlla la mia risposta . Aggiunge imbottitura ma non allunga il divisore.
Sufian,


43

Sebbene la soluzione di Nik Reiman funzioni, non l'ho trovata una soluzione ottimale per quello che volevo fare. L'uso del divisore per impostare i margini ha avuto il problema che il divisore non sarà più visibile, quindi non puoi usarlo per mostrare un chiaro confine tra i tuoi oggetti. Inoltre, non aggiunge più "area cliccabile" a ciascun elemento, quindi se vuoi rendere selezionabili i tuoi oggetti e i tuoi oggetti sono sottili, sarà molto difficile per chiunque fare clic su un elemento poiché l'altezza aggiunta dal divisore non è parte di un oggetto.

Fortunatamente ho trovato una soluzione migliore che ti permette di mostrare entrambi i divisori e ti permette di regolare l'altezza di ogni elemento usando non i margini ma l'imbottitura. Ecco un esempio:

Visualizzazione elenco

<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>

Anzi una soluzione migliore. Grazie.
Bigyellowbee,

17

Dovresti avvolgere il tuo ListViewarticolo (diciamo your_listview_item) in qualche altro layout, ad esempio LinearLayoute aggiungere margine a 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>

In questo modo puoi anche aggiungere spazio, se necessario, a destra e a sinistra ListViewdell'elemento.


3
volevo il margine sinistro / destro, quindi la tua risposta è stata utile per me, ma non mi piace l'idea di avvolgere un altro layout solo a scopo di margine
2cupsOfTech

Ci sono alcuni modi .. ed è quello negativo in termini di prestazioni di layout .. prova a pensare a liste con decine (o centinaia) di elementi :)
andrea.rinaldi

@ andrea.spot non avrebbe importanza per gli elenchi con decine o centinaia di elementi a meno che non fosse il numero di elementi visibili sullo schermo contemporaneamente. ListView utilizza il riciclaggio delle viste (se l'adattatore è stato implementato correttamente).
ataulm,

1
Questo non funzionerà se gli elementi di ListView avranno uno sfondo
vovahost il

11

La mia soluzione per aggiungere più spazio ma mantenere la linea orizzontale era quella di aggiungere divider.xmlnella res/drawablecartella e definire la forma della linea all'interno:

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>

quindi nella mia lista faccio riferimento al mio divisore come segue:

<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>

notando android:dividerHeight="16.0dp"aumentando e diminuendo questa altezza, sto fondamentalmente aggiungendo più imbottitura nella parte superiore e inferiore della linea di divisione.

Ho usato questa pagina come riferimento: http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element


8

Se vuoi mostrare un divisore con margini e senza allungarlo - usa InsetDrawable (la dimensione deve essere in un formato, su cui ha detto @Nik Reiman):

Visualizzazione elenco:

<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

Puoi usare:

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

esempio:

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

La combinazione di null con il layout degli elementi dell'elenco produce l'effetto migliore
Prof

6

Per la mia applicazione, ho fatto così

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

</ListView>

giusto set the divider to nulle fornire altezza al divisore ha fatto per me.

Esempio :

android:divider="@null"

o

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

e questo è il risultato

inserisci qui la descrizione dell'immagine


Penso che sia meglio android:divider="@android:color/transparent".
CoolMind

5

Mi rendo conto che era già stata selezionata una risposta, ma volevo solo condividere ciò che ha funzionato per me quando ho riscontrato questo problema.

Avevo un listView in cui ogni voce in listView era definita dal suo layout, simile a quello che Sammy ha pubblicato nella sua domanda. Ho provato l'approccio suggerito di modificare l'altezza del divisore, ma ciò non ha finito per sembrare troppo bello, anche con un divisore invisibile. Dopo alcuni esperimenti, ho semplicemente aggiunto un android:paddingBottom="5dip"ultimo elemento di layout TextView nel file XML che definisce le singole voci di listView.

Questo ha finito per darmi esattamente quello che stavo cercando di ottenere tramite l'uso di android:layout_marginBottom. Ho trovato questa soluzione per produrre un risultato esteticamente più piacevole rispetto al tentativo di aumentare l'altezza del divisore.


4

Invece di dare margine, dovresti dare il riempimento:

<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>

O

<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 soluzione più semplice con il codice esistente di OP (gli elementi dell'elenco hanno già il riempimento) è aggiungere il seguente codice:

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

Questa risposta SO mi ha aiutato.

Nota: è possibile che si verifichi un bug del riciclo dell'elemento dell'elenco troppo presto su piattaforme precedenti, come è stato chiesto qui .


1
puoi impostare il divisore su null e impostare divisoreHeight come preferisci.
Andrew Gallasch,

1
@Andy Penso che rimuoverà anche l'imbottitura tra gli elementi. Il che creerà il problema che l'OP voleva risolvere ...
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>

e impostare paddingTop, paddingBottome dividerHeightallo stesso valore per ottenere spaziatura uguale fra tutti gli elementi e lo spazio nella parte superiore e inferiore della lista.

Ho impostato clipToPaddingper falseconsentire alle viste di essere disegnate in questa area imbottita.

Ho impostato dividerper @nullrimuovere le linee tra gli elementi dell'elenco.


2

Un altro modo per aumentare la spaziatura tra le voci dell'elenco è aggiungere una vista vuota al codice dell'adattatore fornendo l'attributo layout_height con la spaziatura richiesta. Ad esempio, per aumentare la spaziatura inferiore tra le voci dell'elenco, aggiungere questa vista fittizia (vista vuota) alla fine delle voci dell'elenco.

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

Quindi questo fornirà una spaziatura inferiore di 15 dp tra gli elementi della vista elenco. È possibile aggiungerlo direttamente se il layout principale è LinearLayout e l'orientamento è verticale o adottare le misure appropriate per altri layout. Spero che sia di aiuto :-)


2

devi solo rendere trasparente lo sfondo del divisore di elenco e rendere l'altezza in base al divario necessario.

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

1

Ho trovato una soluzione non così buona nel caso in cui tu stia utilizzando un HorizontalListView, dal momento che i divisori non sembrano funzionare con esso, ma penso che funzionerà in entrambi i modi per ListView più comune.

Sto solo aggiungendo:

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

nella vista più in basso del layout che si gonfia nella classe dell'adattatore creerà una spaziatura tra gli elementi


1

Per consentire la spaziatura tra le viste all'interno di un elenco Visualizza, utilizzare il riempimento nelle viste di gonfiaggio.

Puoi utilizzare android:paddingBottom="(number)dp"&& android:paddingTop="(number)dp"nella tua vista o nelle visualizzazioni che stai gonfiando nella tua visualizzazione elenco.

La soluzione di divisione è solo una soluzione, perché un giorno, quando vorrai usare un colore di divisione (in questo momento è trasparente) vedrai che la linea di divisione è stata allungata.


1

Molte di queste soluzioni funzionano. Tuttavia, se tutto ciò che vuoi è essere in grado di impostare il margine tra gli elementi, il metodo più semplice che ho escogitato è di avvolgere il tuo articolo - nel tuo caso CheckedTextView - in un LinearLayout e inserire la formattazione del margine per l'articolo in quello, non il layout di root. Assicurati di assegnare a questo layout di layout un ID e crearlo insieme a CheckedTextView nell'adattatore.

Questo è tutto. In effetti, stai creando un'istanza del margine a livello di elemento per ListView. Poiché ListView non è a conoscenza di alcun layout di elemento, solo l'adattatore. Questo sostanzialmente gonfia la parte del layout dell'articolo che era stata ignorata in precedenza.


0

Questo ti aiuterà ad aggiungere l'altezza del divisore.

 getListView().setDividerHeight(10)

Se si desidera aggiungere una vista personalizzata, è possibile aggiungere una vista piccola nel layout dell'elemento listView stesso.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.