欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-02-28 20:48:28
 实现思路: 该view是通过listview实现的,通过实体两个字段内容content和时间time来展示每个listitem 时间轴是使用上面一条线(20...

 实现思路:

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

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

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

效果图:

Android控件之使用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> 

其效果如图:

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

步骤四:编写父布局(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实现时间轴效果,希望对大家有所帮助