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>