引言
今天带大家认识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分割线
}
}
运行效果
解析:DividerItemDecoration(新建)
(1)继承与重写
自定义的分割线ItemDecoration类需要继承自RecyclerView.ItemDecoration。并重写其getItemOffsets和onDraw方法。(PS:还有个重写方法onDrawOver,但这里没用到。)
(2)三个方法分别实现了什么?有什么作用
1⃣️getItemOffsets():设置ItemView的内嵌偏移长度。
到底什么是“内嵌偏移长度”呢?着就不得不说到️getItemOffsets方法中的参数了,它有四个参数,分别是outRect, view, parent, state具体请看下文的参数分析。其中的outRect就跟我们说的“内嵌偏移长度”密切相关。请看图:
其实,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篇博客哈哈。”
如果觉得对你有所帮助,请不要吝啬你的点赞,有问题也可以在下方评论区留言哦,关注我一起学习吧~