android recycleView 简单使用二---分割线

转自：https://www.jianshu.com/p/b46a4ff7c10a

RecyclerView没有像之前ListView提供divider属性，而是提供了方法

recyclerView.addItemDecoration()

其中ItemDecoration需要我们自己去定制重写，一开始可能有人会觉得麻烦不好用，最后你会发现这种可插拔设计不仅好用，而且功能强大。

ItemDecoration类主要是三个方法：

public void onDraw(Canvas c, RecyclerView parent, State state)
public void onDrawOver(Canvas c, RecyclerView parent, State state)
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state)

官方源码虽然都写的很清楚，但还不少小伙伴不知道怎么理解，怎么用或用哪个方法，下面我画个简单的图来帮你们理解一下。

首先我们假设绿色区域代表的是我们的内容，红色区域代表我们自己绘制的装饰，可以看到：

图1：代表了getItemOffsets(),可以实现类似padding的效果

图2：代表了onDraw(),可以实现类似绘制背景的效果，内容在上面

图3：代表了onDrawOver()，可以绘制在内容的上面，覆盖内容

注意上面是我个人从应用角度的看法，事实上实现上面的效果可能三个方法每个方法都可以实现。只不过这种方法更好理解。

下面是我们没有添加任何ItemDecoration的界面

padding

从前面的图可以看到实现这个效果，需要重写getItemOffsets方法。

//分割线
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        //outRect.bottom、left,right,top设置为int值
        outRect.bottom =100 ;
        outRect.left =50 ;
    }
}

分割线

分割线在app中是经常用到的，用ItemDecoration怎么实现呢，其实上面padding改成1dp就实现了分割线的效果，但是分割线的颜色只能是背景灰色，所以不能用这种方法。

要实现分割线效果需要 getItemOffsets()和 onDraw()2个方法，首先用 getItemOffsets给item下方空出一定高度的空间（例子中是1dp），然后用onDraw绘制这个空间

//分割线
public class DividerItemDecoration extends RecyclerView.ItemDecoration {

    private Context mContext;   //上下文
    private int dividerHeight;  //分割线的高度
    private Paint mPaint;   //画笔

    //自定义构造方法，在构造方法中初始化一些变量
    public DividerItemDecoration(Context context){
        mContext = context;
        dividerHeight = 2;   //context.getResources().getDimensionPixelSize(R.dimen.divider_height);
        mPaint = new Paint();
        mPaint.setColor(context.getResources().getColor(R.color.colorAccent));  //设置颜色
    }

    //设置padding
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        //outRect.bottom、left,right,top设置为int值，设置每一项的padding
        outRect.bottom =dividerHeight ;
    }

    //画图
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);

        //获取item个数
        int childCount = parent.getChildCount();
        //左右是固定的
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight() ;
        //高度
        for (int i = 0; i < childCount - 1; i++) {
            View view = parent.getChildAt(i);
            float top = view.getBottom();
            float bottom = view.getBottom() + dividerHeight;
            //画图
            c.drawRect(left, top, right, bottom, mPaint);
        }

    }
}

效果如下：

标签

现在很多电商app会给商品加上一个标签，比如“推荐”，“热卖”，“秒杀”等等，可以看到这些标签都是覆盖在内容之上的，这就可以用onDrawOver()来实现，我们这里简单实现一个有趣的标签

public class LeftAndRightTagDecoration extends RecyclerView.ItemDecoration {

    private int tagWidth;  //标签的宽度
    private Paint leftPaint;  //左边的画笔
    private Paint rightPaint;  //右边的画笔
    public LeftAndRightTagDecoration(Context context){
        leftPaint =new Paint();
        leftPaint.setColor(context.getResources().getColor(R.color.colorPrimary));
        rightPaint = new Paint();
        rightPaint.setColor(context.getResources().getColor(R.color.colorOrange));　　　　　//上面是画笔的初始化，和设置颜色，下面是标签宽度的获取
        tagWidth = context.getResources().getDimensionPixelSize(R.dimen.tag_width);
    }

