Cara mengatur ruang antara Item listView di Android


371

Saya mencoba menggunakan marginBottom pada listView untuk membuat ruang antara Item listView, tetapi item tetap terpasang bersama.

Apakah itu mungkin? Jika ya, apakah ada cara khusus untuk melakukannya?

Kode saya di bawah

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

Item Daftar kustom saya:

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

Bagaimana saya bisa membuat jarak antar item daftar dalam kasus ini?

Jawaban:


829

@ Asahi cukup banyak memukul paku di kepala, tapi saya hanya ingin menambahkan sedikit XML untuk siapa pun yang mungkin mengambang di sini nanti melalui 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"/>

Untuk beberapa alasan, nilai seperti "10", "10.0", dan "10sp" semuanya ditolak oleh Android karena dividerHeightnilainya. Ia menginginkan nomor dan unit floating point, seperti "10.0sp". Sebagai catatan @ Goofyahead, Anda juga dapat menggunakan piksel tampilan-independen untuk nilai ini (yaitu, "10dp").


24
Ini tidak membantu jika Anda juga ingin menunjukkan pembagi tanpa merentangkannya
Sojurn

4
FYI - dapat dilakukan melalui kode - getListView (). SetDividerHeight (10)
AnhSirk Dasarp

2
atau android: divider = "@ null"
kevin

@Sojurn Saya sudah mencoba 9-patch jika saya perlu sesuatu seperti itu.
Sufian

@Sojurn memeriksa jawaban saya . Ini menambahkan padding tetapi tidak meregangkan pembagi.
Sufian


43

Meskipun solusi oleh Nik Reiman TIDAK berhasil, saya menemukan itu bukan solusi optimal untuk apa yang ingin saya lakukan. Menggunakan pembagi untuk mengatur margin memiliki masalah pembagi tidak lagi terlihat sehingga Anda tidak dapat menggunakannya untuk menunjukkan batas yang jelas antara item Anda. Juga, itu tidak menambahkan lebih banyak "area yang dapat diklik" untuk setiap item sehingga jika Anda ingin membuat item Anda dapat diklik dan item Anda tipis, akan sangat sulit bagi siapa pun untuk mengklik item karena ketinggian yang ditambahkan oleh pembagi tidak bagian dari suatu barang.

Untungnya saya menemukan solusi yang lebih baik yang memungkinkan Anda untuk menunjukkan pembagi dan memungkinkan Anda untuk menyesuaikan ketinggian setiap item menggunakan bukan margin tetapi padding. Berikut ini sebuah contoh:

ListView

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

Daftar barang

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

Memang solusi yang lebih baik. Terima kasih.
Bigyellowbee

17

Anda harus membungkus ListViewitem Anda (katakanlah your_listview_item) di beberapa tata letak lain misalnya LinearLayoutdan menambahkan margin ke 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>

Dengan cara ini Anda juga dapat menambahkan ruang, jika perlu, di kanan dan kiri ListViewitem.


3
saya ingin margin kiri / kanan jadi jawaban Anda sangat membantu bagi saya, tetapi saya tidak suka gagasan hanya membungkus tata letak lain hanya untuk tujuan margin
2cupsOfTech

Ada beberapa cara .. dan itu yang buruk dalam hal tata letak kinerja .. cobalah untuk berpikir di daftar dengan puluhan (atau ratusan) item :)
andrea.rinaldi

@ andrea.spot tidak masalah untuk daftar dengan puluhan atau ratusan item kecuali itu berapa banyak item yang terlihat di layar sekaligus. ListView menggunakan daur ulang tampilan (jika Anda telah menerapkan adaptor Anda dengan benar).
ataulm

1
Ini tidak akan berfungsi jika item ListView akan memiliki latar belakang
vovahost

11

Solusi saya untuk menambah lebih banyak ruang tetapi tetap menggunakan garis horizontal adalah menambahkan divider.xmldi res/drawablefolder dan menentukan bentuk garis di dalamnya:

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>

kemudian dalam daftar saya, saya merujuk pembagi saya sebagai berikut:

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

perhatikan android:dividerHeight="16.0dp"dengan menambah dan mengurangi ketinggian ini Saya pada dasarnya menambahkan lebih banyak bantalan di bagian atas dan bawah garis pembagi.

Saya menggunakan halaman ini untuk referensi: http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element


8

Jika Anda ingin menampilkan pembagi dengan margin dan tanpa merentangkannya - gunakan InsetDrawable (ukuran harus dalam format, kira-kira mengatakan @Nik Reiman):

ListView:

<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

Kamu bisa menggunakan:

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

contoh:

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

Menggabungkan nol dengan tata letak item daftar menghasilkan efek terbaik
Prof

6

Untuk aplikasi saya, saya telah melakukan ini

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

</ListView>

adil set the divider to nulldan memberikan tinggi bagi pembagi lakukan untuk saya.

Contoh:

android:divider="@null"

atau

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

dan ini adalah hasilnya

masukkan deskripsi gambar di sini


