สามารถเพิ่มบรรทัดตัวแบ่งใน Android RecyclerView ได้อย่างไร

ฉันกำลังพัฒนาแอพพลิเคชั่น Android ที่ฉันใช้งานRecyclerViewอยู่ ฉันจำเป็นต้องเพิ่มdividerRecyclerViewใน ฉันพยายามเพิ่ม -

recyclerView.addItemDecoration(new
     DividerItemDecoration(getActivity(),
       DividerItemDecoration.VERTICAL_LIST));

ด้านล่างคือรหัส xml ของฉัน -

   <android.support.v7.widget.RecyclerView
    android:id="@+id/drawerList"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    />

ในการอัปเดตเดือนตุลาคม 2559 ขณะนี้ไลบรารีสนับสนุน v25.0.0 มีการใช้งานเริ่มต้นของตัวคั่นแนวนอนและแนวตั้งแบบพื้นฐาน!

https://developer.android.com/reference/android/support/v7/widget/DividerItemDecoration.html

 recyclerView.addItemDecoration(new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.VERTICAL));

วิธีที่ถูกต้องคือการกำหนดItemDecorationสิ่งRecyclerViewต่อไปนี้

SimpleDividerItemDecoration.java

public class SimpleDividerItemDecoration extends RecyclerView.ItemDecoration {
    private Drawable mDivider;

    public SimpleDividerItemDecoration(Context context) {
        mDivider = context.getResources().getDrawable(R.drawable.line_divider);
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            int top = child.getBottom() + params.bottomMargin;
            int bottom = top + mDivider.getIntrinsicHeight();

            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }
}

line_divider.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size
        android:width="1dp"
        android:height="1dp" />

    <solid android:color="@color/dark_gray" />

</shape>

ในที่สุดก็ตั้งค่าเช่นนี้

recyclerView.addItemDecoration(new SimpleDividerItemDecoration(this));

แก้ไข

ตามที่ระบุโดย @Alan Solitar

context.getResources().getDrawable(R.drawable.line_divider); 

ถูกคิดค่าเสื่อมราคาแทนการที่คุณสามารถใช้

ContextCompat.getDrawable(context,R.drawable.line_divider);

หากคุณต้องการให้มีทั้งตัวแบ่งแนวนอนและแนวตั้ง:

1. กำหนด drawers ในแนวนอนและแนวตั้ง:

   horizontal_divider.xml

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android" >
     <size android:height="1dip" />
     <solid android:color="#22000000" />
   </shape>

   vertical_divider.xml

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android" >
       <size android:width="1dip" />
       <solid android:color="#22000000" />
   </shape>

2. เพิ่มส่วนรหัสนี้ด้านล่าง:

   DividerItemDecoration verticalDecoration = new DividerItemDecoration(recyclerview.getContext(),
           DividerItemDecoration.HORIZONTAL);
   Drawable verticalDivider = ContextCompat.getDrawable(getActivity(), R.drawable.vertical_divider);
   verticalDecoration.setDrawable(verticalDivider);
   recyclerview.addItemDecoration(verticalDecoration);
   
   DividerItemDecoration horizontalDecoration = new DividerItemDecoration(recyclerview.getContext(),
           DividerItemDecoration.VERTICAL);
   Drawable horizontalDivider = ContextCompat.getDrawable(getActivity(), R.drawable.horizontal_divider);
   horizontalDecoration.setDrawable(horizontalDivider);
   recyclerview.addItemDecoration(horizontalDecoration);

คำตอบทั้งหมดเหล่านี้ทำให้ฉันสนิทกัน แต่พวกเขาก็ไม่มีรายละเอียดที่สำคัญ หลังจากการวิจัยเล็กน้อยฉันพบเส้นทางที่ง่ายที่สุดที่จะรวมกันของ 3 ขั้นตอนเหล่านี้:

1. ใช้DividerItemDecorationของไลบรารีการสนับสนุน
2. สร้างตัวแบ่งที่มีสีที่ถูกต้อง
3. ตั้งตัวแบ่งนี้ในชุดรูปแบบของคุณเป็นlistDivider

ขั้นตอนที่ 1: ในขณะที่กำหนดค่า RecyclerView

recyclerView.addItemDecoration(
        new DividerItemDecoration(context, layoutManager.getOrientation()));

ขั้นตอนที่ 2: ในไฟล์เช่น res / drawable / divider_gray.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="1px" android:height="1px" />
    <solid android:color="@color/gray" />
</shape>

ขั้นตอนที่ 3: ในธีมของแอพ

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Other theme items above -->
    <item name="android:listDivider">@drawable/divider_gray</item>
</style>

