RecyclerView使用ItemDecoration实现好看的自定义分割线样式（三）

引言

今天带大家认识RecyclerView中的ItemDecoration，从字面意思大家能看出它是干嘛的了吗？没错，它就是用来为RecyclerView的每个Item做很多炫酷好看效果的装饰类。让我们一起来学习如何用RecyclerView的ItemDecoration类实现自定义分割线吧，话不多说，走你！

传送门

回顾第一篇—> RecyclerView实现瀑布流布局（类似ListView）

回顾上一篇—> RecyclerView实现横向滑动布局

RecycylerView与ListView的区别请走1号传送门！

介绍

本期主题：【使用RecycleView实现自定义item间的分割线】

Tips：之前看的很多博客系列版的都是需要在上一篇的基础上改，如果系列的篇幅过多，就显得很是冗余，而且代码不独立往往需要从头看起，所以我想要将功能独立出来，使得每篇博客的代码都能独立编译，因此每个功能我都会将完整的代码贴出来，以遍我们一起学习和交流。

此外，我会在最后的解析中区别本期与前期，对改动作出解析。

用法

第一步：添加相关依赖（app下build.gradle）

//RecyclerView
implementation 'com.android.support:recyclerview-v7:27.1.1'

第二步：布局文件

（1）主布局：activity的xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".blog.Case21"
    android:orientation="vertical">
    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="Recyclerview瀑布流布局示例"
        app:titleTextColor="@color/white"
        android:background="@color/green"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

（2）子布局：R.layout.case7_item_fruit.xml

形式：左边图片 + 右边文字

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="horizontal"
        android:padding="5dp"
        tools:ignore="MissingConstraints">

        <ImageView
            android:id="@+id/fruit_image"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/fruit_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@color/black"
            android:textSize="20sp" />
    </LinearLayout>

（3）分割线高度设置：dimens.xml（没有的需要在values文件夹下新建，主要用于设置尺寸等属性）

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="divider_height">2dp</dimen>
</resources>

第三步：创建实体类Fruit（为RecyclerView填充数据使用）

/**
 * @data on 2020/8/27 9:47 PM
 * @auther  ArmStrong
 * @describe  
 */
public class Fruit {
    private String name;
    private int imageId;

    public Fruit(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }
}

第四步：创建RecyclerView的适配器类

/**
 * @data on 2020/8/29 11:17 AM
 * @auther
 * @describe
 */
public class FruitHorRecyclerVIewAdapter extends RecyclerView.Adapter<FruitHorRecyclerVIewAdapter.MyViewHolder>{
    private List<Fruit> fruitList;


    public FruitHorRecyclerVIewAdapter(List<Fruit> fruitList) {
        this.fruitList = fruitList;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.case7_item_hor_fruit,parent,false);
        final MyViewHolder myViewHolder = new MyViewHolder(itemView);
        return myViewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        Fruit horItem = fruitList.get(position);
        holder.fruitHorImage.setImageResource(horItem.getImageId());
        holder.fruitHorName.setText(horItem.getName());
        holder.fruitView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int positon = holder.getAdapterPosition();
                Fruit fruit = fruitList.get(positon);
                Toast.makeText(v.getContext(),"hor："+"你点击了"+fruit.getName(),Toast.LENGTH_SHORT).show();
            }
        });
    }
    public static class MyViewHolder extends RecyclerView.ViewHolder{
        View fruitView;

        //图片
        public ImageView fruitHorImage;
        //标题
        public TextView fruitHorName;

        public MyViewHolder(View itemView) {
            super(itemView);
            fruitView = itemView;
            fruitHorImage = itemView.findViewById(R.id.fruit_hor_image);
            fruitHorName = itemView.findViewById(R.id.fruit_hor_name);
        }
    }

    @Override
    public int getItemCount() {
        return fruitList.size();
    }
}

第五步：新建装饰类

/**
 * @data on 2020/9/1 10:56 AM
 * @auther ArmStrong
 * @describe 装饰类：简单的Recylerview分割线,（高度+颜色）
 */
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    //分割线
    private int dividerHeight;

    //定制分割线颜色
    private Paint dividerPaint;

    public DividerItemDecoration(Context context) {

        dividerPaint = new Paint();
        dividerHeight = context.getResources().getDimensionPixelSize(R.dimen.divider_height);
        dividerPaint.setColor(context.getResources().getColor(R.color.black));
    }

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

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
        //画item的布局
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount - 1; i++) {
            View view = parent.getChildAt(i);
            float startx = parent.getPaddingLeft();
            float starty = view.getBottom();
            float stopx = startx + view.getWidth();
            float stopy = view.getBottom();
            c.drawLine(startx,starty,stopx,stopy, dividerPaint);
        }
    }
}

