So legen Sie den Platz zwischen listView-Elementen in Android fest


371

Ich habe versucht, marginBottom in der listView zu verwenden, um Platz zwischen listView-Elementen zu schaffen, aber die Elemente sind immer noch miteinander verbunden.

Ist es überhaupt möglich? Wenn ja, gibt es einen bestimmten Weg, dies zu tun?

Mein Code ist unten

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

Mein benutzerdefiniertes Listenelement:

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

Wie kann ich in diesem Fall einen Abstand zwischen Listenelementen festlegen?

Antworten:


829

@Asahi hat den Nagel auf den Kopf getroffen, aber ich wollte nur ein bisschen XML für jeden hinzufügen, der vielleicht später über Google hierher kommt:

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

Aus irgendeinem Grund werden Werte wie "10", "10.0" und "10sp" von Android für diesen dividerHeightWert abgelehnt . Es möchte eine Gleitkommazahl und eine Einheit wie "10.0sp". Wie @ Goofyahead feststellt, können Sie für diesen Wert auch displayunabhängige Pixel verwenden (dh "10dp").


24
Dies hilft nicht, wenn Sie auch einen Teiler zeigen möchten, ohne ihn zu dehnen
Sojurn


2
oder android: divider = "@ null"
Kevin

@ Sojurn Ich hätte einen 9-Patch ausprobiert, wenn ich so etwas gebraucht hätte.
Sufian

@ Sojurn überprüfe meine Antwort . Es fügt Polsterung hinzu, dehnt aber den Teiler nicht.
Sufian


43

Obwohl die Lösung von Nik Reiman funktioniert, fand ich, dass sie keine optimale Lösung für das ist, was ich tun wollte. Die Verwendung des Teilers zum Festlegen der Ränder hatte das Problem, dass der Teiler nicht mehr sichtbar ist, sodass Sie ihn nicht verwenden können, um eine klare Grenze zwischen Ihren Elementen anzuzeigen. Außerdem wird nicht mehr zu jedem Element ein "anklickbarer Bereich" hinzugefügt. Wenn Sie also Ihre Elemente anklickbar machen möchten und Ihre Elemente dünn sind, ist es für niemanden sehr schwierig, auf ein Element zu klicken, da die vom Teiler hinzugefügte Höhe dies nicht ist Teil eines Artikels.

Glücklicherweise habe ich eine bessere Lösung gefunden, mit der Sie sowohl Teiler anzeigen als auch die Höhe jedes Elements anpassen können, indem Sie keine Ränder, sondern Polster verwenden. Hier ist ein Beispiel:

Listenansicht

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

Listenpunkt

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

In der Tat eine bessere Lösung. Vielen Dank.
Bigyellowbee

17

Sie sollten Ihren ListViewArtikel (z. B. your_listview_item) in ein anderes Layout einwickeln, z. B. LinearLayouteinen Rand hinzufügen zu 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>

Auf diese Weise können Sie bei Bedarf auch rechts und links neben dem ListViewElement Platz hinzufügen .


3
Ich wollte einen linken / rechten Rand, also war Ihre Antwort hilfreich für mich, aber ich mag die Idee nicht, ein anderes Layout nur für
Randzwecke zu verpacken

Es gibt ein paar Möglichkeiten ... und das ist die schlechte in Bezug auf die Layoutleistung ... versuchen Sie, an Listen mit zehn (oder Hunderten) von Elementen zu denken :)
andrea.rinaldi

@ andrea.spot Es wäre nicht wichtig für Listen mit zehn oder Hunderten von Elementen, es sei denn, so viele Elemente waren gleichzeitig auf dem Bildschirm sichtbar. ListView verwendet das View-Recycling (wenn Sie Ihren Adapter korrekt implementiert haben).
Ataulm

1
Dies wird nicht funktionieren, wenn die ListView-Elemente einen Hintergrund haben
vovahost

11

Meine Lösung, um mehr Platz hinzuzufügen, aber die horizontale Linie beizubehalten, bestand darin, divider.xmlden res/drawableOrdner hinzuzufügen und die Linienform darin zu definieren:

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>

dann verweise ich in meiner Liste auf meinen Teiler wie folgt:

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

Beachten Sie, dass android:dividerHeight="16.0dp"ich durch Erhöhen und Verringern dieser Höhe im Grunde mehr Polsterung oben und unten an der Trennlinie hinzufüge.

Ich habe diese Seite als Referenz verwendet: http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element


8

Wenn Sie einen Teiler mit Rändern und ohne Dehnung anzeigen möchten, verwenden Sie InsetDrawable (Größe muss in einem Format vorliegen, über das @Nik Reiman gesprochen hat):

Listenansicht:

<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

Sie können verwenden:

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

Beispiel:

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

Das Kombinieren von Null mit Listenelement-Layout erzeugt den besten Effekt
Prof

6

Für meine Bewerbung habe ich so gemacht

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

</ListView>

Nur set the divider to nullund dem Teiler Höhe zu geben, hat für mich getan.

Beispiel:

android:divider="@null"

oder

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

und das ist Ergebnis

Geben Sie hier die Bildbeschreibung ein


Ich denke, besser ist android:divider="@android:color/transparent".
CoolMind

5

Mir ist klar, dass bereits eine Antwort ausgewählt wurde, aber ich wollte nur mitteilen, was letztendlich für mich funktioniert hat, als ich auf dieses Problem gestoßen bin.

