Android控件之使用ListView实现时间轴效果

 更新时间:2016年11月21日 13:48:49   作者:K_Men  
这篇文章主要介绍了Android基础控件之使用ListView实现时间轴效果的相关资料,本文是以查看物流信息为例,给大家介绍了listview时间轴的实现代码,需要的朋友可以参考下

 实现思路:

该View是通过ListView实现的,通过实体两个字段内容content和时间time来展示每个ListItem

时间轴是使用上面一条线(20dp)和中间一个圆(15dp)和下面一条线(40dp)组装成的

在ListView中,设置其分割线为空,并且没有点击效果

效果图:

步骤一:使用xml画出一个灰色的圆点(time_cycle.xml)

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"> 
<solid android:color="#CBCBCB" /> 
<size 
android:width="15dp" 
android:height="15dp" /> 
</shape> 

步骤二:javabean的编写

public class KuaiDi { 
private String content; 
private String time; 
public KuaiDi(String time, String content) { 
this.content = content; 
this.time = time; 
} 
public String getContent() { 
return content; 
} 
public void setContent(String content) { 
this.content = content; 
} 
public String getTime() { 
return time; 
} 
public void setTime(String time) { 
this.time = time; 
} 
}

步骤三:编写子布局(time_item.xml)

<?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="75dp" 
android:orientation="horizontal"> 
<!--线条部分--> 
<LinearLayout 
android:layout_width="wrap_content" 
android:layout_height="match_parent" 
android:gravity="center_horizontal" 
android:orientation="vertical" 
android:paddingLeft="30dp"> 
<View 
android:layout_width="3dp" 
android:layout_height="20dp" 
android:background="#CBCBCB" /> 
<ImageView 
android:layout_width="15dp" 
android:layout_height="15dp" 
android:background="@drawable/time_cycle" /> 
<View 
android:layout_width="3dp" 
android:layout_height="40dp" 
android:background="#CBCBCB" /> 
</LinearLayout> 
<!--文字部分--> 
<LinearLayout 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
android:paddingLeft="30dp" 
android:paddingRight="30dp" 
android:paddingTop="20dp"> 
<TextView 
android:id="@+id/tv_content" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="【广东省中国邮政集团公司深圳市龙华函件中心】已收寄" 
android:textColor="#ABABAB" /> 
<TextView 
android:id="@+id/tv_time" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_below="@id/tv_content" 
android:text="2016-05-03 00:22:36" 
android:textColor="#ABABAB" /> 
</LinearLayout> 
</LinearLayout> 

其效果如图:

步骤四:编写父布局(activity_main.xml)

<?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"> 
<ListView 
android:id="@+id/lv" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:divider="@null" 
android:listSelector="@android:color/transparent" /> 
</RelativeLayout> 

步骤五:编写子布局的适配器(KuaiDiAdapter.java)

public class KuaiDiAdapter extends BaseAdapter { 
//印章数据 
private List<KuaiDi> list; 
private LayoutInflater mInflater; 
public KuaiDiAdapter(Context context, List<KuaiDi> list) { 
this.list = list; 
mInflater = LayoutInflater.from(context); 
} 
@Override 
public int getCount() { 
return list.size(); 
} 
@Override 
public Object getItem(int position) { 
return list.get(position); 
} 
@Override 
public long getItemId(int position) { 
return position; 
} 
@Override 
public View getView(int position, View convertView, ViewGroup parent) { 
if (convertView == null) { 
convertView = mInflater.inflate(R.layout.time_item, null); 
} 
ViewHolder holder = getViewHolder(convertView); 
KuaiDi kd = list.get(position); 
holder.tv_content.setText(kd.getContent()); 
holder.tv_time.setText(kd.getTime()); 
return convertView; 
} 
/** 
* 获得控件管理对象 
* 
* @param view 
* @return 
*/ 
private ViewHolder getViewHolder(View view) { 
ViewHolder holder = (ViewHolder) view.getTag(); 
if (holder == null) { 
holder = new ViewHolder(view); 
view.setTag(holder); 
} 
return holder; 
} 
/** 
* 控件管理类 
*/ 
private class ViewHolder { 
private TextView tv_content, tv_time; 
ViewHolder(View view) { 
tv_content = (TextView) view.findViewById(R.id.tv_content); 
tv_time = (TextView) view.findViewById(R.id.tv_time); 
} 
} 
}

