RecyclerView没有默认的分割线,需要自己绘制,接下来我会为大家绘制三种线:水平线、竖直线、和网格线。

废话少说,马上开车!!!

---------------------------------------------华丽的分割线------------------------------------------------------------

水平线实现:在原来的代码中添加

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

即可实现分割线,不过默认的分割线颜色个人感觉有点不太漂亮,大家看图说话:

0818b9ca8b590ca3270a3433284dd417.png

想要改变分割线的颜色只能在theme中添加该属性

@drawable/divider_bg

然后在drawable中添加背景色

android:shape="rectangle">

android:centerColor="#ffff0000"

android:endColor="#ffff0000"

android:startColor="#ffff0000"

android:type="linear" />

为了看起来更亮眼我全部设置成了骚红色,来大家看效果图:

0818b9ca8b590ca3270a3433284dd417.png

看一下gridview和瀑布流的效果:

0818b9ca8b590ca3270a3433284dd417.png

---------------------------------------------华丽的分割线------------------------------------------------------------

竖直线:和水平线同样的道理只需要改动一点代码即可只需要把vertical改成horizontal即可。

mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL));

看效果图:

0818b9ca8b590ca3270a3433284dd417.png

---------------------------------------------华丽的分割线------------------------------------------------------------

网格线:大家估计该注意到问题了,像gridView网格状的该怎么搞啊其实有个很简单的方法,写一个水平的然后在写一个竖直的不就ok了嘛。。。

mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL));

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

这是一种偷懒的方法,效果嘛就只能呵呵了,大家看效果图:

0818b9ca8b590ca3270a3433284dd417.png

丑丑丑。。。

---------------------------------------------华丽的分割线------------------------------------------------------------

网格线的优雅写法:其实想解决这个问题,没办法只有看源码了,源码分析我就不带大家分析了,大家有兴趣的自己可以ctrl+鼠标左键自行查看,我这里的思路是:重写ItemDecoration类,同时绘制水平和竖直线,当然了为了保证下面的线不能超过你的内容,需要加以判断有多少行多少列。。。具体怎么实现的,代码奉上:(感谢一下dn学院的ricky老师)

public class DividerGridViewItemDecoration extends RecyclerView.ItemDecoration {

private Drawable mDivider;

private int[] attrs = new int[]{android.R.attr.listDivider};

public DividerGridViewItemDecoration(Context context) {

TypedArray typedArray = context.obtainStyledAttributes(attrs);

mDivider = typedArray.getDrawable(0);

typedArray.recycle();

}

@Override

public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

drawVertical(c, parent);

drawHorizontal(c, parent);

}

private void drawHorizontal(Canvas c, RecyclerView parent) {

// 绘制水平间隔线

int childCount = parent.getChildCount();

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

View child = parent.getChildAt(i);

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

int left = child.getLeft() - params.leftMargin;

int right = child.getRight() + params.rightMargin;

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

int bottom = top + mDivider.getIntrinsicHeight();

mDivider.setBounds(left, top, right, bottom);

mDivider.draw(c);

}

}

private void drawVertical(Canvas c, RecyclerView parent) {

//绘制垂直间隔线(垂直的矩形)

int childCount = parent.getChildCount();

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

View child = parent.getChildAt(i);

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

int left = child.getRight() + params.rightMargin;

int right = left + mDivider.getIntrinsicWidth();

int top = child.getTop() - params.topMargin;

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

mDivider.setBounds(left, top, right, bottom);

mDivider.draw(c);

}

}

@Override

@Deprecated

public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {

// 四个方向的偏移值

int right = mDivider.getIntrinsicWidth();

int bottom = mDivider.getIntrinsicHeight();

if (isLastColum(itemPosition, parent)) {//是否是最后一列

right = 0;

}

if (isLastRow(itemPosition, parent)) {//是最后一行

bottom = 0;

}

outRect.set(0, 0, right, bottom);

}

/**

* 是否是最后一行

*/

private boolean isLastRow(int itemPosition, RecyclerView parent) {

int spanCount = getSpanCount(parent);

RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();

//有多少列

if (layoutManager instanceof GridLayoutManager) {

int childCount = parent.getAdapter().getItemCount();

int lastRowCount = childCount % spanCount;

//最后一行的数量小于spanCount

if (lastRowCount == 0 || lastRowCount < spanCount) {

return true;

}

}

return false;

}

/**

* 判断是否是最后一列

*/

private boolean isLastColum(int itemPosition, RecyclerView parent) {

RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();

//有多少列

if (layoutManager instanceof GridLayoutManager) {

int spanCount = getSpanCount(parent);

if ((itemPosition + 1) % spanCount == 0) {

return true;

}

}

return false;

}

private int getSpanCount(RecyclerView parent) {

RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();

if (layoutManager instanceof GridLayoutManager) {

GridLayoutManager lm = (GridLayoutManager) layoutManager;

int spanCount = lm.getSpanCount();

return spanCount;

}

return 0;

}

}

然后添加一下代码即可优雅的实现网格效果的线

DividerGridViewItemDecoration dividerGridViewItemDecoration = new DividerGridViewItemDecoration(this);

mRecyclerView.addItemDecoration(dividerGridViewItemDecoration);

效果图走起:

0818b9ca8b590ca3270a3433284dd417.png

---------------------------------------------华丽的分割线------------------------------------------------------------

下一节还是带领大家继续处理recyclerView的相关问题,还望大家支持。。。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