    //绘制标签
    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
　　　　　　
        int childCount = parent.getChildCount();
        for(int i=0;i<childCount;i++){
            View child = parent.getChildAt(i);
            int pos = parent.getChildAdapterPosition(child);
            boolean isLeft = pos%2==0;
            if(isLeft){
                float left = child.getLeft();
                float right = left+tagWidth;
                float top = child.getTop();
                float bottom =child.getBottom();
                c.drawRect(left,top,right,bottom,leftPaint);
            }else{
                float right = child.getRight();
                float left = right-tagWidth;
                float top = child.getTop();
                float bottom =child.getBottom();
                c.drawRect(left,top,right,bottom,rightPaint);
            }

        }

    }
}

效果如下

组合

不要忘记的是ItemDecoration是可以叠加的

//ItemDecoration分割线
 mRecycleView.addItemDecoration(new DividerItemDecoration(this));
//标签
 mRecycleView.addItemDecoration(new LeftAndRightTagDecoration(this));

效果如下：

section

这个是什么呢，先看下我们实现的效果

一看这个就很熟悉吧，手机上面的通讯录联系人，知乎日报都是这样效果，可以叫分组，也可以叫section分块 先不管它叫什么。

这个怎么实现呢？ 其实和实现分割线是一样的道理 ，只是不是所有的item都需要分割线，只有同组的第一个需要。

我们首先定义一个接口给activity进行回调用来进行数据分组和获取首字母

public interface DecorationCallback {

        long getGroupId(int position);

        String getGroupFirstLine(int position);
    }

然后再来看我们的ItemDecoration

public class SectionDecoration extends RecyclerView.ItemDecoration {

    private DecorationCallback callback;
    private TextPaint textPaint;  //文字画笔
    private Paint paint;  //普通画笔
    private int topGap;  //padding_top
    private Paint.FontMetrics fontMetrics;

    //自定义构造函数
    public SectionDecoration(Context context, DecorationCallback decorationCallback) {
        Resources res = context.getResources();
        this.callback = decorationCallback;

        //画笔
        paint = new Paint();
        paint.setColor(res.getColor(R.color.colorPrimary));

        //文字画笔,样式设置
        textPaint = new TextPaint();
        textPaint.setTypeface(Typeface.DEFAULT_BOLD);  //加粗
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(70);  //字体大小
        textPaint.setColor(Color.BLACK);  //字体颜色
        textPaint.getFontMetrics(fontMetrics);  //字体的材质
        textPaint.setTextAlign(Paint.Align.LEFT);  //字体的向左对齐

        fontMetrics = new Paint.FontMetrics();
        topGap = res.getDimensionPixelSize(R.dimen.sectioned_top);//32dp Padding——top的值

    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);

        //视图的位置
        int pos = parent.getChildAdapterPosition(view);
        long groupId = callback.getGroupId(pos);
        if (groupId < 0) return;
        if (pos == 0 || isFirstInGroup(pos)) {//同组的第一个才添加padding
            outRect.top = topGap;
        } else {
            outRect.top = 0;
        }

    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);

        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View view = parent.getChildAt(i);
            int position = parent.getChildAdapterPosition(view);
            long groupId = callback.getGroupId(position);
            if (groupId < 0) return;
            //分组的文本
            String textLine = callback.getGroupFirstLine(position).toUpperCase();
            if (position == 0 || isFirstInGroup(position)) {
                float top = view.getTop() - topGap;
                float bottom = view.getTop();
                c.drawRect(left, top, right, bottom, paint);//绘制矩形
                c.drawText(textLine, left, bottom, textPaint);//绘制文本
            }
        }
    }

    //是否是一个组
    private boolean isFirstInGroup(int pos) {
        if (pos == 0) {
            return true;
        } else {
            long prevGroupId = callback.getGroupId(pos - 1);
            long groupId = callback.getGroupId(pos);
            return prevGroupId != groupId;
        }
    }
    //接口实现分组的依据
    public interface DecorationCallback {

        long getGroupId(int position);

        String getGroupFirstLine(int position);
    }
}

可以看到和divider实现一样，都是重写getItemOffsets()和onDraw()2个方法，不同的是根据数据做了处理。

在Activity中使用