แก้ไข: อัปเดตเพื่อข้ามตัวแบ่งล่าสุด:
หลังจากใช้บิตนี้ฉันก็รู้ว่ามันกำลังวาดตัวแบ่งหลังจากรายการสุดท้ายซึ่งน่ารำคาญ ดังนั้นฉันจึงปรับเปลี่ยนขั้นตอนที่ 1ดังต่อไปนี้เพื่อแทนที่พฤติกรรมเริ่มต้นใน DividerItemDecoration (แน่นอนการสร้างคลาสแยกต่างหากเป็นอีกตัวเลือกหนึ่ง):

recyclerView.addItemDecoration(
        new DividerItemDecoration(context, layoutManager.getOrientation()) {
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                int position = parent.getChildAdapterPosition(view);
                // hide the divider for the last child
                if (position == parent.getAdapter().getItemCount() - 1) {
                    outRect.setEmpty();
                } else {
                    super.getItemOffsets(outRect, view, parent, state);
                }
            }
        }
);

เพียงเพิ่มมุมมองในตอนท้ายของอะแดปเตอร์ไอเท็ม:

<View
 android:layout_width="match_parent"
 android:layout_height="1dp"
 android:background="#FFFFFF"/>

นี่คือรหัสสำหรับตัวแบ่งที่กำหนดเองอย่างง่าย (ตัวแบ่งแนวตั้ง / ความสูง 1dp / สีดำ):

สมมติว่าคุณมี Library Support:

compile "com.android.support:recyclerview-v7:25.1.1"

รหัสจาวา

    DividerItemDecoration divider = new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.VERTICAL);
    divider.setDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.my_custom_divider));
    recyclerView.addItemDecoration(divider);

ดังนั้นตัวอย่างไฟล์ custom_divider.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <size android:height="1dp" />
    <solid android:color="@android:color/black" />
</shape>

สร้างไฟล์ xml แยกในโฟลเดอร์res / drawable

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <size android:height="1dp" />
    <solid android:color="@android:color/black" />
</shape>

เชื่อมต่อไฟล์ xml (your_file) ที่กิจกรรมหลักเช่นนี้:

DividerItemDecoration divider = new DividerItemDecoration(
    recyclerView.getContext(),
    DividerItemDecoration.VERTICAL
);
divider.setDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.your_file));
recyclerView.addItemDecoration(divider);

รุ่น Kotlin:

recyclerview.addItemDecoration(DividerItemDecoration(this, LinearLayoutManager.VERTICAL))

ฉันคิดว่าคุณกำลังใช้Fragmentsที่จะมีRecyclerView

เพียงเพิ่มบรรทัดเหล่านี้หลังจากสร้างRecyclerViewและLayoutManagerวัตถุของคุณ

DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
                DividerItemDecoration.VERTICAL);
        recyclerView.addItemDecoration(dividerItemDecoration);

แค่นั้นแหละ!

รองรับการหมุนแนวตั้งทั้งแนวตั้งและแนวนอน

ลองใช้รหัสบรรทัดเดียวแบบง่าย

recyclerView.addItemDecoration(new DividerItemDecoration(getContext(),LinearLayoutManager.VERTICAL)); 

วิธีที่ฉันจัดการมุมมอง Divider และ Divider Insets คือการเพิ่มส่วนขยาย RecyclerView

1

เพิ่มไฟล์นามสกุลใหม่โดยตั้งชื่อดูหรือ RecyclerView:

RecyclerViewExtension.kt

และเพิ่มsetDividerวิธีการขยายภายในไฟล์ RecyclerViewExtension.kt

/*
* RecyclerViewExtension.kt
* */
import androidx.annotation.DrawableRes
import androidx.core.content.ContextCompat
import androidx.recyclerview.widget.DividerItemDecoration
import androidx.recyclerview.widget.RecyclerView


fun RecyclerView.setDivider(@DrawableRes drawableRes: Int) {
    val divider = DividerItemDecoration(
        this.context,
        DividerItemDecoration.VERTICAL
    )
    val drawable = ContextCompat.getDrawable(
        this.context,
        drawableRes
    )
    drawable?.let {
        divider.setDrawable(it)
        addItemDecoration(divider)
    }
}

2

สร้างไฟล์ทรัพยากร Drawable ภายในdrawableแพ็คเกจเช่นrecycler_view_divider.xml:

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="10dp"
    android:insetRight="10dp">

    <shape>
        <size android:height="0.5dp" />
        <solid android:color="@android:color/darker_gray" />
    </shape>

</inset>

ซึ่งคุณสามารถระบุซ้ายและขวาขอบบนและandroid:insetLeftandroid:insetRight