第六步：Activity中使用

public class Case21 extends AppCompatActivity {
    private RecyclerView mRecyclerView;
    private FruitHorRecyclerVIewAdapter adapter;
    private LinearLayoutManager layoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case21);
        mRecyclerView = findViewById(R.id.recyclerView);

        //RecyclerView填充数据
        List<Fruit> mList = new ArrayList();
        for ( int i=1 ; i<20 ; i++){
            mList.add(new Fruit("apple"+i,R.mipmap.apple));
        }

        //横向滑动布局
        adapter = new FruitHorRecyclerVIewAdapter(mList);
        layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(RecyclerView.HORIZONTAL);
        mRecyclerView.setLayoutManager(layoutManager);
        mRecyclerView.setAdapter(adapter);
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        mRecyclerView.addItemDecoration(new DividerItemDecoration(this)); //item分割线
    }
}

运行效果

ItemDecoration.gif

解析：DividerItemDecoration（新建）

（1）继承与重写

自定义的分割线ItemDecoration类需要继承自RecyclerView.ItemDecoration。并重写其getItemOffsets和onDraw方法。（PS:还有个重写方法onDrawOver，但这里没用到。）

（2）三个方法分别实现了什么？有什么作用

1⃣️getItemOffsets（）：设置ItemView的内嵌偏移长度。

到底什么是“内嵌偏移长度”呢？着就不得不说到️getItemOffsets方法中的参数了，它有四个参数，分别是outRect, view, parent, state具体请看下文的参数分析。其中的outRect就跟我们说的“内嵌偏移长度”密切相关。请看图：

item1.png

其实，outRect就是RecyclerView 中的 ItemView 外面包裹着的一个矩形。在上述的代码中，我们为了增加分割线，给outRect的bottom设置为一个dividerHeight分割线的高度，这样就可以使用onDraw方法来绘制我们的分割线了。

然后用画出来的分割线填充进我们outRect出来的部分当然这是ItemDecoration里面来帮我们完成的，我们只需要重写onDraw方法来绘制就可以了！

2⃣️onDraw（）：绘制内容。

该方法含有三个参数，分别是canvas, parent, state。
很明显上面传递了一个Canvas参数对象，所以它拥有了绘制的能力。（不了解canvas的请看下方参数分析）

首先，要得到画的item分割线条数，这就使用到了parent.getChildCount()找到RecyclerView的孩子数，也就是需要画线的条数，然后使用canvas.drawLine()方法拿起画笔画线。这个方法有5个参数，分别是：startx,starty,stopx,stopy, dividerPaint。

具体来分析：在二维空间上画线需要什么？当然是x,y轴，来定义其位置，起点（startx,starty）->终点（stopx,stopy），最后需要什么参数呢？没错：Paint为其填充颜色，在自定义装饰类的构造方法中，我们初始化了Paint对象，并且指定了要画分割线的高度，以及颜色。之后在drawLine（）方法中除了起点终点，再将paint作为参数传进去就OK了！

需要注意的是：在这里每个View的原点（0，0）在其左上角，向右是X轴，向下是Y轴！别搞错了哦～

3⃣️onDrawOver（）：同样是绘制内容，但与onDraw（）的区别是绘制在图层的最上层。

（3）参数分析

OutRect：

是RecyclerView 中的 ItemView 外面包裹着的一个矩形。outRect.set(l,t,r,b)，就是指定每个itemview的paddingLeft，paddingTop， paddingRight， paddingBottom。

View：

是RecyclerView 中的 ItemView，就是每一个孩子布局，从parent中剔除掉outRect后剩下的部分。

Parent：

是RecyclerView中的ItemView包含outRect的所有层。

State：状态。

Canvas：

在一个View上画一些图片、形状或者自定义的文本内容，这里我们都是使用Canvas来实现的，它是一个是供我们进行图形处理的类。

（4）添加装饰类和调用方法顺序：

添加装饰类：（在activity中）

mRecyclerView.addItemDecoration(new DividerItemDecoration(this)); //item分割线

调用方法顺序：
RecyclerView会根据add的顺序依次调用(getItemOffsets->onDraw->onDrawOver)的方法。

千夜零一："之前总是看各种博客学习东西，现在我想用博客记录下我的学习脚步，好东西也需要分享，索取和给予是相互的。以后会尽量日更的！目标完成1001篇博客哈哈。”

如果觉得对你有所帮助，请不要吝啬你的点赞，有问题也可以在下方评论区留言哦，关注我一起学习吧～