Jak ustawić odstęp między listView Items w Androidzie

371

Próbowałem użyć marginBottom na listView, aby zrobić miejsce między listView Item, ale nadal elementy są połączone.

Czy to w ogóle możliwe? Jeśli tak, czy istnieje jakiś konkretny sposób?

Mój kod jest poniżej

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

Mój niestandardowy element listy:

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

Jak w tym przypadku mogę wprowadzić odstępy między elementami listy?

Sammy
źródło

Odpowiedzi:

829

@Asahi prawie uderzyło mnie w głowę, ale chciałem tylko dodać trochę XML dla każdego, kto może unosić się tutaj później przez 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"/>

Z jakiegoś powodu wartości takie jak „10”, „10.0” i „10sp” są odrzucane przez Androida dla tej dividerHeightwartości. Potrzebuje liczby zmiennoprzecinkowej i jednostki, takiej jak „10,0sp”. Jak zauważa @ Goofyahead, dla tej wartości można również użyć pikseli niezależnych od wyświetlania (tj. „10dp”).

Nik Reiman
źródło
24
To nie pomaga, jeśli chcesz również pokazać dzielnik bez rozciągania go
Sojurn
4
FYI - można to zrobić za pomocą kodu - getListView (). SetDividerHeight (10)
AnhSirk Dasarp
2
lub android: divider = "@ null"
kevin
@Sojurn Wypróbowałbym 9-łatkę, gdybym potrzebował czegoś takiego.
Sufian
@Sojurn sprawdź moją odpowiedź . Dodaje wypełnienie, ale nie rozciąga przekładki.
Sufian
60

Być może dividerlub dividerHeightwłasność ListViewmoże rozwiązać problem.

Asahi
źródło
43

Chociaż rozwiązanie Nik Reimana DOES działa, uważam, że nie jest to optymalne rozwiązanie dla tego, co chciałem zrobić. Użycie dzielnika do ustawienia marginesów miało problem polegający na tym, że dzielnik nie będzie już widoczny, więc nie można użyć go do pokazania wyraźnej granicy między przedmiotami. Ponadto nie dodaje więcej „klikalnego obszaru” do każdego elementu, więc jeśli chcesz, aby Twoje elementy były klikalne, a Twoje przedmioty są cienkie, bardzo trudno będzie komukolwiek kliknąć element, ponieważ wysokość dodana przez dzielnik nie jest część przedmiotu.

Na szczęście znalazłem lepsze rozwiązanie, które pozwala zarówno wyświetlać przekładki, jak i dopasowywać wysokość każdego elementu przy użyciu nie marginesów, ale wypełnienia. Oto przykład:

ListView

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

Element listy

<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>
idunnololz
źródło
Rzeczywiście lepsze rozwiązanie. Dzięki.
Bigyellowbee
17

Powinieneś owinąć swój ListViewprzedmiot (powiedzmy your_listview_item) w inny układ, np. LinearLayoutI dodać margines do 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>

W ten sposób możesz również dodać miejsce, jeśli to konieczne, po prawej i lewej stronie ListViewprzedmiotu.

Vasu
źródło
3
chciałem lewy / prawy margines, więc twoja odpowiedź była dla mnie pomocna, ale nie podoba mi się pomysł, aby po prostu
zawinąć
Jest kilka sposobów ... i to jest zły pod względem wydajności układania .. spróbuj pomyśleć o listach z dziesiątkami (lub setkami) elementów :)
andrea.rinaldi
@ andrea.spot nie miałoby to znaczenia dla list zawierających dziesiątki lub setki elementów, chyba że tyle było elementów widocznych na ekranie jednocześnie. ListView używa widoku recyklingu (jeśli poprawnie zaimplementowałeś adapter).
ataulm
1
To nie zadziała, jeśli elementy ListView będą miały tło
vovahost
11

Moim rozwiązaniem, aby dodać więcej miejsca, ale zachować poziomą linię, było dodanie divider.xmldo res/drawablefolderu i zdefiniowanie kształtu linii w środku:

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>

następnie na mojej liście odnoszę się do mojego dzielnika w następujący sposób:

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

zwróć uwagę, że android:dividerHeight="16.0dp"zwiększając i zmniejszając tę ​​wysokość, po prostu dodałem więcej wypełnienia na górze i na dole linii podziału.

Użyłem tej strony w celach informacyjnych: http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element

kamelnyc
źródło
8

Jeśli chcesz pokazać dzielnik z marginesami i bez rozciągania go - użyj InsetDrawable (rozmiar musi być w formacie, o którym powiedział @Nik Reiman):

Widok listy:

<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>
Król Lew
źródło
7

Możesz użyć:

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

przykład:

<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"/>
mspapant
źródło
Połączenie wartości null z układem elementów listy daje najlepszy efekt
prof.
6

W przypadku mojej aplikacji zrobiłem to w ten sposób

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

</ListView>

właśnie set the divider to nulli zapewnienie wysokości dzielnika zrobiło dla mnie.

Przykład:

android:divider="@null"

lub

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

i to jest wynik

wprowadź opis zdjęcia tutaj

