Como definir espaço entre os itens listView no Android

371

Tentei usar marginBottom no listView para criar espaço entre o item listView, mas ainda assim os itens estão anexados.

Isso é possível? Se sim, existe uma maneira específica de fazer isso?

Meu código está abaixo

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

Meu item personalizado da lista:

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

Como posso espaçar os itens da lista nesse caso?

Sammy
fonte

Respostas:

829

@Asahi praticamente acertou em cheio na cabeça, mas eu só queria adicionar um pouco de XML para quem talvez flutue aqui mais tarde via 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 algum motivo, valores como "10", "10.0" e "10sp" são todos rejeitados pelo Android pelo dividerHeightvalor. Ele quer um número de ponto flutuante e uma unidade, como "10.0sp". Como observa o @Goofyahead, você também pode usar pixels independentes da exibição para esse valor (por exemplo, "10dp").

Nik Reiman
fonte
24
Isso não ajuda se você também quiser mostrar um divisor sem esticá-lo
sojurn
4
FYI - pode ser feito através de código - getListView () setDividerHeight (10).
AnhSirk Dasarp
2
ou android: divider = "@ null"
kevin
@ Smojurn, eu teria tentado um patch 9, se precisasse de algo assim.
Sufian
@Sojurn verifique minha resposta . Acrescenta preenchimento, mas não estica o divisor.
Sufian
60

Talvez dividerou dividerHeightpropriedade do ListViewpode resolver seu problema.

Asahi
fonte
43

Embora a solução de Nik Reiman funcione, achei que não era uma solução ideal para o que queria fazer. O uso do divisor para definir as margens teve o problema de que o divisor não será mais visível, portanto você não pode usá-lo para mostrar um limite claro entre seus itens. Além disso, ele não adiciona mais "área clicável" a cada item. Portanto, se você deseja tornar seus itens clicáveis ​​e finos, será muito difícil alguém clicar em um item, pois a altura adicionada pelo divisor não é parte de um item.

Felizmente, encontrei uma solução melhor que permite mostrar divisórias e ajustar a altura de cada item usando não margens, mas preenchimento. Aqui está um exemplo:

Exibição de 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>
idunnololz
fonte
Na verdade, uma solução melhor. Obrigado.
Bigyellowbee
17

Você deve envolver seu ListViewitem (digamos your_listview_item) em algum outro layout, por exemplo, LinearLayoute adicionar margem 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>

Dessa forma, você também pode adicionar espaço, se necessário, à direita e esquerda do ListViewitem.

Vasu
fonte
3
eu queria margem esquerda / direita para que a sua resposta foi útil para mim, mas eu não gosto da idéia de apenas envolvendo outro layout apenas para fins de margem
2cupsOfTech
Existem algumas maneiras .. e isso é o mau em termos de layouting desempenho .. tentar pensar em listas com dezenas (ou centenas) de itens :)
andrea.rinaldi
@ andrea.spot não importaria para listas com dezenas ou centenas de itens, a menos que houvesse quantos itens estavam visíveis na tela ao mesmo tempo. O ListView usa a reciclagem de exibição (se você implementou seu adaptador corretamente).
ataulm
11
Isso não funcionará se os itens do ListView tiverem um plano de fundo
vovahost
11

Minha solução para adicionar mais espaço, mas manter a linha horizontal, foi adicionar divider.xmla res/drawablepasta e definir o formato da linha dentro:

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>

então, na minha lista, refiro meu divisor da seguinte maneira:

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

note que android:dividerHeight="16.0dp", aumentando e diminuindo essa altura, basicamente adiciono mais preenchimento na parte superior e inferior da linha divisória.

Usei esta página para referência: http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element

kamelnyc
fonte
8

Se você quiser mostrar um divisor com margens e sem esticá-lo - use InsetDrawable (o tamanho deve estar em um formato, sobre o qual disse @Nik Reiman):

Exibição de 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>
Rei Leão
fonte
7

Você pode usar:

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

exemplo:

<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
fonte
Combinar nulo com o layout do item de lista produz o melhor efeito
Prof
6

Para minha aplicação, eu fiz dessa maneira

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

</ListView>

apenas set the divider to nulle fornecer altura ao divisor fez por mim.

Exemplo:

android:divider="@null"

ou

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

e isso é resultado

insira a descrição da imagem aqui

Sagar Pawar
fonte
Eu acho que melhor é android:divider="@android:color/transparent".
CoolMind 04/08
5

