Android ListView物流获取追踪功能实现
2016-03-24 12:15
801 查看
ListView 控件可使用四种不同视图显示项目。通过此控件,可将项目组成带有或不带有列标头的列,并显示伴随的图标和文本。
最近在网上看到时间轴的布局效果,尝试按照这个原理,实现物流跟踪的效果,目前已经实现了,效果如下图
该效果完全是使用ListView来实现了,下面我们来看一下是如何实现的
(一):布局ListView并编写Item布局
首先需要在布局上面编写ListView:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.bobo.trace.MainActivity" > <ListView android:id="@+id/lv_trace" android:layout_width="match_parent" android:layout_height="match_parent" android:divider="@drawable/trace_divider" android:dividerHeight="1dp"></ListView> </RelativeLayout>
然后编写ListView的item布局:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout android:id="@+id/rl_trace_item" android:layout_width="match_parent" android:layout_height="wrap_content"> <View android:id="@+id/v_up_line" android:layout_width="2.5dp" android:layout_height="10dp" android:background="@color/mgrey" android:layout_marginLeft="22dp"></View> <ImageView android:id="@+id/iv_state" android:layout_width="16dp" android:layout_height="16dp" android:src="@drawable/circle" android:layout_marginTop="10dp" android:layout_marginLeft="15dp"/> <TextView android:id="@+id/tv_trace_info" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_toRightOf="@id/iv_state" android:layout_marginLeft="20dp" android:text="@string/test_trace_info" android:textColor="@android:color/black" android:textSize="13sp"/> <LinearLayout android:id="@+id/ll_trace_phone" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="3dp" android:layout_toRightOf="@id/iv_state" android:layout_marginLeft="20dp" android:orientation="horizontal" android:layout_below="@id/tv_trace_info"> <TextView android:id="@+id/tv_phone_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/phone_label" android:textColor="@android:color/black" android:textSize="13sp"/> <TextView android:id="@+id/tv_phone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:text="@string/test_phone" android:textColor="@android:color/black" android:textSize="13sp"/> </LinearLayout> <TextView android:id="@+id/tv_trace_time" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="3dp" android:layout_toRightOf="@id/iv_state" android:layout_marginLeft="20dp" android:text="@string/test_trace_info" android:textColor="@android:color/black" android:textSize="13sp" android:layout_below="@id/ll_trace_phone"/> <View android:id="@+id/v_down_line" android:layout_width="2.5dp" android:layout_height="45dp" android:background="@color/mgrey" android:layout_below="@id/iv_state" android:layout_marginLeft="22dp"></View> </RelativeLayout> </RelativeLayout>
下面我们来看一下item效果:
在上面的效果图中,我们就可以看出,在这个item布局中,左边是”线-图片-线“的布局,显示一个时间轴,右边显示相应的信息,包括物流信息,联系电话和时间;我们知道,在时间轴中,第一个点是不需要上面那个线的,最后一个点是不需要下面那个线的,所以,这个的处理就需要我们在Adapter中进行相应的处理。
(二):自定义Adapter
下面我们就需要自定义Adapter来填充数据和进行View处理。
当然,在编写Adapter之前,我们需要一个javabean来保存相应的信息。
Trace.java:
package com.bobo.beans; public class Trace { private boolean isHead; private String info; private String phone; private String time; public Trace(boolean isHead, String info, String phone, String time) { super(); this.isHead = isHead; this.info = info; this.phone = phone; this.time = time; } public boolean isHead() { return isHead; } public void setHead(boolean isHead) { this.isHead = isHead; } public String getInfo() { return info; } public void setInfo(String info) { this.info = info; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } public String getTime() { return time; } public void setTime(String time) { this.time = time; } }
下面我们就可以愉快的编写Adapter类了:
package com.bobo.adapters; import java.util.ArrayList; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import com.bobo.beans.Trace; import com.bobo.trace.R; public class TraceAdapter extends BaseAdapter { private ArrayList<Trace> tradeLists = null; private LayoutInflater inflater; private Context context; public TraceAdapter(ArrayList<Trace> tradeLists,Context context){ this.tradeLists = tradeLists; this.context = context; this.inflater = LayoutInflater.from(context); } @Override public int getCount() { // TODO Auto-generated method stub return tradeLists == null ? 0 : tradeLists.size(); } @Override public Object getItem(int position) { // TODO Auto-generated method stub return tradeLists.get(position); } @Override public long getItemId(int position) { // TODO Auto-generated method stub return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { Holder holder; if(convertView == null){ convertView = inflater.inflate(R.layout.trace_item, null); holder = new Holder(); holder.v_up_line = (View)convertView.findViewById(R.id.v_up_line); holder.iv_state = (ImageView)convertView.findViewById(R.id.iv_state); holder.tv_trace_info = (TextView)convertView.findViewById(R.id.tv_trace_info); holder.ll_trace_phone = (LinearLayout)convertView.findViewById(R.id.ll_trace_phone); holder.tv_phone = (TextView)convertView.findViewById(R.id.tv_phone); holder.tv_trace_time = (TextView)convertView.findViewById(R.id.tv_trace_time); holder.v_down_line = (View)convertView.findViewById(R.id.v_down_line); convertView.setTag(holder); }else{ holder = (Holder)convertView.getTag(); } if(tradeLists.get(position).isHead()){ holder.v_up_line.setVisibility(View.GONE); //holder.iv_state = (ImageView)convertView.findViewById(R.id.iv_state); holder.tv_trace_info.setText(tradeLists.get(position).getInfo()); holder.tv_phone.setText(tradeLists.get(position).getPhone()); holder.tv_trace_time.setText(tradeLists.get(position).getTime()); holder.v_down_line.setVisibility(View.VISIBLE); }else if(tradeLists.size() == (position+1)){ holder.tv_trace_info.setText(tradeLists.get(position).getInfo()); holder.ll_trace_phone.setVisibility(View.GONE); holder.tv_trace_time.setText(tradeLists.get(position).getTime()); holder.v_down_line.setVisibility(View.GONE); }else{ holder.tv_trace_info.setText(tradeLists.get(position).getInfo()); holder.ll_trace_phone.setVisibility(View.GONE); holder.tv_trace_time.setText(tradeLists.get(position).getTime()); holder.v_down_line.setVisibility(View.VISIBLE); } return convertView; } class Holder{ View v_up_line; ImageView iv_state; TextView tv_trace_info; LinearLayout ll_trace_phone; TextView tv_phone; TextView tv_trace_time; View v_down_line; } }
这样,我们的Adapter就已经适配完成,下面我们在Activity中实验一下。
(三):Activity实验:
package com.bobo.trace; import java.util.ArrayList; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.widget.ListView; import com.bobo.adapters.TraceAdapter; import com.bobo.beans.Trace; public class MainActivity extends Activity { private ListView lv_trace; private ArrayList<Trace> tradeLists = new ArrayList<Trace>(); private TraceAdapter ta; private Context context; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); context = MainActivity.this; initView(); } private void initView(){ lv_trace = (ListView)findViewById(R.id.lv_trace); initData(); ta = new TraceAdapter(tradeLists, context); lv_trace.setAdapter(ta); } private void initData(){ tradeLists.add(new Trace(true, "商家已从广东发货", "15253157943", "2016-03-16 13:30:43")); tradeLists.add(new Trace(false, "货物正在配送", "", "2016-03-16 18:30:43")); tradeLists.add(new Trace(false, "货物已到达天津转运中心", "", "2016-03-17 13:30:43")); tradeLists.add(new Trace(false, "货品已到济南货运站", "", "2016-03-18 13:30:43")); tradeLists.add(new Trace(false, "货物已送达济南高新区站点", "", "2016-03-19 13:30:43")); } }
这样运行之后,我们就会发现,ListView的selector宽度是占满全屏的,这样,我们就需要编写一个inset来调整ListView的selector。
trace_divider.xml:
<?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="50dp" android:drawable="@color/mgrey"> </inset>
这样,我们的物流追踪界面就算是完成了,很简单。
关于ListView物流获取追踪功能实现就给大家介绍到这里,希望对大家有所帮助!
您可能感兴趣的文章:
相关文章推荐
- 完美实现Android ListView中的TextView的跑马灯效果
- android上改变listView的选中颜色
- Delphi7中Listview的常用功能汇总
- Delphi控件ListView的属性及使用方法详解
- 如何追踪入侵者
- 使用Google工具栏追踪 Blog 留言
- android中ListView数据刷新时的同步方法
- Android提高之ListView实现自适应表格的方法
- Android中实现水平滑动(横向滑动)ListView示例
- PHPLog php 程序调试追踪工具
- C#实现ListView选中项向上或向下移动的方法
- Listview加载的性能优化是如何实现的
- C#实现listview Group收缩扩展的方法
- C# listview添加combobox到单元格的实现代码
- ListView 百分比进度条(delphi版)
- Android listview多视图嵌套多视图
- ListView Adapter优化 实例
- Android用ListView显示SDCard文件列表的小例子
- Adapter实现ListView带多选框等状态的自定义控件的注意事项
- asp.net ListView 数据绑定