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文件


    

    


(2)子布局:R.layout.case7_item_fruit.xml

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



        

        
    

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



    2dp

第三步:创建实体类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{
    private List fruitList;


    public FruitHorRecyclerVIewAdapter(List 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 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分割线
    }
}

运行效果

RecyclerView使用ItemDecoration实现好看的自定义分割线样式(三)_第1张图片
ItemDecoration.gif

解析:DividerItemDecoration(新建)

(1)继承与重写

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


(2)三个方法分别实现了什么?有什么作用

1⃣️getItemOffsets():设置ItemView的内嵌偏移长度。

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


RecyclerView使用ItemDecoration实现好看的自定义分割线样式(三)_第2张图片
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篇博客哈哈。”

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

你可能感兴趣的:(RecyclerView使用ItemDecoration实现好看的自定义分割线样式(三))