3

ในกิจกรรมหรือชิ้นส่วนที่ RecyclerView เริ่มต้นคุณสามารถตั้งค่า drawable แบบกำหนดเองได้โดยการโทร:

recyclerView.setDivider(R.drawable.recycler_view_divider)

4

ไชโย🍺

คุณต้องเพิ่มบรรทัดถัดไป ...

mRecyclerView.addItemDecoration(new DividerItemDecoration(getContext(), DividerItemDecoration.VERTICAL));

ดังนั้นนี่อาจไม่ใช่วิธีที่ถูกต้อง แต่ฉันเพิ่งเพิ่มมุมมองไปยังมุมมองรายการเดียวของ RecyclerView (เพราะฉันไม่คิดว่าจะมีฟังก์ชั่นในตัว) ดังนี้:

<View
    android:layout_width="fill_parent"
    android:layout_height="@dimen/activity_divider_line_margin"
    android:layout_alignParentBottom="true"
    android:background="@color/tasklist_menu_dividerline_grey" />

ซึ่งหมายความว่าแต่ละรายการจะมีบรรทัดที่เติมไว้ที่ด้านล่าง ฉันทำให้มันสูงประมาณ 1dp ด้วย#111111พื้นหลัง สิ่งนี้ยังให้เอฟเฟกต์ "3D"

คุณสามารถสร้างตัวแบ่งที่ใช้ซ้ำได้ง่าย

สร้างตัวแบ่ง:

public class DividerItemDecorator extends RecyclerView.ItemDecoration {
    private Drawable mDivider;

    public DividerItemDecorator(Drawable divider) {
        mDivider = divider;
    }

    @Override
    public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
        int dividerLeft = parent.getPaddingLeft();
        int dividerRight = parent.getWidth() - parent.getPaddingRight();

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            int dividerTop = child.getBottom() + params.bottomMargin;
            int dividerBottom = dividerTop + mDivider.getIntrinsicHeight();

            mDivider.setBounds(dividerLeft, dividerTop, dividerRight, dividerBottom);
            mDivider.draw(canvas);
        }
    }
}

สร้าง Divider Line: divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:width="1dp"
        android:height="1dp" />
    <solid android:color="@color/grey_300" />
</shape>

เพิ่มตัวแบ่งลงใน Recyclerview ของคุณ:

RecyclerView.ItemDecoration dividerItemDecoration = new DividerItemDecorator(ContextCompat.getDrawable(context, R.drawable.divider));
recyclerView.addItemDecoration(dividerItemDecoration);

วิธีลบตัวแบ่งสำหรับรายการสุดท้าย:

เพื่อป้องกันการวาดภาพตัวหารสำหรับรายการสุดท้ายคุณต้องเปลี่ยนบรรทัดนี้

for (int i = 0; i < childCount; i++) 

ถึง

for (int i = 0; i < childCount-1; i++)

การใช้งานครั้งสุดท้ายของคุณควรเป็นเช่นนี้:

public class DividerItemDecorator extends RecyclerView.ItemDecoration {
    private Drawable mDivider;

    public DividerItemDecorator(Drawable divider) {
        mDivider = divider;
    }

    @Override
    public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
        int dividerLeft = parent.getPaddingLeft();
        int dividerRight = parent.getWidth() - parent.getPaddingRight();

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount - 1; i++) {
            View child = parent.getChildAt(i);

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            int dividerTop = child.getBottom() + params.bottomMargin;
            int dividerBottom = dividerTop + mDivider.getIntrinsicHeight();

            mDivider.setBounds(dividerLeft, dividerTop, dividerRight, dividerBottom);
            mDivider.draw(canvas);
        }
    }
}

หวังว่าจะช่วย :)

RecyclerView-FlexibleDividerของ yqritc ทำให้เป็นหนึ่งซับ ก่อนอื่นให้เพิ่มลงในของคุณbuild.gradle:

compile 'com.yqritc:recyclerview-flexibledivider:1.4.0' // requires jcenter()

ตอนนี้คุณสามารถกำหนดค่าและเพิ่มตัวหารที่คุณตั้งค่าอะแดปเตอร์ของ recyclerView ของคุณ:

recyclerView.setAdapter(myAdapter);
recyclerView.addItemDecoration(new HorizontalDividerItemDecoration.Builder(this).color(Color.RED).sizeResId(R.dimen.divider).marginResId(R.dimen.leftmargin, R.dimen.rightmargin).build());

Android ทำสิ่งเล็ก ๆ น้อย ๆ ที่ซับซ้อนเกินไปโชคไม่ดี วิธีที่ง่ายที่สุดในการบรรลุสิ่งที่คุณต้องการโดยไม่ต้องใช้ DividerItemDecoration ที่นี่:

เพิ่มสีพื้นหลังให้กับ RecyclerView เป็นสีที่ต้องการ:

<RecyclerView
    android:id="@+id/rvList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@color/colorLightGray"
    android:scrollbars="vertical"
    tools:listitem="@layout/list_item"
    android:background="@android:color/darker_gray"/>

เพิ่มระยะขอบด้านล่าง (android: layout_marginBottom) ให้กับรูทโครงร่างของรายการ (list_item.xml):

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="1dp">

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="John Doe" />

    <TextView
        android:id="@+id/tvDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvName"
        android:text="Some description blah blah" />

</RelativeLayout>

สิ่งนี้ควรให้ช่องว่าง 1dp ระหว่างรายการและสีพื้นหลังของ RecyclerView (ซึ่งเป็นสีเทาเข้มจะปรากฏเป็นตัวแบ่ง)

หากต้องการให้คำตอบของ NJ ง่ายขึ้นคุณสามารถทำได้:

public class DividerColorItemDecoration extends DividerItemDecoration {

    public DividerColorItemDecoration(Context context, int orientation) {
        super(context, orientation);
        setDrawable(ContextCompat.getDrawable(context, R.drawable.line_divider));
    }
}

เพียงเพิ่มส่วนต่างจำนวน x ที่ด้านล่างของรายการในของคุณ RecycleView Adapterที่ด้านล่างของรายการในของคุณ

onCreateViewHolder

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);

layoutParams.setMargins(0, 0, 0, 5);
itemView.setLayoutParams(layoutParams);

recyclerview.addItemDecoration(new DividerItemDecoration(this, 0));

0แนวนอนอยู่ที่ไหนและ1สำคัญมาก

  class ItemOffsetDecoration(
        context: Context,
        private val paddingLeft: Int,
        private val paddingRight: Int
    ) : RecyclerView.ItemDecoration() {
        private var mDivider: Drawable? = null

        init {
            mDivider = ContextCompat.getDrawable(context, R.drawable.divider_medium)
        }

        override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
            val left = parent.paddingLeft + paddingLeft
            val right = parent.width - parent.paddingRight - paddingRight
            val childCount = parent.childCount
            for (i in 0 until childCount) {
                val child = parent.getChildAt(i)
                val params = child.layoutParams as RecyclerView.LayoutParams
                val top = child.bottom + params.bottomMargin
                val bottom = top + (mDivider?.intrinsicHeight ?: 0)

                mDivider?.let {
                    it.setBounds(left, top, right, bottom)
                    it.draw(c)
                }
            }
        }
    }

คุณเพียงแค่ต้องระบุสีใน R.drawable.divider_medium

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/black" />
    <size
        android:height="1dp"
        android:width="1dp" />

</shape>

และเพิ่มลงใน recyclerView ของคุณ

recyclerView.addItemDecoration(
                        ItemOffsetDecoration(
                            this,
                            resources.getDimension(resources.getDimension(R.dimen.dp_70).roundToInt()).roundToInt(),
                            0
                        )
                    )

แนะนำสิ่งนี้

วิธีการแก้ปัญหา Bhuvanesh BS รุ่น Kotlin ของสิ่งนี้:

import android.graphics.Canvas
import android.graphics.drawable.Drawable
import androidx.recyclerview.widget.RecyclerView

class DividerItemDecorator(private val mDivider: Drawable?) : RecyclerView.ItemDecoration() {

    override fun onDraw(
        canvas: Canvas,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {

        val dividerLeft = parent.paddingLeft
        val dividerRight = parent.width - parent.paddingRight
        for (i in 0 until parent.childCount - 1) {
            val child = parent.getChildAt(i)
            val dividerTop =
                child.bottom + (child.layoutParams as RecyclerView.LayoutParams).bottomMargin
            val dividerBottom = dividerTop + mDivider!!.intrinsicHeight
            mDivider.setBounds(dividerLeft, dividerTop, dividerRight, dividerBottom)
            mDivider.draw(canvas)
        }
    }
}

ฉันคิดว่ามันเป็นวิธีที่ง่ายที่สุด

mDividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
                DividerItemDecoration.VERTICAL);
// or DividerItemDecoration.HORIZONTALL
        mDividerItemDecoration.setDrawable(getDrawable(R.drawable.myshape));
        recyclerView.addItemDecoration(mDividerItemDecoration);

โปรดทราบว่า: myshape สามารถเป็น rectangel ที่มีความสูงที่คุณต้องการทำให้ตัวแบ่งของคุณ