RecyclerView分割线

最新推荐文章于 2024-04-06 12:01:43 发布
最新推荐文章于 2024-04-06 12:01:43 发布
阅读量314 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bobo89455100/article/details/53709955
版权

RecyclerView分割线实现

本章博客用到的知识点，我用截图的方式来说，项目中详细的备注

1、demo目录介绍，如图

这里写图片描述

2、绘制Item间的间隔（可绘制），可以通过RecyclerView.addItemDecoration(ItemDecoration decoration)这个方法进行设置，其实Main主程序也就这些代码如图

这里写图片描述

  • 代码
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

public class MainActivity extends Activity {

    private RecyclerView recy_view;
    private String[] data ={"我是熊大","我是熊大","我是熊大","我是熊大","我是熊大","我是熊大","我是熊大","我是熊大","我是熊大","我是熊大"};
    private ViewHoderAdaapters adaapters;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recy_view= (RecyclerView)findViewById(R.id.recy_view);
        LinearLayoutManager LM = new LinearLayoutManager(this);
        recy_view.setLayoutManager(LM);

        //样式一，对应类DividerItemDecoration01
        //recy_view.addItemDecoration(new DividerItemDecoration01(this,LinearLayoutManager.HORIZONTAL));

        //样式二,对应类DividerItemDecoration02
       recy_view.addItemDecoration(new DividerItemDecoration02(this, LinearLayoutManager.HORIZONTAL, R.drawable.style02));


        adaapters = new ViewHoderAdaapters(MainActivity.this,data);
        recy_view.setAdapter(adaapters);

    }
![这里写图片描述](http://img.blog.csdn.net/20161018151322280)}
  • MainActivity布局
    这里写图片描述

样式怎么定义的?我这里和大家分享三种（建议下在demo运行运行起来在看）

第一种：在布局中添加一个view，这是最方便的*，这种方法不需要用到上面代码中的ItemDecoration（）方法，直接运行项目即可

布局效果如下

这里写图片描述

MainActivity中无需引用，在运行demo时屏蔽下面代码

这里写图片描述

运行效果
这里写图片描述

第二种：运用RecycleView的ItemDecoration（）方法来绘制分割线，这个方法比较繁琐，不建议使用

1、首先你要定义一个你想要的样式

这里写图片描述

2、在我们自定义ItemDecoration时，我们需要继承RecyclerView.ItemDecoration，我们RecyclerView在进行绘制的时候会进行绘制Decoration,那么会去调用onDraw和onDrawOver方法，那么这边我们其实只要去重写onDraw和getItemOffsets这两个方法就可以实现啦。然后LayoutManager会进行Item布局的时候，会去调用getItemOffset方法来计算每个Item的Decoration合适的尺寸，如图：

这里写图片描述

3、因为我们这个方法需要用到一个自定义的style。然后通过android.R.attr.*获取到定义的样式。

这里写图片描述

4、我们定义好了样式，再来定义一对布局的方向。用来判断我们传递过来的布局方向（也就是分割线的方向）

    //获取布局的方向
    public static final int HORIZONTAL = LinearLayoutManager.HORIZONTAL;

    public static final int VERTICAL = LinearLayoutManager.VERTICAL;

    //可以延长的
    private Drawable mDivider;

    private int mOrientation;

5、构造方法，用来获取主类传递过来的参数和上下文

    //添加一个构造方法
    public DividerItemDecoration01(Context context, int orientation) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        //添加一个判断方向的方法。来进行方向赋值
        setOrientation(orientation);
    }

6、上面有个setorientation(方向)，用来检验传递过来的方法，如果传递的不是符合要求的两个方法，就提示，传递信息有错误。如果正确就把方向赋值给对象mOrientation 

/方向的判断
    private void setOrientation(int orientation) {
        if (orientation != HORIZONTAL && orientation != VERTICAL) {
            throw new IllegalArgumentException("你传递的方向参数好像有问题");
        }
        //方向赋值给对象mOrientation;
        mOrientation = orientation;
    }

