简体   繁体   中英

Add line separator on first item of recyclerview

How could I add a line just above of first item (10) a line?

在此处输入图片说明

I'm using RecyclerView and LinearLayoutManager to implement my design.

activity_main.xml:

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

    <SeekBar
    android:id="@+id/timesTablesSeekBar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginEnd="5dp"
    android:layout_marginRight="5dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

 <androidx.recyclerview.widget.RecyclerView
     android:id="@+id/recyclerView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_marginTop="32dp"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

list_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:showDividers="beginning">

<TextView
    android:id="@+id/timeTables"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text=""
    android:textSize="70px"
    android:textStyle="bold|italic" />
</LinearLayout>

您可以在textView上方的list_layout.xml中添加高度为1dp且背景为黑色的视图,只需删除recyclerView的默认分隔线即可。

First of all, using LinearLayout's android:showDividers to divide items is not a best practice. First, I would remove outer LinearLayout from your list_layout.xml like this:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/timeTables"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text=""
    android:textSize="70px"
    android:textStyle="bold|italic" />

To show dividers, the best way is to use RecyclerView.ItemDecoration . Please see DividerItemDecoration to draw divider: https://developer.android.com/reference/androidx/recyclerview/widget/DividerItemDecoration

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

Then the only thing missing would be drawing top line. You can implement a custom ItemDecoration like this:

public class TopLineDecoration extends RecyclerView.ItemDecoration {
    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};

    private final Drawable divider;

    public TopLineDecoration(Context context) {
        TypedArray a = context.obtainStyledAttributes(ATTRS);
        divider = a.getDrawable(0);
        a.recycle();
    }

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);

            if (parent.getChildAdapterPosition(child) == 0) {
                RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

                int top = child.getTop() - params.topMargin;
                int bottom = top + divider.getIntrinsicHeight();
                int left = parent.getPaddingLeft();
                int right = parent.getWidth() - parent.getPaddingRight();

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

And your final implementation would be like:

dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
    layoutManager.getOrientation());
topLineDecoration = new TopLineDecoration(recyclerView.getContext())
recyclerView.addItemDecoration(dividerItemDecoration);
recyclerView.addItemDecoration(topLineDecoration)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM