วิธีกำหนดช่องว่างระหว่าง listView Items ใน Android


371

ฉันพยายามใช้ marginBottom บน listView เพื่อสร้างช่องว่างระหว่าง listView Item แต่ยังคงมีรายการที่เชื่อมต่อกัน

เป็นไปได้ไหม ถ้าใช่มีวิธีการเฉพาะหรือไม่?

รหัสของฉันอยู่ด้านล่าง

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

รายการที่กำหนดเองของฉัน:

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

ฉันจะเว้นวรรคระหว่างรายการในกรณีนี้ได้อย่างไร

คำตอบ:


829

@ Asahi สวยมากแล้วก็ตอกตะปูลงบนหัว แต่ฉันแค่อยากจะเพิ่มบิตของ XML สำหรับทุกคนที่อาจลอยมาที่นี่ในภายหลังผ่าน 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"/>

ด้วยเหตุผลบางอย่างค่าเช่น "10", "10.0" และ "10sp" ทั้งหมดจะถูกปฏิเสธโดย Android สำหรับdividerHeightค่า มันต้องการเลขทศนิยมและหน่วยเช่น "10.0sp" ในฐานะที่เป็น @Goofyahead บันทึกย่อคุณสามารถใช้พิกเซลแบบไม่แสดงผลสำหรับค่านี้ (เช่น "10dp")


24
วิธีนี้ไม่ช่วยถ้าคุณต้องการแสดงตัวแบ่งโดยไม่ยืดออก
Sojurn

4
FYI - สามารถทำได้ผ่านรหัส - getListView (). setDividerHeight (10)
AnhSirk Dasarp

2
หรือ android: divider = "@ null"
kevin

@ ซูซานฉันได้ลอง 9-patch ถ้าฉันต้องการอะไรแบบนั้น
Sufian

@Sojurn ตรวจสอบคำตอบของฉัน มันเพิ่มช่องว่างภายใน แต่ไม่ยืดตัวแบ่ง
Sufian


43

แม้ว่าวิธีการแก้ปัญหาของ Nik Reiman ใช้งานได้ แต่ฉันพบว่าไม่ใช่วิธีการแก้ปัญหาที่ดีที่สุดสำหรับสิ่งที่ฉันต้องการจะทำ การใช้ตัวหารเพื่อกำหนดระยะขอบมีปัญหาว่าตัวคั่นจะไม่ปรากฏให้เห็นอีกต่อไปดังนั้นคุณไม่สามารถใช้ตัวแบ่งเพื่อแสดงขอบเขตที่ชัดเจนระหว่างรายการของคุณ นอกจากนี้จะไม่เพิ่ม "พื้นที่คลิกได้" มากขึ้นสำหรับแต่ละรายการดังนั้นหากคุณต้องการทำให้รายการของคุณสามารถคลิกได้และรายการของคุณบางมันจะยากมากสำหรับทุกคนที่จะคลิกที่รายการเนื่องจากความสูงที่เพิ่มโดยตัวแบ่งไม่ได้ ส่วนหนึ่งของรายการ

โชคดีที่ฉันพบโซลูชันที่ดีกว่าที่ช่วยให้คุณแสดงวงเวียนทั้งสองและช่วยให้คุณปรับความสูงของแต่ละรายการโดยไม่ใช้ระยะห่าง แต่มีช่องว่างภายใน นี่คือตัวอย่าง:

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>

แน่นอนทางออกที่ดีกว่า ขอบคุณ
Bigyellowbee

17

คุณควรห่อListViewรายการ (พูดyour_listview_item) ในเลย์เอาต์อื่น ๆ เช่นLinearLayoutและเพิ่มส่วนต่างไปที่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>

วิธีนี้คุณสามารถเพิ่มช่องว่างได้ถ้าต้องการทางด้านขวาและด้านซ้ายของListViewรายการ


3
ฉันต้องการมาร์จิ้นซ้าย / ขวาดังนั้นคำตอบของคุณก็มีประโยชน์สำหรับฉัน แต่ฉันไม่ชอบความคิดของการห่อเลย์เอาต์อื่นไว้เพื่อจุดประสงค์ในการ
วางเดิมพันเท่านั้น

มีสองสามวิธี .. และนั่นคือสิ่งที่ไม่ดีในแง่ของประสิทธิภาพการจัดวาง .. พยายามที่จะคิดรายการที่มีหลายสิบ (หรือหลายร้อย) รายการ :)
andrea.rinaldi