7、重写onDraw()方法。来判断绘制的是横向还是竖向。

    @Override
    public void onDraw(Canvas c, RecyclerView parent) {
    //来判断绘制的是横向还是竖向。
        if (mOrientation == VERTICAL) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

8、第7步的时候，创建了两个绘制方法，用来绘制分割线，这里有个重点，就是左偏和右偏移

这里写图片描述

  • 代码
    /**
     * 绘制横向 item 分割线
     * @param parent
     */
    private void drawHorizontal(Canvas c, RecyclerView parent) {
        //左右的间距 ，left就是距离父类边界的距离，right同理
        final int left = parent.getPaddingLeft()+10;
        final int right = parent.getWidth() - parent.getPaddingRight()-10;
        //获取item数据的长度
        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);
        }
    }
  /**
     * 绘制纵向 item 分割线
     * @param parent
     */
    private void drawVertical(Canvas c, RecyclerView parent) {
        //左右的间距 ，top就是距离父类顶边界的距离，bottom是距离父类底部的边界距离
        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);
        }
    }

9、最后一步，重新getItemOffsets（）方法，自己可以修改下下面的参数。看看会有什么情况发生。

 /*
    * 获取分割线尺寸
    * getItemOffsets 中为 outRect 设置的4个方向的值，将被计算进所有 decoration 的尺寸中，而这个尺寸，被计入了 RecyclerView 每个 item view 的 padding 中
    * */
    public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
        if (mOrientation == VERTICAL) {
            //在这个地方，我们才获取
            outRect.set(0, 0, 0,  mDivider.getIntrinsicWidth());
        }else{
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
        }
    }

10、最后打开MainActivity中我屏蔽的样式一代码，并且把item布局中view屏蔽掉。

        //样式一，对应类DividerItemDecoration01
        recy_view.addItemDecoration(new DividerItemDecoration01(this,LinearLayoutManager.HORIZONTAL));

11、效果图：
这里写图片描述

第三种：同样运用RecycleView的ItemDecoration（）方法来绘制分割线，但是我们不需要去写style样式，而我们用的样式资源是从主类中传递过来的。如下图

这里写图片描述

既然样式是从MainActivity中传递过来的，所以引用也肯定不一样。哪里不一样，如图所示：

这里写图片描述

好吧剩下的代码就和方法二中的一样了

样式二代码

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;

/**
 * Created by ENZ on 2016/10/15.
 */

public class DividerItemDecoration02 extends RecyclerView.ItemDecoration {
    //获取布局的方向
    public static final int HORIZONTAL = LinearLayoutManager.HORIZONTAL;

    public static final int VERTICAL = LinearLayoutManager.VERTICAL;


    //可以延长的
    private Drawable mDivider;

    private int mOrientation;


    //方向的判断
    private void setOrientation(int orientation) {
        if (orientation != HORIZONTAL && orientation != VERTICAL) {
            throw new IllegalArgumentException("你传递的方向参数好像有问题");
        }
        //方向赋值给对象mOrientation;
        mOrientation = orientation;
    }

    /**
     * 自定义分割线
     *
     * @param context
     * @param orientation 列表方向
     * @param drawableId  分割线图片
     */
    public DividerItemDecoration02(Context context, int orientation, int drawableId) {
        mDivider = ContextCompat.getDrawable(context, drawableId);
        setOrientation(orientation);
    }

    //重写onDraw（）方法。并且根据传递过来的方向来进行绘制分割线
    @Override
    public void onDraw(Canvas c, RecyclerView parent) {
        if (mOrientation == VERTICAL) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }

