RecyclerView(三)——添加分隔线

标签: Material Design RecyclerView
20人阅读 评论(0) 收藏 举报
分类:

RecyclerView中有一个默认的DividerItemDecoration,用于给RecyclerView添加分割线,实现方法如下

recyclerView.addItemDecoration(new DividerItemDecoration(MainActivity.this));//setItemDecoration()方法用于为RecyclerView子项的一些装饰(我个人的理解)
然后翻下DividerItemDecoration的原码


可以看到这个类是继承了RecyclerView.ItemDecoration这个类,并且该类中主要重写了onDraw()和getItemOffset()方法,从这两个方法的名字可以看出一个适用于绘制,一个是用于获取偏移量。

RecyclerView提供的默认的DividerItemDecoration类只能用于绘制线性布局方式的分割线,无法实现网格的分隔线,通过上面的代码可以看出,我们若是自己编写一个类继承RecyclerView.ItemDecoration也是可以实现为RecyclerView绘制分隔线的效果


接下来上代码

MainActivity.java中的代码只截部分


MyGridItemDecoration类

package com.example.lsn2_materialdesign_recyclerview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v4.view.ViewCompat;
import android.support.v7.widget.RecyclerView;
import android.view.View;

public class MyGridItemDecoration extends RecyclerView.ItemDecoration {
    private Drawable mDivider;
    private int[] attrs = new int[]{
            android.R.attr.listDivider
    };
    private int col ;

    public MyGridItemDecoration(Context context, int col){
        TypedArray typedArray = context.obtainStyledAttributes(attrs);
        mDivider = typedArray.getDrawable(0);
        typedArray.recycle();
        this.col = col;
    }



    @Override
    //在getItemOffset()方法中设置了分割线的宽度,之后会在onDraw中进行绘制,这里面会为每一条边设置在画布上显示的位置
    public void onDraw(Canvas c,RecyclerView parent, RecyclerView.State state){
        drawVertical(c, parent);//绘制垂直分隔线
        drawHorizontal(c, parent);//绘制水平分隔线
        super.onDraw(c, parent, state);
    }

    private void drawVertical(Canvas c, RecyclerView parent) {

        int childCount = parent.getChildCount();//获取RecyclerView中子项的数目,然后遍历
        for(int i=0;i<childCount; i++){
            if((i+1) % col != 0){//判断是否为最后一列,最后一列不用画垂直分隔线
                View child = parent.getChildAt(i);
                RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();//获取子项的布局参数

                int top = child.getTop() + params.topMargin;//设置分隔线顶部的位置
                int bottom = child.getBottom() + params.bottomMargin;//设置分隔线底部的位置,绘制的是垂直分隔线,顶部到底部的距离就是分隔线的高度
                int left = child.getRight() - params.rightMargin - 5;//设置分隔线左边的位置,这里我减了个5,为了让分割线不是贴着子项的左边,我在布局文件中没有设置margin。
                int right = left + mDivider.getIntrinsicWidth();//设置分隔线右边的位置,左边到右边的距离就是分隔线的粗细值

                mDivider.setBounds(left, top, right, bottom);//设置绘画的边界
                mDivider.draw(c);
            }
        }
    }

    //水平分隔线
    private void drawHorizontal(Canvas c, RecyclerView parent) {
        //水平分隔线的起始点就是子项的左边的起始点,右边起始点就是子项右边的结束点
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();

        int childCount = parent.getChildCount();
        for(int i=0; i<childCount; i++){
            if(childCount - i > col){//判断是否为最后一行,最后一行不用画水平分隔线
                View child = parent.getChildAt(i);
                RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
                //每个子项的线面会画一条分隔线,因此分隔线上边其实就是子项的底部位置再加上底部的margin,若是在Y轴方向上有偏移量,则也要加上
                int top = child.getBottom() + params.bottomMargin + Math.round(ViewCompat.getTranslationY(child));
                //底部的位置就是分隔线的上边加上分隔线的粗细值
                int bottom = top + mDivider.getIntrinsicHeight();

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


    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state){
        //RecyclerView的子项其实就是一个矩形区域,set方法就是设置了这个矩形区域每个边框线的粗细,参数依次是左、上、右、下
        outRect.set(0, 0, mDivider.getIntrinsicWidth(), mDivider.getIntrinsicHeight());
    }

}

运行结果如下:


其实我们还可以用ItemDecoration来干些别的东西的,这里只是讲了ItemDecoration的简单用法,以后若是有需要在研究别的,若是有什么问题欢迎提问哦

查看评论

RecyclerView实现GridView的时候怎么给两个item中间加分割线

明天天价
  • pengyu1801
  • pengyu1801
  • 2017-06-11 15:26:54
  • 284

RecyclerView添加分割线的简便方法

1、前言刚开始学习RecyclerView的时候我跟着一个视频学的,当时添加分割线是从外面导入一个Java类,然后使用里面的函数来创建分割线的,所以一直以来我都是这样做的。直到前几天才无意中发现,原来...
  • Lindroid20
  • Lindroid20
  • 2017-07-30 22:07:23
  • 12182

Android Recyclerview使用方法

  • 2015年06月25日 14:40
  • 5.99MB
  • 下载

Android使用RecyclerView分隔线问题

自从Google推出了RecyclerView作为ListView功能更加强大的替代品之后,越来越多的APP开始使用这个控件。RecyclerView可以优化程序性能,并且由于功能上的高度解耦,可以无...
  • u013687632
  • u013687632
  • 2016-02-06 21:53:35
  • 2330

RecyclerView设置分隔线的三种方法

就在昨天中午,我在简书上发布了我个人的第一篇技术文档:RecyclerView系列之: RecyclerView系列之(1)为RecyclerView添加Header和Footer,也很有幸,能够得...
  • yancychas
  • yancychas
  • 2017-08-22 20:26:23
  • 6134

RecyclerView系列之二:从源码中分析为RecyclerView添加分割线

今天来解决RecyclerView第二个问题,就是分割线的问题:原生的RecyclerView并没有像ListView那样提供默认的分割线,我们需要自己处理分割线处理方式为继承RecyclerView...
  • Timmy_zzh
  • Timmy_zzh
  • 2016-12-13 17:12:35
  • 698

为RecyclerView添加分隔线

转自:http://www.jianshu.com/p/4eff036360da 就在昨天中午,我在简书上发布了我个人的第一篇技术文档:RecyclerView系列之:RecyclerVie...
  • bsmmaoshenbo
  • bsmmaoshenbo
  • 2017-03-29 16:32:54
  • 262

Android 中为RecyclerView控件添加分隔线

在http://blog.csdn.net/hacker_zhidian/article/details/56292052这边文章中,我们看了一下ListView控件和RecyclerView控件的简...
  • Hacker_ZhiDian
  • Hacker_ZhiDian
  • 2017-02-26 22:39:36
  • 2772

Android RecyclerView添加分割线

recyclerview 分割线的简单封装,随便写的。瞎几把乱搞
  • richardli1228
  • richardli1228
  • 2016-06-19 22:50:18
  • 3430

XRecyclerView分割线多了一个的问题

之前在使用XRecyclerView的实现下拉刷新,上拉加载更多的时候,当数据量较少的时候,最下面一行的数据的分割线多了一个,很是郁闷。如下图 后来看了分割线的源码,发现由于添加分割线的时候把X...
  • u010575303
  • u010575303
  • 2017-06-12 10:00:14
  • 1048
    个人资料
    等级:
    访问量: 1765
    积分: 229
    排名: 33万+
    最新评论