@ andrea.spot มันจะไม่สำคัญสำหรับรายการที่มีหลายสิบหรือหลายร้อยรายการยกเว้นว่าเป็นจำนวนรายการที่ปรากฏบนหน้าจอในครั้งเดียว ListView ใช้การรีไซเคิลมุมมอง (ถ้าคุณใช้อะแดปเตอร์ของคุณอย่างถูกต้อง)
ataulm

1
สิ่งนี้จะไม่ทำงานหากรายการ ListView จะมีพื้นหลัง
vovahost

11

โซลูชันของฉันเพื่อเพิ่มพื้นที่เพิ่มเติม แต่เก็บเส้นแนวนอนไว้เพื่อเพิ่มdivider.xmlในres/drawableโฟลเดอร์และกำหนดรูปร่างเส้นภายใน:

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>

จากนั้นในรายการของฉันฉันอ้างอิงตัวหารดังนี้:

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

สังเกตได้android:dividerHeight="16.0dp"จากการเพิ่มและลดความสูงนี้โดยทั่วไปแล้วฉันกำลังเพิ่มการเติมที่ด้านบนและด้านล่างของบรรทัดตัวแบ่ง

ฉันใช้หน้านี้เพื่อการอ้างอิง: http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element


8

หากคุณต้องการแสดงตัวหารที่มีระยะขอบและไม่ยืดให้ใช้ InsetDrawable (ขนาดต้องอยู่ในรูปแบบซึ่งเกี่ยวกับ @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

คุณสามารถใช้ได้:

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

ตัวอย่าง:

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

การรวม null กับเค้าโครงรายการจะให้เอฟเฟกต์ดีที่สุด
Prof

6

สำหรับใบสมัครของฉันฉันได้ทำแบบนี้แล้ว

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

</ListView>

เพียงแค่set the divider to nullให้ความสูงแก่ผู้แบ่งเพื่อฉัน

ตัวอย่าง:

android:divider="@null"

หรือ

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

และนี่คือผลลัพธ์

ป้อนคำอธิบายรูปภาพที่นี่


android:divider="@android:color/transparent"ผมคิดว่าที่ดีกว่าคือ
CoolMind

5

ฉันตระหนักว่าได้เลือกคำตอบแล้ว แต่ฉันต้องการแบ่งปันสิ่งที่เกิดขึ้นกับฉันเมื่อฉันพบปัญหานี้

ฉันมี listView ที่แต่ละรายการใน listView ถูกกำหนดโดยเลย์เอาต์ของตัวเองคล้ายกับสิ่งที่ Sammy โพสต์ในคำถามของเขา ฉันลองวิธีที่แนะนำในการเปลี่ยนความสูงของตัวแบ่ง แต่ก็ไม่ได้ดูดีจนเกินไปแม้แต่กับตัวแบ่งที่มองไม่เห็น หลังจากการทดลองบางอย่างฉันเพียงแค่เพิ่มandroid:paddingBottom="5dip"องค์ประกอบเลย์เอาต์ TextView สุดท้ายในไฟล์ XML ที่กำหนดแต่ละรายการ listView

android:layout_marginBottomเรื่องนี้จบลงด้วยการให้ฉันว่าสิ่งที่ผมพยายามที่จะบรรลุผ่านการใช้งานของ ฉันพบวิธีนี้เพื่อให้ได้ผลลัพธ์ที่น่าพึงพอใจมากกว่าการพยายามเพิ่มความสูงของตัวแบ่ง


4

แทนที่จะให้มาร์จิ้นคุณควรให้ช่องว่างภายใน:

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

หรือ

<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

ทางออกที่ง่ายที่สุดด้วยรหัสที่มีอยู่ของ OP (รายการในรายการมีช่องว่างภายใน) คือการเพิ่มรหัสต่อไปนี้:

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

คำตอบ SO นี้ช่วยฉัน

หมายเหตุ:คุณอาจต้องเผชิญกับข้อผิดพลาดของรายการรีไซเคิลเร็วเกินไปบนแพลตฟอร์มเก่าตามที่ได้รับการถามที่นี่


1
คุณสามารถตั้งตัวแบ่งเป็นโมฆะและตั้งตัวแบ่งความสูงเป็นอะไรก็ได้
Andrew Gallasch

1
@ ฉันคิดว่ามันจะลบช่องว่างระหว่างรายการด้วย ซึ่งจะเป็นการสร้างปัญหาที่ทาง 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>

และการตั้งค่าpaddingTop, paddingBottomและdividerHeightเป็นค่าเดียวกันที่จะได้รับการเว้นระยะห่างเท่า ๆ กันระหว่างองค์ประกอบทั้งหมดและพื้นที่ที่ด้านบนและด้านล่างของรายการ

ฉันตั้งค่าclipToPaddingเพื่อfalseให้มุมมองถูกวาดในพื้นที่เบาะนี้

ฉันตั้งค่าdividerเป็น@nullลบบรรทัดระหว่างองค์ประกอบรายการ


2

อีกวิธีหนึ่งในการเพิ่มระยะห่างระหว่างรายการคือคุณเพิ่มมุมมองที่ว่างในโค้ดอะแด็ปเตอร์ของคุณโดยระบุแอตทริบิวต์ layout_height ด้วยระยะห่างที่คุณต้องการ ตัวอย่างเช่นเพื่อเพิ่มระยะห่างด้านล่างระหว่างรายการของคุณให้เพิ่มมุมมองแบบจำลอง (มุมมองว่าง) ไปยังจุดสิ้นสุดของรายการ

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

ดังนั้นจะให้ระยะห่างด้านล่าง 15 dp ระหว่างรายการมุมมองรายการ คุณสามารถเพิ่มสิ่งนี้ได้โดยตรงหากเค้าโครงหลักเป็น LinearLayout และการวางแนวเป็นแนวตั้งหรือทำตามขั้นตอนที่เหมาะสมสำหรับเค้าโครงอื่น ๆ หวังว่านี่จะช่วย :-)