    /**
     * 绘制横向 item 分割线
     * @param parent
     */
    private void drawHorizontal(Canvas c, RecyclerView parent) {
        //左右的间距 ，left就是距离父类边界的距离，right同理
        final int left = parent.getPaddingLeft()+10;
        final int right = parent.getWidth() - parent.getPaddingRight()-10;
        //获取item数据的长度
        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);
        }
    }
    /**
     * 绘制纵向 item 分割线
     * @param parent
     */
    private void drawVertical(Canvas c, RecyclerView parent) {
        //左右的间距 ，top就是距离父类顶边界的距离，bottom是距离父类底部的边界距离
        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);
        }
    }

    /*
    * 获取分割线尺寸
    * getItemOffsets 中为 outRect 设置的4个方向的值，将被计算进所有 decoration 的尺寸中，而这个尺寸，被计入了 RecyclerView 每个 item view 的 padding 中
    * */
    public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
        if (mOrientation == VERTICAL) {
            //在这个地方，我们才获取
            outRect.set(0, 0, 0,  mDivider.getIntrinsicWidth());
        }else{
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
        }
    }
}

效果图：
这里写图片描述

注意，我们这里有个很大的坑。我的布局明明是居中的。例如方法一和方法二自定义分割线时总是靠左，而我要的效果是居中效果，如下：

这里写图片描述

那什么造成的呢？又有什么办法去解决呢？我现在去查资料，下章就是解决靠在这个问题

demo:http://download.csdn.net/detail/bobo8945510/9657198