Percebo que uma resposta já foi selecionada, mas eu só queria compartilhar o que acabou funcionando para mim quando me deparei com esse problema.

Eu tinha um listView em que cada entrada no listView era definida por seu próprio layout, semelhante ao que Sammy postou em sua pergunta. Tentei a abordagem sugerida para alterar a altura do divisor, mas isso não parecia muito bonito, mesmo com um divisor invisível. Após algumas experiências, simplesmente adicionei um android:paddingBottom="5dip"ao último elemento de layout do TextView no arquivo XML que define entradas individuais do listView.

Isso acabou me dando exatamente o que eu estava tentando alcançar através do uso de android:layout_marginBottom. Encontrei esta solução para produzir um resultado mais esteticamente agradável do que tentar aumentar a altura do divisor.

Tim Severeijns
fonte
4

Em vez de dar margem, você deve dar preenchimento:

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

OU

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

A solução mais simples com o código existente do OP (os itens da lista já possuem preenchimento) é adicionar o seguinte código:

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

Esta resposta SO me ajudou.

Nota: Você pode enfrentar um erro na reciclagem de itens da lista muito cedo em plataformas mais antigas, conforme solicitado aqui .

Sufiano
fonte
11
você pode definir divider como null e dividerHeight como desejar.
Andrew Gallasch
11
@ Andy Eu acho que também irá remover o preenchimento entre os itens. O que criará o problema que o OP queria resolver. #
Suff
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 definir paddingTop, paddingBottome dividerHeightcom o mesmo valor para obter espaçamento igual entre todos os elementos e espaço na parte superior e inferior da lista.

Defino clipToPaddingpara falsepermitir que as vistas sejam desenhadas nesta área acolchoada.

Defino dividercomo @nullremover as linhas entre os elementos da lista.

Andrew Gallasch
fonte
2

Além disso, mais uma maneira de aumentar o espaçamento entre os itens da lista é incluir uma visualização vazia no código do adaptador, fornecendo ao atributo layout_height o espaçamento necessário. Por exemplo, para aumentar o espaçamento inferior entre os itens da sua lista, adicione esta exibição fictícia (exibição vazia) ao final dos itens da lista.

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

Portanto, isso fornecerá um espaçamento inferior de 15 dp entre os itens da exibição em lista. Você pode adicioná-lo diretamente se o layout principal for LinearLayout e a orientação vertical, ou seguir as etapas apropriadas para outro layout. Espero que isto ajude :-)

FingerSmith
fonte
2

você só precisa tornar o plano de fundo transparente do divisor da lista e aumentar a altura de acordo com o espaço necessário.

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

Encontrei uma solução não tão boa para isso, caso você esteja usando um HorizontalListView, pois os divisores não parecem funcionar com ele, mas acho que funcionará de qualquer maneira para o ListView mais comum.

Apenas adicionando:

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

na vista inferior do layout que você inflar na classe do adaptador criará espaçamento entre os itens

Juliagu
fonte
1

Para fornecer espaçamento entre as visualizações dentro de um listView, use preenchimento nas visualizações infladas.

Você pode usar android:paddingBottom="(number)dp"&& android:paddingTop="(number)dp"na sua visualização ou visualizações que você inflar dentro da sua lista.

A solução divisória é apenas uma correção, porque um dia, quando você desejar usar uma cor divisória (agora é transparente), verá que a linha divisória foi esticada.

Avi Levin
fonte
1

Muitas dessas soluções funcionam. No entanto, se tudo o que você deseja é poder definir a margem entre os itens, o método mais simples que eu inventei é agrupar seu item - no seu caso, o CheckedTextView - em um LinearLayout e colocar a formatação da margem para o item, não o layout raiz. Certifique-se de fornecer um ID a esse layout de empacotamento e criá-lo junto com o CheckedTextView no seu adaptador.

É isso aí. Com efeito, você está instanciando a margem no nível do item para o ListView. Como o ListView não conhece nenhum layout de item - apenas seu adaptador. Isso basicamente infla a parte do layout do item que estava sendo ignorado antes.

jwehrle
fonte
0

Isso ajudará você a adicionar a altura do divisor.

 getListView().setDividerHeight(10)

Se você deseja adicionar uma exibição personalizada, é possível adicionar uma pequena exibição no próprio layout do item listView.

Akanshi Srivastava
fonte