Android RecyclerView使用ItemDecoration刻画时间线/时间轴/时光轴timeline
在Android开发中时间线/时间轴/时光轴现在很常见,尤其涉及到进度、物流信息、进展和时态发展的图表信息等,时间线/时间轴/时光轴生动表现这一类需求。
在RecyclerView的基础上,我使用ItemDecoration刻画一条在RecyclerView左侧的时间线/时间轴/时光轴。运行结果如图:
在顶部显示一张与众不同的icon,区别表示事件或者进展已经完成。
下面是代码。
RVActivity.java是本例运行的Activity:
package zhangphil.test;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class RVActivity extends AppCompatActivity {
RecyclerViewAdapter mAdapter;
private ArrayList<Integer> mItems;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.rv_activity);
mItems = new ArrayList<>();
for (int i = 0; i < 5; i++) {
mItems.add(i);
}
RecyclerView mRecyclerView = findViewById(R.id.recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(layoutManager);
mAdapter = new RecyclerViewAdapter();
mRecyclerView.setAdapter(mAdapter);
mRecyclerView.addItemDecoration(new RVItemDecoration(getApplicationContext()));
}
private class RecyclerViewAdapter extends RecyclerView.Adapter<MyVH> {
@NonNull
@Override
public MyVH onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.rv_item, parent, false);
return new MyVH(view);
}
@Override
public void onBindViewHolder(@NonNull MyVH holder, int position) {
holder.title.setText("时间:" + position);
holder.content.setText("事件进度 -> " + mItems.get(position));
holder.indicator_icon.setImageResource(position == 0 ? R.mipmap.ic_launcher : R.drawable.ic_launcher_background);
}
@Override
public int getItemCount() {
return mItems.size();
}
}
private class MyVH extends RecyclerView.ViewHolder {
public TextView title;
public TextView content;
public ImageView indicator_icon;
public MyVH(View itemView) {
super(itemView);
title = itemView.findViewById(R.id.title);
content = itemView.findViewById(R.id.content);
indicator_icon = itemView.findViewById(R.id.indicator_icon);
}
}
private class RVItemDecoration extends RecyclerView.ItemDecoration {
private Paint mPaint;
public RVItemDecoration(Context context) {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(2); //时间轴线的宽度。
mPaint.setColor(Color.BLUE); //时间轴线的颜色。
}
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View view = parent.getChildAt(i);
//int index = parent.getChildAdapterPosition(view);
float left = dip2px(getApplicationContext(), 14 + 10);
float bottom = view.getBottom();
c.drawLine(left, dip2px(getApplicationContext(), (50 - 20) / 2), left, bottom, mPaint);
}
}
}
public static int dip2px(Context context, float dpValue) {
float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}
其中R.layout.rv_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
其实就只有一个Android的RecyclerView。
RecyclerView的Adapter用到的item布局R.layout.rv_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="14dp"
android:paddingRight="14dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/indicator_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:scaleType="centerInside"
android:src="@drawable/ic_launcher_background" />
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="@android:color/holo_blue_bright"
android:gravity="left|center_vertical"
android:text="时间"
android:textColor="@android:color/white"
android:textSize="26dp" />
</LinearLayout>
<TextView
android:id="@+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:layout_marginLeft="30dp"
android:text="事件进度"
android:textColor="@android:color/darker_gray"
android:textSize="14dp" />
</LinearLayout>