bobo89455100
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
RecyclerView底部分割线去除的方法
01-05
概述 之前我们抛出了一个问题就是RecyclerView在显示列表的时候，最底部也就是最后一个Item后面还有分割线，这大大影响界面的美观。这篇文章就是解决这个问题的。 自定义分割线 通过分析源码后我们发现没有相关的方法来处理这一需求，所以只能自定义分割线，通过上一篇文章的基础我们知道肯定是修改getItemOffsets。那我们的思路是让这个方法在到最后一个条目时，不偏移分割线的间隙。同时也要修改onDraw方法，让他不再绘制最后一条分割线。 private void drawHorizontal(Canvas c, RecyclerView parent, State state) {
RecyclerView Item 的分割线 距边框距离问题总结
WangZy的博客
12-19 1865
哈， 首先  今天Design 提了一个需求，废话少说~~！ 上图 分割线 在中间显示，距离左边 边距是66px 右边依然是66px。 刚开始接到这个需求，感觉还阔以，挺简单的，但是在实现中 又有问题了， 怎么设置 都不能距离左右 有间距，上网上查依然没有解决方案。 网上有设置一个 View 然后给这个 View 设置宽高 颜色 但是 在我这里不能用， 因为我是自定义的控件 直接继承...
关于RecyclerView的瀑布流 分割线左右间距问题
易帜¤的博客
11-20 197
RecyclerView 瀑布流 左右间距 设置问题
RecyclerView系列之（2）：为RecyclerView添加分隔线
AuthFailure的博客
09-02 1619
一. 理解ListView和RecyclerView中的ChildView 在讲为Item加入分割线本质的前，先来介绍，认识一下ChildView，也就是平时我们用到的ListView，RecyclerView中的getChildAt(int position)这个返回的ChildView是哪一部分？到底是哪一部分呢？一开始的时候，我理解错了，但是经过下面两张图这么一比较，你就明白了：
Android 最强RecyclerView分割线XRecyclerViewDivider重磅来袭！！
黄小梁的博客
06-02 2935
目录前言一、分割线绘制原理二、XRecyclerViewDivider的功能1.LinearLayoutManager2.GridLayoutManager2.StaggeredGridLayoutManager总结 前言 沉浸在Android前端这几年里，接触最多的业务就是RecyclerView列表展示数据了，每次写到需要分割线时都是到网上copy，有时候一些分割线又不能满足需求，只能在布局上做文章。 虽然这样可以实现需求，但是总感觉这样写会写很多重复的代码，这边添加了View，那边又设置paddin
万能RecyclerView分割线
08-31
【万能RecyclerView分割线】是Android开发中一个常见的需求，它允许开发者自定义RecyclerView中各个item之间的分隔线样式，以提高界面的视觉效果和用户体验。在本文中，我们将深入探讨如何创建和使用万能...
Recyclerview分割线偏左解决方案
10-19
Recyclerview分割线偏左解决方案，有两个办法！ 方法一：修改item布局。 方法二：修改适配器item引用方式
RecyclerView自定义分割线
01-20
RecyclerView已经推出很久了，由于其高度的可定制性现在被广泛应用，我们常用的功能，如：单条目更新，LayoutManager实现各种炫酷的排列效果，定义个性分割线等 今天学习如何定制一个自己的分割线，让你的列表看起来...
RecyclerView万能分割线
09-16
添加自定义分割线：可自定义分割线drawable 1 mRecyclerView.addItemDecoration(new RecyclerViewDivider( 2 mContext, LinearLayoutManager.VERTICAL, R.drawable.divider_mileage)); 添加自定义分割线：可自定义...
RecyclerView添加分割线
Makenna's World
04-01 4155
RecyclerView 并没有 divider 属性，但是我们可以通过 RecyclerView 的 addItemDecoration() 来添加分割线，该方法参数为 RecyclerView.ItemDecoration。 介绍 当 RecyclerView 添加 ItemDecoration 后，RecyclerView 在绘制每个 item 的时候，会去绘制 decorator，也就是会调用 ItemDecoration 的 onDraw() 和 onDrawOver() 方法。 Recyc
了解RecyclerView的分割线
NightRain的博客
04-18 1601
RecyclerView有自带的分割线，有时候自带分割线满足不了项目需要，随即参考网络其他大佬的文章，自己写一个万能分割线。列表或者表格，一个类满足！
【Android -- UI 开发】Recyclerview 的通用分隔线
Kevin Learn Android
04-12 1604
ItemDecoration 是 RecyclerView 的一个抽象静态内部类，负责装饰 Item 视图，例如添加间距、高亮或者分组边界等。
【Android】RecyclerView添加分割线最易懂解析
热门推荐
Jarvis的博客
08-27 1万+
【Android】RecyclerView添加分割线最易懂解析 RecyclerView可以说是开发一个Android程序必不可少的一个控件，给它的item添加分割线也是一个几乎都会有的需求。但是，相对于曾经的ListView，RecyclerView添加分割线可就麻烦多了。网上的其他教程感觉又不是很好理解。所以一直也没有好好看个知识点。 平时自己一般都是直接给item下面加一个横线。每个it...
android中RecyclerView的简单使用（二）——分割线
2401_83817603的博客
03-24 811
如果你觉得这些内容对你有帮助，可以扫码领取！！！！
RecyclerView去除底部分割线
fanenqian的博客
11-16 6387
RecyclerView 默认的分割线DividerItemDecoration 在最后一个item显示的时候也会有一个分割线，影响应用整体的美观。 通过DividerItemDecoration 源码发现分割线的行数是通过childCount来判断的，而childCount正是我们分割线的个数，那去除最后一个分割线也就简单了。 public void drawHori
Android RecyclerView —— 自定义分割线
ITRenj的博客
06-17 3450
Android RecyclerView —— 自定义分割线 Android RecyclerView —— 基本使用 Android RecyclerView —— 适配器封装探索 前面说了 RecyclerView 的基本使用以及对适配器的封装，但是在使用 ListView 时，有 dividerHeight 和 divider 属性用来设置分割线的高度和颜色(Drawable)，但是在 Re...
android中RecyclerView的简单使用（二）——分割线，渣本逆袭大厂面经分享
最新发布
2401_84148911的博客
04-06 996
i < 100;i++) {list.add("数据 " + i);//将适配器放到recyclerView上//创建线性布局管理者对象//通过manager对象设置显示方向//将管理者对象给recyclerView// 声明两个属性，接收传递过来的数据// 创建一个构造方法，将数据和activity的上下文传递过来// 返回显示的条目个数@Override@Override// 将父类的对象强转为子类对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值