Cómo configurar el espacio entre elementos ListView en Android


371

Intenté usar marginBottom en listView para hacer espacio entre el elemento listView, pero aún así los elementos están unidos.

¿Es posible? En caso afirmativo, ¿hay una forma específica de hacerlo?

Mi codigo esta abajo

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

Mi elemento de lista personalizado:

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

¿Cómo puedo hacer un espacio entre los elementos de la lista en este caso?

Respuestas:


829

@Asahi prácticamente dio en el clavo, pero solo quería agregar un poco de XML para cualquiera que pueda flotar aquí más tarde a través de 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"/>

Por alguna razón, los valores como "10", "10.0" y "10sp" son rechazados por Android por el dividerHeightvalor. Quiere un número de coma flotante y una unidad, como "10.0sp". Como señala @Goofyahead, también puede usar píxeles independientes de la pantalla para este valor (es decir, "10dp").


24
Esto no ayuda si también quieres mostrar un divisor sin estirarlo
Sojurn

44
FYI - se puede hacer a través del código - getListView (). SetDividerHeight (10)
AnhSirk Dasarp

2
o android: divider = "@ null"
kevin

@ Sojurn Hubiera probado un parche 9 si hubiera necesitado algo así.
Sufian

@Sojurn comprueba mi respuesta . Agrega relleno pero no estira el divisor.
Sufian


43

Aunque la solución de Nik Reiman sí funciona, descubrí que no es una solución óptima para lo que quería hacer. El uso del divisor para establecer los márgenes tuvo el problema de que el divisor ya no será visible, por lo que no puede usarlo para mostrar un límite claro entre sus elementos. Además, no agrega más "área en la que se puede hacer clic" a cada elemento, por lo tanto, si desea hacer que sus elementos sean clicables y sus elementos sean delgados, será muy difícil para cualquiera hacer clic en un elemento ya que la altura agregada por el divisor no es parte de un artículo.

Afortunadamente, encontré una mejor solución que le permite mostrar los divisores y le permite ajustar la altura de cada elemento utilizando no márgenes sino relleno. Aquí hay un ejemplo:

Vista de la lista

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

De hecho, una mejor solución. Gracias.
Bigyellowbee

17

Debe envolver su ListViewartículo (por ejemplo your_listview_item) en algún otro diseño, por ejemplo, LinearLayouty agregar margen 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>

De esta manera, también puede agregar espacio, si es necesario, a la derecha e izquierda del ListViewelemento.


3
quería margen izquierda / derecha para que su respuesta fue útil para mí, pero no me gusta la idea de envolver otra disposición sólo para fines de margen
2cupsOfTech

Hay algunas maneras ... y esa es la mala en términos de rendimiento de diseño ... intente pensar en listas con decenas (o cientos) de elementos :)
andrea.rinaldi

@ andrea.spot no importaría para las listas con decenas o cientos de elementos a menos que esa sea la cantidad de elementos visibles en la pantalla a la vez. ListView utiliza el reciclaje de vistas (si ha implementado su adaptador correctamente).
ataulm

1
Esto no funcionará si los elementos ListView tendrán un fondo
vovahost

11

Mi solución para agregar más espacio pero mantener la línea horizontal fue agregar divider.xmlen la res/drawablecarpeta y definir la forma de la línea en el interior:

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>

entonces en mi lista hago referencia a mi divisor de la siguiente manera:

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

Observe que al android:dividerHeight="16.0dp"aumentar y disminuir esta altura, básicamente estoy agregando más relleno en la parte superior e inferior de la línea divisoria.

Usé esta página como referencia: http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element


8

Si desea mostrar un divisor con márgenes y sin estirarlo, use InsetDrawable (el tamaño debe estar en un formato, sobre el cual dijo @Nik Reiman):

Vista de la lista:

<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

Puedes usar:

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

ejemplo:

<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 combinación de diseño nulo con elemento de lista produce el mejor efecto
Prof

6

Para mi aplicación, lo he hecho de esta manera.

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

</ListView>

justo set the divider to nully proporcionar altura al divisor lo hizo por mí.

Ejemplo:

android:divider="@null"

o

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

y este es el resultado

ingrese la descripción de la imagen aquí


