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?

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”).


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


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>

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.


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


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>

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

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


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.


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>

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 .


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.


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


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

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


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.


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.


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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.