指示器時間軸在外賣、購物類的APP裏會經常用到，效果大概就像下面這樣，看了網上很多文章，大都是自己繪製，太麻煩，其實通過ListView就可以實現。
在Activity關聯的佈局文件activity_main.xml中放置一個ListView，代碼如下。由於這個列表只是用於展示信息，並不需要用戶去點擊，所以將其clickable屬性置爲false；爲了消除ListView點擊產生的波紋效果，我們設置其listSelector屬性的值爲透明；我們不需要列表項之間的分割線，所以設置其divider屬性的值爲null。
activity_main
<ListView android:id="@+id/lvTrace" android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="false" android:divider="@null" android:dividerHeight="0dp" android:listSelector="@android:color/transparent"/> |
每個列表項的佈局stepview_adapter.xml，代碼如下。由於時間軸的點和線都位於item佈局中，爲了使線是連續的，所以設置上面ListView的dividerHeight屬性值爲0dp，即垂直方向每個列表項都是緊挨着的。在item的佈局中，我們先使用LinearLayout將佈局分成左右兩個部分，左邊就是時間軸的佈局，右邊是內容的佈局。
內容的佈局，物流信息是一個RelativeLayout，爲了不使兩個列表項的文本靠得太近，在RelativeLayout中設置其paddingBottom和paddingTop屬性。
時間軸的佈局，時間軸的佈局也是一個RelativeLayout，爲了使時間軸的圓點和顯示時間的文本對齊，我們需要在圓點之上再放置一條豎線，所以整體的佈局就是 線 - 點 - 線。爲了讓線可以正好對準圓點的中心，我們讓線和點都水平居中，即android:layout_centerHorizontal="true"
stepview_adapter
<?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:gravity="center" android:orientation="horizontal"> <RelativeLayout android:id="@+id/rlTimeline" android:layout_width="wrap_content" android:layout_marginLeft="15dp" android:layout_height="match_parent"> <TextView android:id="@+id/tvTopLine" android:layout_width="1.2dp" android:layout_height="12dp" android:layout_centerHorizontal="true" android:background="#999"/> <TextView android:id="@+id/tvDot" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tvTopLine" android:layout_centerHorizontal="true" android:background="@drawable/state_get_huankuan"/> <TextView android:layout_width="1.2dp" android:id="@+id/tvLine" android:layout_height="match_parent" android:layout_below="@id/tvDot" android:layout_centerHorizontal="true" android:background="#999"/> </RelativeLayout> <RelativeLayout android:id="@+id/rlCenter" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="6dp" android:paddingRight="10dp" android:layout_marginLeft="20dp" android:paddingTop="12dp"> <TextView android:id="@+id/step_tv_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_marginRight="6dp" android:text="10-20 22:22" android:textColor="#cccccc" android:textSize="12sp"/> <TextView android:id="@+id/step_tv_des" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_marginRight="15dp" android:textStyle="bold" android:layout_toLeftOf="@+id/step_tv_time" android:text="fffffff"/> <TextView android:id="@+id/step_tv_des_below" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/step_tv_des" android:layout_marginTop="5dp" android:text="" android:textColor="#999999"/> </RelativeLayout></LinearLayout><br><br><br> |
定義一個Adapter，代碼如下。由於第一行的物流信息的顯示形式和其他的不一樣，所以要注意第一行的item的時間軸佈局中最上面的線不顯示
public
class StepViewAdapter extends BaseAdapter { privateContext context; privateList<StepViewBean> traceList =
newArrayList<>(); privatestatic
final int
TYPE_FINISH = 101; privatestatic
final int
TYPE_UNFINISH = 102; privatestatic
final int
TYPE_ERROR = 103; publicStepViewAdapter(Context context, List<StepViewBean> traceList) { this.context = context; this.traceList = traceList; } @Override publicint
getCount() { returntraceList.size(); } @Override publicStepViewBean getItem(intposition) { returntraceList.get(position); } @Override publiclong
getItemId(intposition) { returnposition; } @Override publicView getView(intposition, View convertView,
ViewGroup parent) { ViewHolder holder; final StepViewBean trace = getItem(position); if(convertView !=
null) { holder = (ViewHolder) convertView.getTag(); }else
{ holder =new
ViewHolder(); convertView = LayoutInflater.from(context).inflate(R.layout.stepview_adapter,
parent, false); holder.tvTopLine = (TextView) convertView.findViewById(R.id.tvTopLine); holder.tvDot = (TextView) convertView.findViewById(R.id.tvDot); holder.tvLine = (TextView) convertView.findViewById(R.id.tvLine); holder.tvAcceptStation = (TextView) convertView.findViewById(R.id.step_tv_des); holder.tvAcceptTime = (TextView) convertView.findViewById(R.id.step_tv_time); holder.tvAcceptStationBelow = (TextView) convertView.findViewById(R.id.step_tv_des_below); holder.rlTimeline = (RelativeLayout) convertView.findViewById(rlTimeline); convertView.setTag(holder); } if(position == 0) { holder.tvTopLine.setVisibility(View.INVISIBLE); } if(position == traceList.size() - 1) { holder.tvLine.setVisibility(View.GONE); }else
{ holder.tvLine.setVisibility(View.VISIBLE); } switch(getItemViewType(position)) { caseTYPE_FINISH: holder.tvAcceptStation.setTextColor(context.getResources().getColor(R.color.crt_completed)); holder.tvDot.setBackgroundResource(R.drawable.state_get_huankuan); holder.tvLine.setBackgroundColor(context.getResources().getColor(R.color.crt_completed)); holder.tvTopLine.setBackgroundColor(context.getResources().getColor(R.color.crt_completed)); break; caseTYPE_UNFINISH: holder.tvAcceptStation.setTextColor(context.getResources().getColor(R.color.crt_uncompleted_text)); holder.tvDot.setBackgroundResource(R.drawable.state_normal_huankuan); holder.tvLine.setBackgroundColor(context.getResources().getColor(R.color.crt_text_hint_color)); break; caseTYPE_ERROR: holder.tvTopLine.setVisibility(View.VISIBLE); holder.tvAcceptStation.setTextColor(context.getResources().getColor(R.color.crt_error_text)); holder.tvDot.setBackgroundResource(R.drawable.state_lose_huankuan); break; } holder.tvAcceptTime.setText(trace.getAcceptTime()); holder.tvAcceptStation.setText(trace.getAcceptStation()); if(!TextUtils.isEmpty(trace.getAcceptStation())) { holder.tvAcceptStationBelow.setText(trace.getAcceptStationBelow()); } returnconvertView; } @Override publicint
getItemViewType(intid) { if(id==(traceList.size()-2)){ returnTYPE_ERROR; } if(id==(traceList.size()-1)){ returnTYPE_UNFINISH; } returnTYPE_FINISH; } staticclass
ViewHolder { publicTextView tvAcceptTime, tvAcceptStation, tvLine, tvAcceptStationBelow; publicTextView tvTopLine, tvDot; publicRelativeLayout rlTimeline; }} |
爲了可以看到佈局的效果，在Activity中模擬一些假數據。需要定義一個實體類Trace，它有兩個屬性，acceptTime和acceptStation，代碼如下：
StepViewBean
public
class StepViewBean { /** 時間 */ privateString acceptTime; /** 描述 */ privateString acceptStation; /** 描述下方*/ privateString acceptStationBelow; publicString getAcceptStationBelow() { returnacceptStationBelow; } publicvoid
setAcceptStationBelow(String acceptStationBelow) { this.acceptStationBelow = acceptStationBelow; } publicStepViewBean() { } publicStepViewBean(String acceptTime, String acceptStation) { this.acceptTime = acceptTime; this.acceptStation = acceptStation; } publicStepViewBean(String acceptTime, String acceptStation, String acceptStationBelow) { this.acceptTime = acceptTime; this.acceptStation = acceptStation; this.acceptStationBelow = acceptStationBelow; } publicString getAcceptTime() { returnacceptTime; } publicvoid
setAcceptTime(String acceptTime) { this.acceptTime = acceptTime; } publicString getAcceptStation() { returnacceptStation; } publicvoid
setAcceptStation(String acceptStation) { this.acceptStation = acceptStation; }} |
MainActivity
public
class MainActivity extends AppCompatActivity { privateList<StepViewBean> traceList =
newArrayList<>(); @Override protectedvoid
onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ListView lvTrace= (ListView) findViewById(R.id.lvTrace); traceList.add(newStepViewBean("10-20 22: 22","您的訂單已打印完畢","招商銀行（9979）
小明\n支付金額 100000")); traceList.add(newStepViewBean("10-20 22:22","您已提交定單，等待系統確認")); traceList.add(newStepViewBean("10-20 22:24","您的訂單已揀貨完成")); traceList.add(newStepViewBean("10-20 22:24","掃描員已經掃描")); traceList.add(newStepViewBean("10-20 22:24","您的訂單已揀貨完成")); traceList.add(newStepViewBean("10-20 22:24","感謝你在京東購物，歡迎你下次光臨！")); StepViewAdapter adapter =new
StepViewAdapter(this, traceList); lvTrace.setAdapter(adapter); }} |
GitHub地址：https://github.com/peiniwan/StepView