引言
上期采用ItemDecoration实现了RecyclerView的item间的分割线效果，本期我们就来实现分割线+时间轴的双重效果，在上期的效果之上再进行改动，让我们的RecyclerView具备时间轴效果。具体效果请看下方图：
效果预览
本期效果预览：
时间轴加分割线.jpg
上期效果回顾：
分割线.jpg
传送门
回顾第一篇—> RecyclerView实现瀑布流布局（类似ListView）
回顾第二篇—> RecyclerView实现横向滑动布局
回顾第三篇—> RecyclerView实现ItemDecoration自定义分割线装饰
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();
}
}
第五步：新建装饰类
（1）自定义分割线DividerItemDecoration类（对比前期有改动）
/**
* @data on 2020/9/1 10:56 AM
* @auther ArmStrong
* @describe 装饰类：简单的Recylerview分割线,（高度+颜色）
*/
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
//分割线
private int dividerHeight;
private int mOffsetMagin;
//定制分割线颜色
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));
mOffsetMagin = (int) context.getResources().getDimension(R.dimen.divider_bottom);
}
@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()+mOffsetMagin;
float starty = view.getBottom() + mOffsetMagin;
float stopx = startx + view.getWidth();
float stopy = view.getBottom() + mOffsetMagin;
c.drawLine(startx,starty,stopx,stopy, dividerPaint);
}
}
}
（2）自定义时间轴TimeLineItemDecoration类
/**
* @data on 2020/9/1 12:26 PM
* @auther ArmStrong
* @describe RecyclerView的Item的时间轴效果
*/
public class TimeLineItemDecoration extends RecyclerView.ItemDecoration {
//画布
private Paint mPaint;
//outRect的四个参数————itemView的间距
private float mOffsetLeft;
private float mOffsetRight;
private float mOffsetTop;
private float mOffsetBottom;
//时间轴结点的半径
private float mNodeRadius;
public TimeLineItemDecoration(Context context) {
mPaint = new Paint();
mPaint.setAntiAlias(true); //抗锯齿
mPaint.setColor(Color.RED);
//outRect
mOffsetLeft = context.getResources().getDimension(R.dimen.timeline_item_offset_left);
mOffsetRight = context.getResources().getDimension(R.dimen.timeline_item_offset_right);
mOffsetTop = context.getResources().getDimension(R.dimen.timeline_item_offset_top);
mOffsetBottom = context.getResources().getDimension(R.dimen.timeline_item_offset_bottom);
//圆圈
mNodeRadius = context.getResources().getDimension(R.dimen.timeline_item_node_radius);
}
@Override
public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDraw(c, parent, state);
int childCount = parent.getChildCount();
for ( int i = 0; i < childCount; i++ ) {
View view = parent.getChildAt(i);
float dividerTop = view.getTop() - mOffsetTop;
float dividerLeft = parent.getPaddingLeft();
float dividerBottom = view.getBottom()+mOffsetBottom;
float centerX = dividerLeft + mOffsetLeft / 2;
float centerY = dividerTop + (dividerBottom - dividerTop) / 2;
float upLineTopX = centerX;
float upLineTopY = dividerTop;
float upLineBottomX = centerX;
float upLineBottomY = centerY - mNodeRadius;
//绘制上半部轴线
c.drawLine(upLineTopX,upLineTopY,upLineBottomX,upLineBottomY,mPaint);
float downLineTopX = centerX;
float downLineTopY = centerY + mNodeRadius;
float downLineBottomX = centerX;
float downLineBottomY = dividerBottom;
//绘制上半部轴线
c.drawLine(downLineTopX,downLineTopY,downLineBottomX,downLineBottomY,mPaint);
//绘制时间轴结点
// 结点（实心）
// c.drawCircle(centerX,centerY,mNodeRadius,mPaint);
// 结点（空心）
mPaint.setStyle(Paint.Style.STROKE);
c.drawCircle(centerX,centerY,mNodeRadius,mPaint);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
}
}
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
//设置outRect的四个参数
outRect.left = (int) mOffsetLeft;
outRect.right = (int) mOffsetRight;
outRect.top = (int) mOffsetTop;
outRect.bottom = (int) mOffsetBottom;
}
}
第六步：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分割线
mRecyclerView.addItemDecoration(new TimeLineItemDecoration(this)); //time时间轴
}
}
千夜零一："之前总是看各种博客学习东西，现在我想用博客记录下我的学习脚步，好东西也需要分享，索取和给予是相互的。以后会尽量日更的！目标完成1001篇博客哈哈。”
如果觉得对你有所帮助，请不要吝啬你的点赞，有问题也可以在下方评论区留言哦，关注我一起学习吧～