Ich hatte eine Listenansicht, in der jeder Eintrag in der Listenansicht durch ein eigenes Layout definiert wurde, ähnlich dem, was Sammy in seiner Frage gepostet hat. Ich habe versucht, die Höhe des Teilers zu ändern, aber das sah selbst mit einem unsichtbaren Teiler nicht allzu hübsch aus. Nach einigen Experimenten habe ich einfach ein android:paddingBottom="5dip"zum letzten TextView-Layoutelement in der XML-Datei hinzugefügt , das einzelne listView-Einträge definiert.

Dies gab mir genau das, was ich mit dem Einsatz von erreichen wollte android:layout_marginBottom. Ich fand, dass diese Lösung ein ästhetisch ansprechenderes Ergebnis liefert als der Versuch, die Teilerhöhe zu erhöhen.


4

Anstatt einen Rand anzugeben, sollten Sie eine Polsterung angeben:

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

ODER

<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

Die einfachste Lösung mit dem vorhandenen Code von OP (Listenelemente sind bereits aufgefüllt) besteht darin, folgenden Code hinzuzufügen:

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

Diese SO-Antwort hat mir geholfen.

Hinweis: Auf älteren Plattformen tritt möglicherweise zu früh ein Fehler beim Recycling von Listenelementen auf, wie hier gefragt wurde .


1
Sie können divider auf null und dividerHeight auf einen beliebigen Wert setzen.
Andrew Gallasch

1
@ Andy Ich denke, es wird auch die Polsterung zwischen Elementen entfernen. Das wird das Problem schaffen, das das OP lösen wollte.
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>

und gesetzt paddingTop, paddingBottomund dividerHeightauf den gleichen Wert gleichen Abstand zwischen allen Elementen und Raum am oberen und unteren Ende der Liste zu erhalten.

Ich habe festgelegt clipToPadding, falsedass die Ansichten in diesem gepolsterten Bereich gezeichnet werden sollen.

Ich habe festgelegt divider, @nullum die Zeilen zwischen Listenelementen zu entfernen.


2

Eine weitere Möglichkeit, den Abstand zwischen den Listenelementen zu vergrößern, besteht darin, dass Sie Ihrem Adaptercode eine leere Ansicht hinzufügen, indem Sie dem Attribut layout_height den gewünschten Abstand zuweisen. Zum Beispiel, um den unteren Abstand zwischen Ihren Listenelementen zu vergrößern, fügen Sie diese Dummy-Ansicht (leere Ansicht) am Ende Ihrer Listenelemente hinzu.

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

Dies ergibt also einen unteren Abstand von 15 dp zwischen Listenansichtselementen. Sie können dies direkt hinzufügen, wenn das übergeordnete Layout LinearLayout und die Ausrichtung vertikal ist, oder geeignete Schritte für ein anderes Layout ausführen. Hoffe das hilft :-)


2

Sie müssen nur den Hintergrund des Listenteilers transparent machen und die Höhe entsprechend Ihrer benötigten Lücke einstellen.

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

1

Ich habe eine nicht so gute Lösung für den Fall gefunden, dass Sie eine HorizontalListView verwenden, da Teiler nicht damit zu funktionieren scheinen, aber ich denke, dass dies für die häufigere ListView in beide Richtungen funktioniert.

Einfach hinzufügen:

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

In der untersten Ansicht des Layouts, das Sie in der Adapterklasse aufblasen, wird ein Abstand zwischen Elementen erstellt


1

Um den Abstand zwischen den Ansichten in einer Listenansicht zu bestimmen, verwenden Sie bitte das Auffüllen Ihrer aufgeblasenen Ansichten.

Sie können android:paddingBottom="(number)dp"&& android:paddingTop="(number)dp"für Ihre Ansicht oder für Ansichten verwenden, die Sie in Ihrer Listenansicht aufblasen.

Die Trennlösung ist nur eine Lösung, denn eines Tages, wenn Sie eine Trennfarbe verwenden möchten (im Moment ist sie transparent), werden Sie feststellen, dass die Trennlinie gestreckt wurde.


1

Viele dieser Lösungen funktionieren. Wenn Sie jedoch nur den Rand zwischen Elementen festlegen möchten, besteht die einfachste Methode, die ich mir ausgedacht habe, darin, Ihren Artikel - in Ihrem Fall die CheckedTextView - in ein LinearLayout zu verpacken und Ihre Randformatierung für den Artikel darin einzufügen. nicht das Root-Layout. Stellen Sie sicher, dass Sie diesem Wrapping-Layout eine ID geben und diese zusammen mit Ihrer CheckedTextView in Ihrem Adapter erstellen.

Das ist es. Tatsächlich instanziieren Sie den Rand auf Artikelebene für die ListView. Weil die ListView kein Elementlayout kennt - nur Ihr Adapter. Dadurch wird im Wesentlichen der Teil des Elementlayouts aufgeblasen, der zuvor ignoriert wurde.


0

Auf diese Weise können Sie die Teilerhöhe hinzufügen.

 getListView().setDividerHeight(10)

Wenn Sie eine benutzerdefinierte Ansicht hinzufügen möchten, können Sie eine kleine Ansicht im Listenlayout der listView-Elemente selbst hinzufügen.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.