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

概述 实现思路：该View是通过ListView实现的，通过实体两个字段内容content和时间time来展示每个ListItem

 实现思路：

该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控件之使用ListView实现时间轴效果全部内容，希望文章能够帮你解决Android控件之使用ListView实现时间轴效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。