转载请标明出处:
http://blog.csdn.net/lmj623565791/article/details/49734867;
本文出自:【kirk.wang的博客】
相信RecyclerView大家已经不陌生了,最近公司项目中查看物流信息需要用到时光轴,所以在完成此功能之后写下了这一篇文章,希望对大家有所帮助.
- 需求
- 要达到的效果
- 实现功能
需求
首先为什么要做时光轴,用它来体现有什么好处,现在比较大的电商平台如天猫,京东,物流信息都是使用时光轴,能让用户清晰的看到自己所购买的商品的最新动态,和经过了哪些地方。
要达到的效果:
如下的效果图
实现功能
代码块
先准备好数据设置到RecyclerView
private void initData() {
mDatas = new ArrayList<DateText>();
mDatas.add(new DateText("20140710", "【上海市】快件已到达上海"));
mDatas.add(new DateText("20120209", "【上海市】快件已到达上海浦东新区"));
mDatas.add(new DateText("20140526", "【上海市】快件已到达上海浦东新区软件园"));
mDatas.add(new DateText("20140623", "【上海市】因放假原因,快件等工作日发出"));
mDatas.add(new DateText("20140121", "【上海市】快件已到达上海浦东软件园已发出"));
mDatas.add(new DateText("20140916", "【上海市】快件已到达上海浦东软件园已签收"));
mDatas.add(new DateText("20140712", "【上海市】快件已到达上海浦东软件园已发出"));
mDatas.add(new DateText("20140710", "【上海市】快件已到达上海浦东已收入"));
initView();
}
private void initView() {
recyclerView = (RecyclerView) findViewById(R.id.timeline_recyclerview);
init();
}
private void init() {
// 将数据按照时间排序
DateComparator comparator = new DateComparator();
Collections.sort(mDatas, comparator);
mTimeLineAdapter = new TimeLineAdapter(this, mDatas);
LayoutManager mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, true);
recyclerView.setAdapter(mTimeLineAdapter);
recyclerView.setLayoutManager(mLayoutManager);
recyclerView.setItemAnimator(new DefaultItemAnimator());
recyclerView.setHasFixedSize(true);
}
适配器需要做的工作
@Override
public void onBindViewHolder(TimeLineViewHolder holder, int position) {
//当数据为最后一个时,说明没有要显示的数据了,将线隐藏掉
if (position == (getItemCount() - 1)) {
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(0, 10, 0, 0);
holder.iv_point.setLayoutParams(layoutParams);
holder.iv_point.setSelected(true);
//将下标为最后一个的上方的线头隐藏掉
holder.line.setVisibility(View.INVISIBLE);
} else {
holder.line.setVisibility(View.VISIBLE);
holder.iv_point.setSelected(false);
}
holder.date_time.setText(TimeFormat.format("yyyy.MM.dd", mDatas.get(position).getDate()));
holder.date_content.setText(mDatas.get(position).getText());
}
布局文件
<?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" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.8"
android:gravity="center_horizontal"
android:orientation="vertical" >
<View
android:id="@+id/v_line"
android:layout_width="0.5dp"
android:layout_height="0dp"
android:layout_weight="0.6"
android:background="#7F7C7C" />
<ImageView
android:id="@+id/iv_point"
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/point_selector" />
<View
android:layout_width="0.5dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#7F7C7C" />
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="8dp"
android:layout_weight="9" >
<TextView
android:id="@+id/txt_date_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:maxLines="2"
android:text="sad"
android:textColor="#5296C5"
android:textSize="14sp" />
<TextView
android:id="@+id/txt_date_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txt_date_content"
android:layout_below="@+id/txt_date_content"
android:text="asdssfgdg"
android:textColor="#FC6802"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
指示点用选择器达到最新的信息高亮
详情见源码