使用RecyclerView实现时间轴效果

项目中需要使用时间轴效果，直接使用RecyclerView实现一个

先上图

1、该控件主要是设置item的UI布局，画了个草图如下

由三部分组成，顶部线，中间圆和底部线

详细代码如下

<?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">

    <TextView
        android:id="@+id/tv_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:textSize="10sp" />

    <RelativeLayout
        android:id="@+id/rl_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp">

        <TextView
            android:id="@+id/tv_line_top"
            android:layout_width="1dp"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:background="#00ff00" />

        <TextView
            android:id="@+id/tv_dot"
            android:layout_width="5dp"
            android:layout_height="5dp"
            android:layout_below="@+id/tv_line_top"
            android:layout_centerHorizontal="true"
            android:background="@drawable/dot_choiced" />

        <TextView
            android:id="@+id/tv_line_bottom"
            android:layout_width="1dp"
            android:layout_height="30dp"
            android:layout_below="@+id/tv_dot"
            android:layout_centerHorizontal="true"
            android:background="#00ff00" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp">

        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:textSize="10sp" />

        <TextView
            android:id="@+id/tv_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10sp" />

    </RelativeLayout>


</LinearLayout>

2、主Activity

逻辑

/**
 * @author geqipeng
 * @date 2017/9/6
 */

public class TimerTestActivity extends Activity {
    private ArrayList<DataBean> dataList=new ArrayList<>();
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_timer_test);
        initData();
        initView();
    }
    //添加数据
    private void initData() {
        dataList.add(new DataBean("10月1日","休假第一天","10:00"));
        dataList.add(new DataBean("10月2日","休假第二天","10:00"));
        dataList.add(new DataBean("10月3日","休假第三天","10:00"));
        dataList.add(new DataBean("10月4日","休假第四天","10:00"));
        dataList.add(new DataBean("10月5日","休假第五天","10:00"));
        dataList.add(new DataBean("10月6日","休假第六天","10:00"));
        dataList.add(new DataBean("10月7日","休假第七天","10:00"));
        dataList.add(new DataBean("10月8日","休假第八天","10:00"));

    }

    private void initView() {
        RecyclerView mRecyclerView= (RecyclerView) findViewById(R.id.recycler_view);
        LinearLayoutManager mLayoutManager=new LinearLayoutManager(this);
        //设置方向
        mLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(mLayoutManager);
        //设置动画
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        //设置adapter
        mRecyclerView.setAdapter(new TimerAdapter(this,dataList));


    }
}

布局

<?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.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>

</LinearLayout>

3、Adapter

逻辑

/**
 * @author geqipeng
 * @date 2017/9/6
 */

public class TimerAdapter extends RecyclerView.Adapter<TimerAdapter.MyViewHolder> {
    private Context mContext;
    private ArrayList<DataBean> mDataList;

    public TimerAdapter(Context context, ArrayList<DataBean> dataList) {
        this.mContext = context;
        this.mDataList = dataList;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyViewHolder holder = new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.timer_test_item, null));
        return holder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        DataBean bean = mDataList.get(position);
        if (null == bean) {
            return;
        }
        holder.tv_date.setText(bean.getDate());
        holder.tv_time.setText(bean.getTime());
        holder.tv_desc.setText(bean.getDescribe());
        //处理顶部条目
        if (position == 0) {
            holder.tv_line_top.setVisibility(View.INVISIBLE);
        } else if (position == mDataList.size() - 1) {
            //底部数据
            holder.tv_line_bottom.setVisibility(View.INVISIBLE);
        } else {
            //设置圆点背景
            holder.tv_dot.setBackgroundResource(R.drawable.dot_normal);
        }

    }

    @Override
    public int getItemCount() {
        return mDataList.size();
    }

    class MyViewHolder extends RecyclerView.ViewHolder {

        private final TextView tv_date;
        private final TextView tv_time;
        private final TextView tv_desc;
        private final TextView tv_line_top;
        private final TextView tv_line_bottom;
        private final TextView tv_dot;

        public MyViewHolder(View itemView) {
            super(itemView);
            //日期
            tv_date = (TextView) itemView.findViewById(R.id.tv_date);
            //时间
            tv_time = (TextView) itemView.findViewById(R.id.tv_time);
            //描述
            tv_desc = (TextView) itemView.findViewById(R.id.tv_desc);
            //顶部线
            tv_line_top = (TextView) itemView.findViewById(R.id.tv_line_top);
            //圆点
            tv_dot = (TextView) itemView.findViewById(R.id.tv_dot);
            //底部线
            tv_line_bottom = (TextView) itemView.findViewById(R.id.tv_line_bottom);
        }
    }
}

4、涉及到的两个圆shape文件

dot_choiced

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <size
            android:width="10dp"
            android:height="10dp" />
        <solid android:color="#ff00ff" />
    </shape>

dot_normal

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size
        android:width="10dp"
        android:height="10dp" />
    <solid android:color="#888888" />
</shape>

好啦，齐活