Cách đặt không gian giữa các mục listView trong Android


371

Tôi đã cố gắng sử dụng marginBottom trên listView để tạo khoảng trống giữa listView Item, nhưng các mục vẫn được gắn với nhau.

Nó thậm chí có thể? Nếu có, có một cách cụ thể để làm điều đó?

Mã của tôi ở dưới

<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ục danh sách tùy chỉnh của tôi:

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

Làm thế nào tôi có thể tạo khoảng cách giữa các mục danh sách trong trường hợp này?

Câu trả lời:


829

@Asahi đã đánh vào đầu rất nhiều, nhưng tôi chỉ muốn thêm một chút XML cho bất kỳ ai có thể nổi ở đây sau thông qua 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"/>

Vì một số lý do, tất cả các giá trị như "10", "10.0" và "10sp" đều bị Android từ chối vì dividerHeightgiá trị. Nó muốn một số dấu phẩy động và một đơn vị, chẳng hạn như "10.0sp". Như @Gaggeyead ghi chú, bạn cũng có thể sử dụng các pixel độc lập hiển thị cho giá trị này (nghĩa là "10dp").


24
Điều này không có ích nếu bạn cũng muốn hiển thị một dải phân cách mà không kéo dài nó
Sojurn

4
FYI - có thể được thực hiện thông qua mã - getListView (). SetDividerHeight (10)
AnhSirk Dasarp

2
hoặc android: spliter = "@ null"
kevin

@Sojurn Tôi đã thử bản vá 9 nếu tôi cần một số thứ tương tự.
Sufian

@Sojurn kiểm tra câu trả lời của tôi . Nó thêm phần đệm nhưng không kéo dài dải phân cách.
Sufian


43

Mặc dù giải pháp của Nik Reiman DOES hoạt động, tôi thấy nó không phải là một giải pháp tối ưu cho những gì tôi muốn làm. Sử dụng bộ chia để đặt lề có vấn đề là bộ chia sẽ không còn hiển thị nữa nên bạn không thể sử dụng nó để hiển thị ranh giới rõ ràng giữa các mục của bạn. Ngoài ra, nó không thêm "khu vực có thể nhấp" vào mỗi mục, do đó nếu bạn muốn làm cho các mục của mình có thể nhấp và các mục của bạn mỏng, sẽ rất khó để bất kỳ ai nhấp vào một mục vì chiều cao được thêm bởi dải phân cách một phần của một mục.

May mắn thay, tôi đã tìm thấy một giải pháp tốt hơn cho phép bạn hiển thị các vạch chia và cho phép bạn điều chỉnh chiều cao của từng vật phẩm bằng cách không sử dụng lề nhưng đệm. Đây là một ví dụ:

ListView

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

Quả thực là một giải pháp tốt hơn. Cảm ơn.
Bigyellowbee

17

Bạn nên bọc ListViewmục của bạn (nói your_listview_item) trong một số bố cục khác, ví dụ LinearLayoutvà thêm lề vào 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>

Bằng cách này, bạn cũng có thể thêm không gian, nếu cần, ở bên phải và bên trái của ListViewmục.


3
Tôi muốn lề trái / phải để câu trả lời của bạn hữu ích cho tôi nhưng tôi không thích ý tưởng chỉ gói một bố cục khác cho mục đích lề
2cupsOfTech

Có một vài cách .. và đó là cách tồi về hiệu suất bố trí .. hãy thử suy nghĩ tại các danh sách với hàng chục (hoặc hàng trăm) mục :)
andrea.rinaldi

@ andrea.spot sẽ không thành vấn đề đối với các danh sách có hàng chục hoặc hàng trăm mục trừ khi đó là số lượng mục hiển thị trên màn hình cùng một lúc. ListView sử dụng tái chế chế độ xem (nếu bạn đã triển khai bộ điều hợp chính xác).
ataulm

1
Điều này sẽ không hoạt động nếu các mục ListView sẽ có nền
vovahost

11

Giải pháp của tôi để thêm không gian nhưng giữ đường ngang là thêm divider.xmlvào res/drawablethư mục và xác định hình dạng đường bên trong:

dải phân cách

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

sau đó trong danh sách của tôi, tôi tham chiếu bộ chia của mình như sau:

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

Lưu ý android:dividerHeight="16.0dp"bằng cách tăng và giảm chiều cao này, về cơ bản tôi đang thêm nhiều phần đệm ở trên và dưới của vạch chia.

Tôi đã sử dụng trang này để tham khảo: http://developer.android.com/guide/topics/resource/drawable-resource.html#stroke-element


8

Nếu bạn muốn hiển thị một dải phân cách có lề và không kéo dài nó - hãy sử dụng InsetDrawable (kích thước phải ở định dạng, nói về @Nik Reiman):

Danh sách xem:

<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

Bạn có thể dùng:

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

thí dụ:

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

Kết hợp null với bố cục mục danh sách tạo ra hiệu quả tốt nhất
Giáo sư

6

Đối với ứng dụng của tôi, tôi đã làm theo cách này

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

</ListView>

chỉ set the divider to nullvà cung cấp chiều cao cho dải phân cách đã làm cho tôi.

Thí dụ :

android:divider="@null"

hoặc là

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

và đây là kết quả

nhập mô tả hình ảnh ở đây


Tôi nghĩ, tốt hơn là android:divider="@android:color/transparent".
CoolMind

5

Tôi nhận ra rằng một câu trả lời đã được chọn, nhưng tôi chỉ muốn chia sẻ những gì đã kết thúc với tôi khi tôi gặp phải vấn đề này.