Sagar Pawar
źródło
Myślę, że lepiej jest android:divider="@android:color/transparent".
CoolMind,
5

Zdaję sobie sprawę, że odpowiedź została już wybrana, ale chciałem tylko podzielić się tym, co skończyło się dla mnie, gdy natknąłem się na ten problem.

Miałem listView, w którym każda pozycja na listView była zdefiniowana przez własny układ, podobny do tego, co Sammy napisał w swoim pytaniu. Wypróbowałem sugerowane podejście polegające na zmianie wysokości rozdzielacza, ale nie wyglądało to zbyt ładnie, nawet z niewidzialną przekładką. Po kilku eksperymentach po prostu dodałem android:paddingBottom="5dip"do ostatniego elementu układu TextView w pliku XML, który definiuje poszczególne wpisy listView.

To dało mi dokładnie to, co próbowałem osiągnąć za pomocą android:layout_marginBottom. Znalazłem to rozwiązanie, aby uzyskać bardziej przyjemny estetycznie wynik niż próba zwiększenia wysokości rozdzielacza.

Tim Severeijns
źródło
4

Zamiast dawać margines, powinieneś podać padding:

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

LUB

<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>
Rahul Raina
źródło
3

Najprostszym rozwiązaniem z istniejącym kodem OP (elementy listy mają już dopełnienie) jest dodanie następującego kodu:

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

Ta SO odpowiedź pomogła mi.

Uwaga: Na starszych platformach możesz napotkać błąd zbyt szybkiego recyklingu elementu listy, o co tutaj proszono .

Sufian
źródło
1
możesz ustawić dzielnik na zero i ustawić dzielnikWysokość na co tylko chcesz.
Andrew Gallasch,
1
@Andy, myślę, że usunie również dopełnienie między elementami. Co stworzy problem, który PO chciał rozwiązać.
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>

i ustaw paddingTop, paddingBottomi dividerHeightna tę samą wartość, aby uzyskać równe odstępy między wszystkimi elementami i przestrzeni na górze i na dole listy.

Ustawić clipToPaddingaby falsepozwolić widoki być sporządzone w tym wyściełanej powierzchni.

Ustawić divideraby @nullusunąć linie między elementami listy.

Andrew Gallasch
źródło
2

Kolejnym sposobem na zwiększenie odstępów między elementami listy jest dodanie pustego widoku do kodu adaptera poprzez podanie wymaganego odstępu atrybutu layout_height. Na przykład w celu zwiększenia odstępów między elementami listy dodaj ten widok fikcyjny (pusty widok) na końcu elementów listy.

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

Zapewni to odstęp 15 dna między elementami widoku listy. Możesz to bezpośrednio dodać, jeśli układ nadrzędny ma układ liniowy, a orientacja jest pionowa, lub wykonaj odpowiednie kroki dla innego układu. Mam nadzieję że to pomoże :-)

FingerSmith
źródło
2

musisz tylko uczynić tło przezroczystym dla dzielnika listy i ustawić wysokość zgodnie z potrzebną przerwą.

<ListView 
         android:id="@+id/custom_list"
         android:layout_height="match_parent"
         android:layout_width="match_parent"
         android:divider="#00ffffff"
         android:dividerHeight="20dp"/>
pawan kumar
źródło
1

Znalazłem niezbyt dobre rozwiązanie w przypadku, gdy używasz HorizontalListView, ponieważ dzielniki nie wydają się z nim współpracować, ale myślę, że zadziała w obu przypadkach dla bardziej powszechnego ListView.

Właśnie dodając:

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

w najniższym widoku układu, który nadmuchujesz w klasie adaptera, utworzysz odstępy między elementami

Juliagu
źródło
1

Aby zapewnić odstępy między widokami w widoku listy, użyj dopełnienia w widokach nadmuchiwanych.

Możesz używać android:paddingBottom="(number)dp"&& android:paddingTop="(number)dp"na swoim widoku lub widokach, które zawyżasz w widoku listy.

Rozwiązanie dzielnika jest tylko naprawą, ponieważ pewnego dnia, gdy będziesz chciał użyć koloru dzielnika (teraz jest przezroczysty), zobaczysz, że linia podziału została rozciągnięta.

Avi Levin
źródło
1

Wiele z tych rozwiązań działa. Jeśli jednak wszystko, czego chcesz, to móc ustawić margines między elementami, najprostszą metodą, jaką wymyśliłem, jest zawinięcie elementu - w twoim przypadku CheckedTextView - w LinearLayout i umieszczenie w nim formatowania marginesu dla elementu, nie układ root. Pamiętaj, aby nadać układowi zawijania identyfikator i utworzyć go wraz z CheckedTextView w adapterze.

Otóż ​​to. W efekcie tworzysz margines na poziomie elementu dla ListView. Ponieważ ListView nie wie o żadnym układzie elementów - tylko twój adapter. Zasadniczo to zawyża część układu przedmiotu, która była wcześniej ignorowana.

jwehrle
źródło
0

Pomoże to dodać wysokość dzielnika.

 getListView().setDividerHeight(10)

Jeśli chcesz dodać widok niestandardowy, możesz dodać mały widok do samego układu listy widoku.

Akanshi Srivastava
źródło