步骤六:在父布局中设置适配器

public class MainActivity extends AppCompatActivity { 
private ListView lv; 
private KuaiDiAdapter adapter; 
private List<KuaiDi> list; 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_main); 
lv = (ListView) findViewById(R.id.lv); 
list =new ArrayList<>(); 
list.add(new KuaiDi("2016-09-18 08:33:50","您的订单开始处理")); 
list.add(new KuaiDi("2016-09-18 08:40:23","您的订单待配货")); 
list.add(new KuaiDi("2016-09-18 08:51:33","您的包裹已出库")); 
list.add(new KuaiDi("2016-09-18 21:12:53","【深圳市龙华函件中心】已收寄")); 
list.add(new KuaiDi("2016-09-18 17:44:20","到达【深圳】")); 
list.add(new KuaiDi("2016-09-18 21:26:51","离开【深圳市龙华函件中心】,下一站【深圳市】")); 
list.add(new KuaiDi("2016-09-18 23:18:21","到达【深圳市处理中心】")); 
list.add(new KuaiDi("2016-09-19 01:14:30","离开【深圳市处理中心】,下一站【广州市】")); 
list.add(new KuaiDi("2016-09-19 04:42:11","到达【广东省广州邮件处理中心】")); 
adapter = new KuaiDiAdapter(this,list); 
lv.setAdapter(adapter); 
} 
}

以上所述是小编给大家介绍的Android控件之使用ListView实现时间轴效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Android 自定义View的构造函数详细介绍

    Android 自定义View的构造函数详细介绍

    这篇文章主要介绍了Android 自定义View的构造函数详细介绍的相关资料,这里对构造函数进行了对比按需使用,需要的朋友可以参考下
    2016-12-12
  • Android 代码一键实现银行卡绑定功能

    Android 代码一键实现银行卡绑定功能

    这篇文章主要介绍了Android 代码一键实现银行卡绑定功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Android实现微信支付功能详解

    Android实现微信支付功能详解

    这篇文章主要为大家详细介绍了Android实现微信支付功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android手势密码的实现

    Android手势密码的实现

    这篇文章主要介绍了Android手势密码的实现的相关资料,需要的朋友可以参考下
    2016-04-04
  • Android列表组件ListView使用详解之动态加载或修改列表数据

    Android列表组件ListView使用详解之动态加载或修改列表数据

    今天小编就为大家分享一篇关于Android列表组件ListView使用详解之动态加载或修改列表数据,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • Android给TextView添加点击事件的实现方法

    Android给TextView添加点击事件的实现方法

    下面小编就为大家带来一篇Android给TextView添加点击事件的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • Android Imageloader的配置的实现代码

    Android Imageloader的配置的实现代码

    这篇文章主要介绍了Android Imageloader的配置的实现代码的相关资料,需要的朋友可以参考下
    2017-07-07
  • Android 遍历文件夹中所有文件的实例代码

    Android 遍历文件夹中所有文件的实例代码

    本篇文章主要介绍了Android 遍历文件夹中所有文件的实例代码,可以获得文件夹中所有文件的路径及文件名,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-06-06
  • Android数据库操作工具类分享

    Android数据库操作工具类分享

    这篇文章主要为大家详细介绍了Android数据库操作工具类的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Android九宫格手势密码代码设计

    Android九宫格手势密码代码设计

    这篇文章主要为大家详细介绍了Android九宫格手势密码的代码设计思路,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论