Creo que mejor es android:divider="@android:color/transparent".
CoolMind

5

Me doy cuenta de que ya se ha seleccionado una respuesta, pero solo quería compartir lo que terminó funcionando para mí cuando me encontré con este problema.

Tenía un listView donde cada entrada en el listView estaba definida por su propio diseño, similar a lo que Sammy publicó en su pregunta. Intenté el enfoque sugerido de cambiar la altura del divisor, pero eso no terminó siendo demasiado bonito, incluso con un divisor invisible. Después de experimentar un poco, simplemente agregué un android:paddingBottom="5dip"elemento de diseño TextView en el archivo XML que define las entradas individuales de listView.

Esto terminó dándome exactamente lo que estaba tratando de lograr mediante el uso de android:layout_marginBottom. Encontré esta solución para producir un resultado estéticamente más agradable que tratar de aumentar la altura del divisor.


4

En lugar de dar margen, debe dar relleno:

<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 solución más simple con el código existente de OP (los elementos de la lista ya tienen relleno) es agregar el siguiente código:

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

Esta respuesta SO me ayudó.

Nota: Es posible que se encuentre con un error del reciclaje del elemento de la lista demasiado pronto en plataformas más antiguas, como se ha pedido aquí .


1
puede establecer divisor en nulo y establecer divisorHeight a lo que desee.
Andrew Gallasch

1
@Andy Creo que también eliminará el relleno entre los elementos. Lo que creará el problema que el OP quería resolver ..
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>

y establecer paddingTop, paddingBottomy dividerHeightal mismo valor para obtener el mismo espacio entre todos los elementos y el espacio en la parte superior e inferior de la lista.

Me puse clipToPaddinga falsedejar que los puntos de vista pueden extraer en esta zona acolchada.

Configuré dividerpara @nulleliminar las líneas entre los elementos de la lista.


2

También una forma más de aumentar el espacio entre los elementos de la lista es agregar una vista vacía al código del adaptador al proporcionar el atributo layout_height con el espacio que necesita. Por ejemplo, para aumentar el espacio inferior entre los elementos de la lista, agregue esta vista ficticia (vista vacía) al final de los elementos de la lista.

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

Por lo tanto, esto proporcionará un espacio inferior de 15 dp entre los elementos de la vista de lista. Puede agregar esto directamente si el diseño primario es LinearLayout y la orientación es vertical o si toma los pasos apropiados para otro diseño. Espero que esto ayude :-)


2

solo necesita hacer que el fondo sea transparente del divisor de lista y hacer la altura de acuerdo con el espacio necesario.

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

1

Encontré una solución no tan buena para esto en caso de que esté usando un HorizontalListView, ya que los divisores no parecen funcionar con él, pero creo que funcionará de cualquier manera para el ListView más común.

Solo agrego:

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

en la vista inferior del diseño que infla en la clase de adaptador creará espacio entre los elementos


1

Para dar espacio entre las vistas dentro de una vista de lista, use relleno en sus vistas de inflado.

Puede usar android:paddingBottom="(number)dp"&& android:paddingTop="(number)dp"en su vista o vistas que está inflado dentro de su vista de lista.

La solución del divisor es solo una solución, porque algún día, cuando desee usar un color divisor (ahora es transparente) verá que la línea divisoria se ha extendido.


1

Muchas de estas soluciones funcionan. Sin embargo, si todo lo que desea es poder establecer el margen entre los elementos, el método más simple que se me ocurrió es envolver su elemento, en su caso CheckedTextView, en un diseño lineal y poner el formato de margen para el elemento en eso, no el diseño raíz. Asegúrese de asignar un id a este diseño de envoltura y crearlo junto con su CheckedTextView en su adaptador.

Eso es. En efecto, está creando instancias del margen en el nivel de elemento para ListView. Debido a que ListView no conoce ningún diseño de elemento, solo su adaptador sí. Básicamente, esto infla la parte del diseño del elemento que antes se ignoraba.


0

Esto te ayudará a agregar la altura del divisor.

 getListView().setDividerHeight(10)

Si desea agregar una vista personalizada, puede agregar una vista pequeña en el diseño del elemento listView.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.