使用RecyclerView实现时间轴

先上效果图

时间轴

下面就是具体的实现步骤

item布局文件

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

Adapter适配器代码

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.activity_timer_test, 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);
        }
    }
}

主布局文件

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

MainActicity

public class TimerTestActivity extends Activity {
    private ArrayList<DataBean> dataList=new ArrayList<>();
    private RecyclerView mMRecyclerView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.timer_test_item);
        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() {
        mMRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        LinearLayoutManager mLayoutManager=new LinearLayoutManager(this);
        //设置方向
        mLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mMRecyclerView.setLayoutManager(mLayoutManager);
        //设置动画
        mMRecyclerView.setItemAnimator(new DefaultItemAnimator());
        //设置adapter
        mMRecyclerView.setAdapter(new TimerAdapter(this,dataList));


    }
}

涉及到的两个圆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>

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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值