Android RecyclerView使用ItemDecoration刻画时间线/时间轴/时光轴timeline

系统管理员 2023-10-17 21:28 13阅读 0赞

**Android RecyclerView使用ItemDecoration刻画时间线/时间轴/时光轴timeline**

在Android开发中时间线/时间轴/时光轴现在很常见，尤其涉及到进度、物流信息、进展和时态发展的图表信息等，时间线/时间轴/时光轴生动表现这一类需求。  
在RecyclerView的基础上，我使用ItemDecoration刻画一条在RecyclerView左侧的时间线/时间轴/时光轴。运行结果如图：  
![20180521211026535][]  
  
在顶部显示一张与众不同的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>

[20180521211026535]: https://img-blog.csdn.net/20180521211026535