使用RecyclerView实现时间轴效果

来源：互联网发布：销售数据周报模板xls 编辑：程序博客网时间：2024/06/06 18:40

项目中需要使用时间轴效果，直接使用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>

好啦，齐活

阅读全文

3 0