Tôi đã có một listView trong đó mỗi mục trong listView được xác định theo bố cục riêng của nó, tương tự như những gì Sammy đã đăng trong câu hỏi của mình. Tôi đã thử cách tiếp cận được đề xuất là thay đổi chiều cao của dải phân cách, nhưng cuối cùng trông nó không quá đẹp, ngay cả với một dải phân cách vô hình. Sau một số thử nghiệm, tôi chỉ cần thêm một android:paddingBottom="5dip"phần tử bố cục TextView cuối cùng trong tệp XML xác định các mục listView riêng lẻ.

Điều này cuối cùng đã cho tôi chính xác những gì tôi đang cố gắng đạt được thông qua việc sử dụng android:layout_marginBottom. Tôi tìm thấy giải pháp này để tạo ra một kết quả thẩm mỹ hơn là cố gắng tăng chiều cao dải phân cách.


4

Thay vì đưa ra lề, bạn nên cho đệm:

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

HOẶC LÀ

<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

Giải pháp đơn giản nhất với mã hiện tại của OP (danh sách các mục đã có phần đệm) là thêm mã sau:

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

Câu trả lời SO này đã giúp tôi.

Lưu ý: Bạn có thể phải đối mặt với lỗi tái chế mục danh sách quá sớm trên các nền tảng cũ hơn, như đã được hỏi ở đây .


1
bạn có thể đặt dải phân cách thành null và đặt dải phân cách cho bất cứ thứ gì bạn thích.
Andrew Gallasch

1
@Andy Tôi nghĩ nó cũng sẽ loại bỏ phần đệm giữa các mục. Điều này sẽ tạo ra vấn đề mà OP muốn giải quyết ..
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>

và thiết lập paddingTop, paddingBottomdividerHeight đến cùng một giá trị để có khoảng cách bằng nhau giữa tất cả các phần tử và khoảng trắng ở đầu và cuối danh sách.

Tôi thiết lập clipToPaddingđể falsecho phép các khung nhìn được vẽ trong khu vực đệm này.

Tôi thiết lập dividerđể @nullloại bỏ các dòng giữa các yếu tố danh sách.


2

Ngoài ra, một cách nữa để tăng khoảng cách giữa các mục danh sách là bạn thêm chế độ xem trống vào mã bộ điều hợp bằng cách cung cấp thuộc tính layout_height với khoảng cách bạn yêu cầu. Ví dụ: để tăng khoảng cách dưới cùng giữa các mục danh sách của bạn, hãy thêm chế độ xem giả này (chế độ xem trống) vào cuối các mục danh sách của bạn.

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

Vì vậy, điều này sẽ cung cấp khoảng cách dưới cùng là 15 dp giữa các mục xem danh sách. Bạn có thể trực tiếp thêm phần này nếu bố trí cha mẹ là linearLayout và hướng là dọc hoặc thực hiện các bước thích hợp cho bố cục khác. Hi vọng điêu nay co ich :-)


2

bạn chỉ cần làm nền trong suốt của bộ chia danh sách và tạo chiều cao theo khoảng cách cần thiết của bạn.

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

1

Tôi đã tìm thấy một giải pháp không tốt cho vấn đề này trong trường hợp bạn đang sử dụng một chế độ Ngang ngang, vì các bộ chia dường như không hoạt động với nó, nhưng tôi nghĩ rằng nó sẽ hoạt động theo cách khác đối với ListView phổ biến hơn.

Chỉ cần thêm:

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

trong Giao diện đóng chai của Bố cục bạn tăng trong lớp bộ điều hợp sẽ tạo khoảng cách giữa các mục


1

Để cung cấp khoảng cách giữa các chế độ xem trong listView, vui lòng sử dụng phần đệm trên các chế độ xem tăng cao của bạn.

Bạn có thể sử dụng android:paddingBottom="(number)dp"&&android:paddingTop="(number)dp" trên chế độ xem của bạn hoặc các chế độ xem bạn đang tăng trong danh sách của bạn.

Giải pháp dải phân cách chỉ là cách khắc phục, bởi vì một ngày nào đó, khi bạn muốn sử dụng màu dải phân cách (ngay bây giờ nó trong suốt), bạn sẽ thấy đường phân chia bị kéo dài.


1

Rất nhiều giải pháp này hoạt động. Tuy nhiên, nếu tất cả những gì bạn muốn là có thể đặt lề giữa các mục, phương pháp đơn giản nhất tôi đã nghĩ ra là bọc vật phẩm của bạn - trong trường hợp của bạn là CheckedTextView - trong linearLayout và đặt định dạng lề của bạn cho mục đó, không phải là bố cục gốc. Hãy chắc chắn cung cấp cho bố cục gói này một id và tạo nó cùng với CheckedTextView trong bộ điều hợp của bạn.

Đó là nó. Trong thực tế, bạn đang khởi tạo lề ở cấp độ mục cho ListView. Bởi vì ListView không biết về bất kỳ bố cục mục nào - chỉ có bộ điều hợp của bạn làm. Điều này về cơ bản thổi phồng một phần của bố cục vật phẩm đã bị bỏ qua trước đó.


0

Điều này sẽ giúp bạn thêm chiều cao chia.

 getListView().setDividerHeight(10)

Nếu bạn muốn thêm chế độ xem tùy chỉnh, bạn có thể thêm chế độ xem nhỏ trong chính bố cục mục listView.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.