Android:在RecyclerView中的项目之间添加分隔符

时间:2015-02-25 07:13:26

标签: android xml android-recyclerview android-styles

我正在使用带有圆角的RecyclerView,以使其在XML下面使用圆角:

view_rounded.xml: -

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#008f8471"/>
    <stroke android:width="2dp" android:color="#ffffff" />
    <corners android:radius="10dp"/>
</shape>

fragment_main.xml: -

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/view_rounded"/>

adapter_main.xml: -

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textTitle"
        style="@style/AppTheme.ListTextView"
        />

</LinearLayout>

style.xml: -

<style name="AppTheme.ListTextView" parent="android:Widget.Material.TextView">
  <item name="android:gravity">left</item>
  <item name="android:layout_width">match_parent</item>
  <item name="android:layout_height">wrap_content</item>
  <item name="android:textAllCaps">false</item>
  <item name="android:padding">10dp</item>
  <item name="android:textAppearance">@android:style/TextAppearance.DeviceDefault.Medium</item>
  <item name="android:textColor">@color/tabsScrollColor</item> 
  <item name="android:textStyle">bold</item> 
</style>

获取(没有项目分隔符):

enter image description here

必需(带项目分隔符):

enter image description here

17 个答案:

答案 0 :(得分:6)

我这样做了:

碎片的

onCreateView()

RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerView);
recyclerView.addItemDecoration(new SimpleDividerItemDecoration(getActivity()));

<强> SimpleDividerItemDecoration.java

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

    public SimpleDividerItemDecoration(Context context) {
        mDivider = context.getResources().getDrawable(R.drawable.recycler_horizontal_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);
        }
    }
}

<强> recycler_horizo​​ntal_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="#2EC590" />

</shape>

希望这会对你有所帮助。

答案 1 :(得分:5)

你应该尝试添加Divider

mListview.addItemDecoration(new DividerItemDecoration(this.getActivity(), LinearLayout.VERTICAL));

答案 2 :(得分:3)

RecyclerView doesn’t have any divider related parameters to display the divider. Instead you need to extend a class from ItemDecoration and use addItemDecoration() method to display the divider.

Create a class named DividerItemDecoration.java and paste the below code.

DividerItemDecoration.java

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

    private static final int[] ATTRS = new int[]{
            android.R.attr.listDivider
    };

    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;

    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;

    private Drawable mDivider;

    private int mOrientation;

    public DividerItemDecoration(Context context, int orientation) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        setOrientation(orientation);
    }

    public void setOrientation(int orientation) {
        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
            throw new IllegalArgumentException("invalid orientation");
        }
        mOrientation = orientation;
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

    public void drawVertical(Canvas c, RecyclerView parent) {
        final int left = parent.getPaddingLeft();
        final int right = parent.getWidth() - parent.getPaddingRight();

        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin;
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    public void drawHorizontal(Canvas c, RecyclerView parent) {
        final int top = parent.getPaddingTop();
        final int bottom = parent.getHeight() - parent.getPaddingBottom();

        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int left = child.getRight() + params.rightMargin;
            final int right = left + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
        } else {
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
        }
    }
}

Open Activity.java and set the item decoration using addItemDecoration() method before setting the adapter.

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

// set the adapter
recyclerView.setAdapter(mAdapter);

答案 3 :(得分:2)

RecyclerView的工作方式与ListView不同。您需要为Recycler视图添加ItemDecorators。正如文档所说,

  

ItemDecoration允许应用程序从适配器的数据集向特定项目视图添加特殊的绘图和布局偏移。这对于在项目之间绘制分隔符,高亮显示,可视分组边界等非常有用。

请看一下这个链接:https://developer.android.com/reference/android/support/v7/widget/RecyclerView.ItemDecoration.html

答案 4 :(得分:1)

这行代码对我有用:

recyclerView.addItemDecoration(new DividerItemDecoration(context, DividerItemDecoration.HORIZONTAL));

对于垂直线,将第二个参数传递为DividerItemDecoration.VERTICAL

答案 5 :(得分:1)

要向您的recyclerview添加分隔符,您需要使用装饰器 - https://gist.github.com/alexfu/0f464fc3742f134ccd1e将其添加到项目后添加一行 recyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.VERTICAL_LIST));

答案 6 :(得分:1)

我做到这一点的原因是,我首先为我的适配器行创建了

的布局
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <View
    android:id="@+id/lineView"
    android:layout_width="match_parent"
    android:layout_height="2px"
    android:background="@android:color/black"/>
    <TextView
        android:id="@+id/textTitle"
        style="@style/AppTheme.ListTextView"
        />

   </LinearLayout>

然后在我的适配器中,我检查了第一行并将其viewLine Visibility更改为不可见

@Override
public void onBindViewHolder(ChildInfoViewHolder holder, final int position) {
    if(position == 0){
        holder.viewLine.setVisibility(View.INVISIBLE);
    }
//...
}

public static class MyViewHolder extends RecyclerView.ViewHolder{
    protected View viewLine;
    public ChildInfoViewHolder(View view) {
        super(view);
        viewLine = view.findViewById(R.id.viewLine);
        //... 
    }
}

答案 7 :(得分:0)

试试这个

recyclerView.apply {
        ....
        addItemDecoration(DividerItemDecoration(context, DividerItemDecoration.VERTICAL))
    }

答案 8 :(得分:0)