mRecycleView.addItemDecoration(new SectionDecoration(this, new SectionDecoration.DecorationCallback() {    @Override    public long getGroupId(int position) {        return Character.toUpperCase(homeAdapter.mTitles[position].charAt(0));    }

@Override    public String getGroupFirstLine(int position) {        return homeAdapter.mTitles[position].substring(0, 1).toUpperCase();    }}));

干净舒服，不少github类似的库都是去adapter进行处理 侵入性太强 或许ItemDecoration是个更好的选择，可插拔，可替换。

到这里细心的人就会发现了，header不会动啊，我手机上的通讯录可是会随的滑动而变动呢，这个可以实现么？

StickyHeader

这个东西怎么叫我也不知道啊 粘性头部？英文也有叫 pinned section 取名字真是个麻烦事。

先看下我们简单实现的效果

stickyheader

首先一看到图，我们就应该想到header不动肯定是要绘制item内容之上的，需要重写onDrawOver()方法，其他地方和section实现一样。

public class PinnedSectionDecoration extends RecyclerView.ItemDecoration {
    private static final String TAG = "PinnedSectionDecoration";

    private DecorationCallback callback;
    private TextPaint textPaint;
    private Paint paint;
    private int topGap;
    private Paint.FontMetrics fontMetrics;

    public PinnedSectionDecoration(Context context, DecorationCallback decorationCallback) {
        Resources res = context.getResources();
        this.callback = decorationCallback;

        paint = new Paint();
        paint.setColor(res.getColor(R.color.colorAccent));

        textPaint = new TextPaint();
        textPaint.setTypeface(Typeface.DEFAULT_BOLD);
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(80);
        textPaint.setColor(Color.BLACK);
        textPaint.getFontMetrics(fontMetrics);
        textPaint.setTextAlign(Paint.Align.LEFT);
        fontMetrics = new Paint.FontMetrics();
        topGap = res.getDimensionPixelSize(R.dimen.sectioned_top);

    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        int pos = parent.getChildAdapterPosition(view);
        long groupId = callback.getGroupId(pos);
        if (groupId < 0) return;
        if (pos == 0 || isFirstInGroup(pos)) {
            outRect.top = topGap;
        } else {
            outRect.top = 0;
        }
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        int itemCount = state.getItemCount();
        int childCount = parent.getChildCount();
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        float lineHeight = textPaint.getTextSize() + fontMetrics.descent;

        long preGroupId, groupId = -1;
        for (int i = 0; i < childCount; i++) {
            View view = parent.getChildAt(i);
            int position = parent.getChildAdapterPosition(view);

            preGroupId = groupId;
            groupId = callback.getGroupId(position);
            if (groupId < 0 || groupId == preGroupId) continue;

            String textLine = callback.getGroupFirstLine(position).toUpperCase();
            if (TextUtils.isEmpty(textLine)) continue;

            int viewBottom = view.getBottom();
            float textY = Math.max(topGap, view.getTop());
            if (position + 1 < itemCount) { //下一个和当前不一样移动当前
                long nextGroupId = callback.getGroupId(position + 1);
                if (nextGroupId != groupId && viewBottom < textY ) {//组内最后一个view进入了header
                    textY = viewBottom;
                }
            }
            c.drawRect(left, textY - topGap, right, textY, paint);
            c.drawText(textLine, left, textY, textPaint);
        }

    }

}

好了，现在发现ItemDecoration有多强大了吧！ 当然还有更多就需要你自己去发现了。

原文地址：https://www.cnblogs.com/xuqp/p/9798704.html

时间： 2024-11-05 17:34:22

android recycleView 简单使用二---分割线的相关文章

Android自定义用户控件简单范例(二)

对于完全由后台定制的控件,并不是很方便其他人的使用,因为我们常常需要看到控件放到xml界面上的效果,并根据效果进行布局的调整,这就需要一个更加标准的控件制作流程: 我们的自定义控件和其他的控件一样,应该写成一个类,而这个类的属性是是有自己来决定的. 我们要在res/values目录下建立一个attrs.xml的文件,并在此文件中增加对控件的属性的定义. 使用AttributeSet来完成控件类的构造函数,并在构造函数中将自定义控件类中变量与attrs.xml中的属性连接起来. 在自定义控件类中使