2

คุณเพียงแค่ต้องทำให้พื้นหลังโปร่งใสของตัวแบ่งรายการและสร้างความสูงตามช่องว่างที่คุณต้องการ

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

1

ฉันพบวิธีแก้ปัญหาที่ไม่ดีสำหรับกรณีนี้ในกรณีที่คุณใช้ HorizontalListView เนื่องจากตัวแบ่งดูเหมือนจะใช้งานไม่ได้ แต่ฉันคิดว่ามันจะใช้งานได้กับ ListView ทั่วๆไป

เพียงเพิ่ม:

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

ในมุมมอง bottomest ของเค้าโครงที่คุณขยายในคลาสอะแดปเตอร์จะสร้างระยะห่างระหว่างรายการ


1

เพื่อที่จะให้ระยะห่างระหว่างมุมมองภายใน listView โปรดใช้ช่องว่างภายในมุมมองขยายของคุณ

คุณสามารถใช้android:paddingBottom="(number)dp"&& android:paddingTop="(number)dp"ในมุมมองของคุณหรือมุมมองที่ขยายใน listview ของคุณ

โซลูชันตัวแบ่งเป็นเพียงการแก้ไขเพราะบางวันเมื่อคุณต้องการใช้สีตัวแบ่ง (ตอนนี้เป็นแบบโปร่งใส) คุณจะเห็นว่าเส้นตัวยืดถูกยืดออก


1

โซลูชั่นเหล่านี้ทำงานได้มากมาย อย่างไรก็ตามหากสิ่งที่คุณต้องการคือการสามารถกำหนดระยะห่างระหว่างรายการวิธีที่ง่ายที่สุดที่ฉันได้มาคือการห่อรายการของคุณ - ในกรณีของคุณ CheckedTextView - ใน LinearLayout และวางการจัดรูปแบบระยะขอบสำหรับรายการในนั้น ไม่ใช่รูปแบบรูท ตรวจสอบให้แน่ใจว่าได้ใส่รหัสการห่อและสร้างพร้อมกับ CheckedTextView ในอะแดปเตอร์ของคุณ

แค่นั้นแหละ. ผลที่ตามมาคือคุณปรับอัตรากำไรขั้นต้นที่ระดับรายการสำหรับ ListView เนื่องจาก ListView ไม่ทราบเกี่ยวกับเค้าโครงรายการใด ๆ - เฉพาะอะแดปเตอร์ของคุณเท่านั้น สิ่งนี้จะทำให้ส่วนหนึ่งของเลย์เอาต์ของสินค้าที่ถูกเพิกเฉยมาก่อน


0

นี่จะช่วยคุณเพิ่มความสูงของตัวแบ่ง

 getListView().setDividerHeight(10)

หากคุณต้องการเพิ่มมุมมองที่กำหนดเองคุณสามารถเพิ่มมุมมองเล็ก ๆ ในโครงร่างรายการ listView ได้

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.