Saya pikir, lebih baik android:divider="@android:color/transparent".
CoolMind

5

Saya menyadari bahwa jawaban sudah dipilih, tetapi saya hanya ingin membagikan apa yang akhirnya berhasil bagi saya ketika saya mengalami masalah ini.

Saya memiliki listView di mana setiap entri dalam listView ditentukan oleh tata letaknya sendiri, mirip dengan apa yang diposting Sammy dalam pertanyaannya. Saya mencoba pendekatan yang disarankan untuk mengubah tinggi pembagi, tetapi itu tidak berakhir tampak terlalu cantik, bahkan dengan pembagi tidak terlihat. Setelah beberapa percobaan, saya cukup menambahkan sebuah android:paddingBottom="5dip"ke elemen tata letak TextView terakhir dalam file XML yang mendefinisikan entri listView individu.

Ini akhirnya memberi saya apa yang saya coba capai melalui penggunaan android:layout_marginBottom. Saya menemukan solusi ini untuk menghasilkan hasil yang lebih estetis daripada mencoba meningkatkan ketinggian pembagi.


4

Alih-alih memberi margin, Anda harus memberi 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>

ATAU

<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

Solusi paling sederhana dengan kode OP yang ada (daftar item sudah memiliki padding) adalah menambahkan kode berikut:

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

Jawaban SO ini membantu saya.

Catatan: Anda mungkin menghadapi bug daur ulang item daftar terlalu cepat pada platform lama, seperti yang telah ditanyakan di sini .


1
Anda dapat mengatur pembagi menjadi nol dan mengatur dividerHeight ke apa pun yang Anda suka.
Andrew Gallasch

1
@Andy saya pikir itu juga akan menghapus bantalan antar item. Yang akan menciptakan masalah yang ingin dipecahkan oleh OP ..
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>

dan atur paddingTop, paddingBottomdan dividerHeightdengan nilai yang sama untuk mendapatkan jarak yang sama antara semua elemen dan ruang di bagian atas dan bawah daftar.

Saya mengatur clipToPaddinguntuk falsemembiarkan pandangan diambil di daerah empuk ini.

Saya mengatur divideruntuk @nullmenghapus garis antara elemen daftar.


2

Juga satu cara lagi untuk meningkatkan jarak antara item daftar adalah bahwa Anda menambahkan tampilan kosong ke kode adaptor Anda dengan menyediakan atribut layout_height dengan spasi yang Anda butuhkan. Untuk misalnya untuk menambah jarak bawah di antara item daftar Anda, tambahkan tampilan dummy ini (tampilan kosong) ke akhir item daftar Anda.

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

Jadi ini akan memberikan jarak 15 dp antara item tampilan daftar. Anda dapat langsung menambahkan ini jika tata letak induk adalah LinearLayout dan orientasi vertikal atau mengambil langkah yang sesuai untuk tata letak lainnya. Semoga ini membantu :-)


2

Anda hanya perlu membuat latar belakang transparan pembagi daftar dan membuat ketinggian sesuai dengan kesenjangan yang dibutuhkan.

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

1

Saya menemukan solusi yang tidak terlalu baik untuk ini jika Anda menggunakan HorizontalListView, karena pembagi tampaknya tidak bekerja dengan itu, tapi saya pikir itu akan berfungsi baik untuk ListView yang lebih umum.

Hanya menambahkan:

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

dalam tampilan Layout yang Anda kembangkan di kelas adaptor akan menciptakan jarak antar item


1

Untuk memberi jarak antar tampilan di dalam listView, gunakan padding pada tampilan inflasi Anda.

Anda dapat menggunakan android:paddingBottom="(number)dp"&& android:paddingTop="(number)dp"pada tampilan Anda atau tampilan yang Anda kembangkan di dalam tampilan daftar Anda.

Solusi pembagi hanyalah perbaikan, karena suatu hari, ketika Anda ingin menggunakan warna pembagi (sekarang ini transparan) Anda akan melihat bahwa garis pembagi telah diregangkan.


1

Banyak dari solusi ini bekerja. Namun, jika semua yang Anda inginkan adalah dapat mengatur margin antara item, metode paling sederhana yang saya buat adalah dengan membungkus item Anda - dalam kasus Anda CheckedTextView - dalam LinearLayout dan menempatkan pemformatan margin Anda untuk item di dalamnya, bukan tata letak root. Pastikan untuk memberikan layout pembungkus ini id dan buat bersama dengan CheckedTextView Anda di adaptor Anda.

Itu dia. Akibatnya, Anda membuat margin pada level item untuk ListView. Karena ListView tidak tahu tentang tata letak item - hanya adaptor Anda yang tahu. Ini pada dasarnya mengembang bagian tata letak item yang sebelumnya diabaikan.


0

Ini akan membantu Anda menambah tinggi pembagi.

 getListView().setDividerHeight(10)

Jika Anda ingin menambahkan tampilan kustom, Anda dapat menambahkan tampilan kecil di tata letak item listView itu sendiri.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.