如果使用自定义适配器

,请将选择器设置在布局中列表项的背景中

答案 9 :(得分:0)

只是一条线......

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

这就是全部

答案 10 :(得分:0)

问题是因为您不仅要将角落设置为列表视图,还要设置项目。您应该为item(带选择器)创建单独的背景,为带有角的列表视图创建一个背景。

<强> list_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#008f8471"/>
    <stroke android:width="1dip" android:color="#ffffff" />
    <corners android:radius="10dp"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

现在您可以将此drawable设置为列表视图的背景。

<ListView
    android:id="@+id/listView"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@drawable/list_bg.xml"
    android:fastScrollEnabled="true"
    android:choiceMode="singleChoice" />

对于列表视图项,您可以使用selector来实现悬停功能: 的 list_item_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/list_item_selected" android:state_pressed="true"/>
    <item android:drawable="@drawable/list_item_selected" android:state_pressed="false" android:state_selected="true"/>
    <item android:drawable="@android:color/transparent"/>

list_item_selected的位置是: 的 list_item_selected.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#4d8f8471"/>
    <stroke android:width="1dip" android:color="#ffffff" />
</shape>

之后,您可以将此选择器设置为xml中的项目:

<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"        
    android:background="@drawable/list_item_selector" />

因此,您的列表视图将始终具有相同的背景角,并且列表视图的项目背景将没有角落,并将在按下或选择状态下更改。

答案 11 :(得分:0)

您正在为textview和listview背景设置list_selector。仅将list_selector用于listview,如果您也希望在textview上悬停效果,则创建另一个不包含<corners android:radius="10dp"属性的list_selector_textview。

答案 12 :(得分:0)

试试这个

custom_rounded_list.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#ff2521"
        android:endColor="#2f5511"
        android:angle="270"/>
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
    <corners
        android:bottomRightRadius="7dp"
        android:bottomLeftRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp" />
</shape>

您的列表视图:

<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/mylst"
    android:background="@drawable/custom_rounded_list" />

答案 13 :(得分:0)

将此drawable xml用于曲线形状列表视图,并将背景设置为列表视图或任何布局:

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

            <padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
        </shape>

答案 14 :(得分:0)

修改ListView,如下所示。添加list_bg作为ListView的背景同时为listView的顶部和底部指定一些填充,否则列表中的第1个和最后一个项目将与显示矩形角的圆角重叠

<ListView
    android:id="@+id/listView"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@drawable/list_bg"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:fastScrollEnabled="true"
    android:choiceMode="singleChoice" />

答案 15 :(得分:0)

试试这个 Reference Android:带圆角的ListView

首先,我们需要列表条目背景的drawable: 对于列表中间的条目,我们不需要圆角,因此在drawable文件夹“list_entry_middle.xml”中创建一个xml,其中包含以下内容:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
  <shape>
        <stroke android:width="1px" android:color="#ffbbbbbb" />
  </shape>
</item>
<item android:bottom="1dp" android:left="1dp" android:right="1dp">
 <shape >
       <solid android:color="#ffffffff" />
 </shape>
</item>
</layer-list>

对于圆角,请创建另一个xml,“rounded_corner_top.xml”:

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

<item>
  <shape>
        <stroke android:width="1dp" android:color="#ffbbbbbb" />
        <corners android:topLeftRadius="20dp"
    android:topRightRadius="20dp"
     />
  </shape>
</item>
<item android:top="1dp" android:left="1dp" android:right="1dp" android:bottom="1dp">
 <shape >
       <solid android:color="#ffffffff" />
      <corners android:topLeftRadius="20dp"
    android:topRightRadius="20dp"
     />
 </shape>
 </item>

 </layer-list>

实现底部部分完全相同,只需使用bottomLeftRadius和bottomRightRadius。 (如果列表只有一个条目,也可以创建一个四舍五入的圆角) 为了更好的可用性,还为不同状态提供其他颜色的drawable,列表项可以具有并在drawable文件夹中的另一个xml中引用它们(“selector_rounded_corner_top.xml”),如下所示:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/rounded_corner_top_click"
      android:state_pressed="true" />
    <item android:drawable="@drawable/rounded_corner_top_click"
      android:state_focused="true" />
    <item android:drawable="@drawable/rounded_corner_top" />
</selector>

现在对列表的其他背景执行相同操作。 现在剩下的就是在ListAdapter中分配正确的背景,如下所示:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    //...      
    //skipping the view reuse stuff

   if (position == 0 && entry_list.size() == 1) {
            view.setBackgroundResource(R.drawable.selector_rounded_corner);
        } else if (position == 0) {
            view.setBackgroundResource(R.drawable.selector_rounded_corner_top);
        } else if (position == entry_list.size() - 1) {
            view.setBackgroundResource(R.drawable.selector_rounded_corner_bottom);
        } else {
            view.setBackgroundResource(R.drawable.selector_middle);
        }

       //...
       //skipping the filling of the view
   }

答案 16 :(得分:0)

试试这个: Michel-F非常好solution。 Portzert

public class ClippedListView extends ListView {

    public ClippedListView(Context context) {
        super(context);
    }

    public ClippedListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
        protected void dispatchDraw(Canvas canvas) {
        float radius = 10.0f;
        Path clipPath = new Path();
        RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
        clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
        canvas.clipPath(clipPath);
        super.dispatchDraw(canvas);
    }
}