Android 实现简单音乐播放器（二）

在Android 实现简单音乐播放器(一)中,我介绍了MusicPlayer的页面设计. 现在,我将解析MusicPlayer的功能实现,就讲一些主要的点和有趣的细节,结合MainActivity.java代码进行说明(写出来可能有点碎……一向不太会总结^·^). 一.功能菜单 在MusicPlayer中,我添加了三个菜单: search(搜索手机中的音乐文件,更新播放列表). clear(清除播放列表……这个功能是最初加进去的,后来改进之后,已经没什么实际意义). exit(退出). menu

Android -- 经验分享（二）

目录                                                                                   自定义两个View进行画图,让其各自刷新重绘 Activity设为singleTop,长按Home键启动的问题 Activity设为singleTop,长按Home键启动问题 Android软键盘挡住界面 Android使用AsyncTask下载图片,最好使用WeakReference Android webview 加载网络视

android产品研发（二十一）--&gt;UI优化

转载请标明出处:一片枫叶的专栏 上一篇文章中我们讲解了android产品研发过程中的代码Review.通过代码Review能够提高产品质量,增强团队成员之间的沟通,提高开发效率,所以良好的产品开发迭代过程中,代码Review是一个必不可少的步骤.那么如何进行代码Review呢?我们主要讲解了团队成员之间的代码Review,代码lint检查,开发规范等方面的知识点,更多关于代码Review相关的知识可参考我的:android产品研发(二十)–>代码Review 本文我们将讲解一下android U

Android学习路线（二十一）运用Fragment构建动态UI——创建一个Fragment

你可以把fragment看成是activity的模块化部分,它拥有自己的生命周期,接受它自己的输入事件,你可以在activity运行时添加或者删除它(有点像是一个"子activity",你可以在不同的activity中重用它).本课将向你展示如何使用Support Libaray继承 Fragment 类来让你的应用能够兼容正在运行Android 1.6的设备. 提示: 如果你决定你的应用需求的最低API级别是11或者更高,那么你不需要使用Support Library,你可以直接使用

Android bluetooth介绍（二）： android 蓝牙代码架构及其uart 到rfcomm流程

关键词:蓝牙blueZ  UART  HCI_UART H4  HCI  L2CAP RFCOMM  版本:基于android4.2之前版本 bluez内核:linux/linux3.08系统:android/android4.1.3.4作者:xubin341719(欢迎转载,请注明作者,请尊重版权谢谢)欢迎指正错误,共同学习.共同进步!!一.Android Bluetooth Architecture蓝牙代码架构部分(google 官方蓝牙框架) Android的蓝牙系统,自下而上包括以下一些

Android多线程分析之二：Thread的实现

Android多线程分析之二:Thread 罗朝辉 (http://blog.csdn.net/kesalin) CC 许可,转载请注明出处 在前文<Android多线程分析之一:使用Thread异步下载图像>中演示了如何使用 Thread 处理异步事务.示例中这个 Java Thread 类都是位于 Framework 层的类,它自身是通过 JNI 转调 dalvik 里面的 Thread 相关方法实现的.因此要分析 Androd 中的线程,就需要分析这两层中的与线程相关的代码,这就是本文要

Android NDK 简单介绍、工具安装、环境配置

NDK全称:Native Development Kit. 1.NDK是一系列工具的集合. * NDK提供了一系列的工具,帮助开发人员高速开发C(或C++)的动态库,并能自己主动将so和java应用一起打包成apk.这些工具对开发人员的帮助是巨大的. * NDK集成了交叉编译器,并提供了对应的mk文件隔离平台.CPU.API等差异,开发者仅仅须要简单改动mk文件(指出"哪些文件须要编译"."编译特性要求"等),就能够创建出so. * NDK能够自己主动地将so和Ja

Android Framework 记录之二

原文地址:http://blog.csdn.net/banketree/article/details/24982021 接着上次的记录,续写. 23.services目录 文件 描述 class AlarmManagerService extends IAlarmManager.Stub { //定时管理服务 public class AppOpsService extends IAppOpsService.Stub {  // 程序选项服务 public class AppsLaunchFa