Android 时间轴的实现
时间轴
时间轴，顾名思义就是将发生的事件按照时间顺序罗列起来，给用户带来一种更加直观的体验。京东和淘宝的物流顺序就是一个时间轴（如图），想必大家都不陌生。
时间轴的初探
初次见到这种UI，感觉整个布局似曾相识，但面对那条时间轴却又不知如何下手。其实，整个时间轴还是可以当做一个ListView处理，只是在Adapter中的布局要花点心思。好了，废话不说，看代码。
效果预览
整个MainActivity的布局就是应ListView，这里不再赘述。主要说一下ListView的Adapter实现方法：
item_view.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"
android:background="#ffffff"
android:orientation="vertical">
<ImageView
android:id="@+id/image"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginLeft="85dp"
android:src="@drawable/point2" />
<View
android:id="@+id/line_normal"
android:layout_width="3dp"
android:layout_height="100dp"
android:layout_below="@+id/image"
android:layout_marginLeft="91dp"
android:background="@color/colorAccent" />
<TextView
android:id="@+id/show_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_toLeftOf="@id/image"
android:padding="3dp"
android:textSize="12dp" />
<TextView
android:id="@+id/show_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_toRightOf="@id/image"
android:padding="3dp"
android:textSize="12dp" />
</RelativeLayout>Adapter的getView方法（其他方法就不贴了，都是老样子）
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
Item item;
if (convertView == null) {
item = new Item();
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_view, null);
item.time = (TextView) convertView.findViewById(R.id.show_time);
item.title= (TextView) convertView.findViewById(R.id.show_title);
item.line = convertView.findViewById(R.id.line_normal);
} else {
item = (Item) convertView.getTag();
}
item.time.setText(datas.get(position).getTime());
item.title.setText(datas.get(position).getTitle());
//最后一项时，竖线不再显示
if (position == datas.size() - 1) {
item.line.setVisibility(View.GONE);
}
return convertView;
}
private class Item {
TextView time, title;
View line;
}时间轴之--横向时间轴
理解了上边所说的时间轴，这个也不难，只要将ListView做成横向的就可以了。
关于横向ListView的实现，网上有很多大神已经解决，所以很庆幸我们可以站在巨人的肩膀上前行。
MainActivity
private Context mContext;
//一个横向的ListView
private HorizontalListView listview;
private TimeLineAdapter2 adapter;
List<ItemBean> datas = new ArrayList<ItemBean>();
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
mContext = this;
setContentView(R.layout.activity_time_line2);
InitDatas();
listview = (HorizontalListView) findViewById(R.id.list);
adapter = new TimeLineAdapter2(mContext, datas);
listview.setAdapter(adapter);
}
/**
* 这里用虚拟数据实现，仅供参考
*/
private void InitDatas() {
// TODO Auto-generated method stub
ItemBean item1 = new ItemBean();
item1.setTitle("提交订单");
item1.setTime("03-14 08:13");
item1.setStatu(1);
ItemBean item2 = new ItemBean();
item2.setTitle("已支付");
item2.setTime("03-14 22:32");
item2.setStatu(1);
ItemBean item3 = new ItemBean();
item3.setTitle("商品出库");
item3.setTime("03-15 00:33");
item3.setStatu(0);
ItemBean item4 = new ItemBean();
item4.setTitle("已签收");
item4.setTime("03-15 15:55");
item4.setStatu(0);
datas.add(item1);
datas.add(item2);
datas.add(item3);
datas.add(item4);
}item_view2.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="wrap_content" >
<TextView
android:layout_alignRight="@id/image"
android:id="@+id/show_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="12dp" />
<TextView
android:layout_alignRight="@id/image"
android:visibility="invisible"
android:id="@+id/show_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/image"
android:padding="5dp"
android:textSize="12dp" />
<View
android:id="@+id/line_normal"
android:layout_width="100dp"
android:layout_height="3dp"
android:layout_centerVertical="true"
android:background="#A6A6A6" />
<View
android:visibility="gone"
android:id="@+id/line_highlight"
android:layout_width="100dp"
android:layout_height="3dp"
android:layout_centerVertical="true"
android:background="@color/colorAccent" />
<ImageView
android:layout_toRightOf="@id/line_normal"
android:id="@+id/image"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_below="@id/show_title"
android:src="@drawable/point2" />
</RelativeLayout>为了方便便于理解，这里可以看一下上面这个xml文件实现的实际效果图
Adapter的实现
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
Item item;
if (convertView == null) {
item = new Item();
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_view2, null);
item.time = (TextView) convertView.findViewById(R.id.show_time);
item.title = (TextView) convertView.findViewById(R.id.show_title);
item.lineNorma = convertView.findViewById(R.id.line_normal);
item.lineHiLight = convertView.findViewById(R.id.line_highlight);
item.image = (ImageView) convertView.findViewById(R.id.image);
} else {
item = (Item) convertView.getTag();
}
//根据数据状态对视图做不同的操作
if (datas.get(position).getStatu() == 1) {
item.lineHiLight.setVisibility(View.VISIBLE);
item.image.setImageResource(R.drawable.point1);
item.time.setVisibility(View.VISIBLE);
}
item.time.setText(datas.get(position).getTime());
item.title.setText(datas.get(position).getTitle());
//这里在起始位置，就不显示“轴”了
if (position == 0) {
item.lineNorma.setVisibility(View.INVISIBLE);
item.lineHiLight.setVisibility(View.INVISIBLE);
}
return convertView;
}
private class Item {
TextView time, title;
View lineNorma, lineHiLight;
ImageView image;
}
当然，实际开发中对时间轴的处理要比这里复杂的多。需按照规定的数据结构做相应的处理，同时也会因内容的差异导致整个视图发生不可预料的变化，这里只是一种思路。如果，哪位有更好想法，也可提出。
修正
关于适配
关于这个时间轴的适配，其实是一个比较麻烦的问题，不同应用因业务需求需要做不同展示。内容会多行或长度不同，导致整个视图会变形。这里对上面提到的纵向时间轴的多行textView提供一种简单的思路：
<?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"
android:background="#ffffff"
android:orientation="vertical">
<TextView
android:id="@+id/show_title"
android:layout_width="100dp"
android:gravity="right"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:padding="3dp"
android:lines="3"
android:text="测试数据"
android:textSize="12sp" />
<RelativeLayout
android:id="@+id/middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@id/show_title">
<ImageView
android:id="@+id/image"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_centerHorizontal="true"
android:src="@drawable/point2" />
<View
android:id="@+id/line_normal"
android:layout_width="3dp"
android:layout_height="100dp"
android:layout_below="@+id/image"
android:layout_centerHorizontal="true"
android:background="@color/colorAccent" />
</RelativeLayout>
<TextView
android:id="@+id/show_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_toRightOf="@id/middle"
android:padding="3dp"
android:text="测试数据"
android:textSize="12dp" />
</RelativeLayout>代码里的做法是将 TextView的长度固定，同时也将lines 值固定。这样在整个布局中不会出现视图错乱的情况。如下图：
横向时间轴的适配，也可以考虑相同的思路。
总的来说，事件轴上显示的信息是一个时间流内容的概括，按理来说内容不应该出现很多文字描述，但是实际的项目需求也得考虑。因此适配起来没有固定的套路，重要的是结合Android各个控件的属性做文章。
Android 时间轴的实现的更多相关文章
- Android 时间轴
最近开发的app中要用到时间轴这东西,需要实现的效果如下: 想想这个东西应该可以用listview实现吧.然后最近就模拟着去写了: 首先写 listview的item的布局: listview_it ...
- Android时间轴效果，直接使用在你的项目中
近期开发app搞到历史查询,受腾讯qq的启示,搞一个具有时间轴效果的ui,看上去还能够,然后立即想到分享给小伙伴,,大家一起来看看,先上效果图吧 watermark/2/text/aHR0cDovL2 ...
- Android -- 时间轴(ListView)
1. 实现效果
- Android 时间轴TimeLine
代码:这里
- android 简易时间轴(实质是ListView)
ListView的应用 1.在很多时候是要用到时间轴的,有些处理的时间轴比较复杂,这里就给出一个比较简单的时间轴,其实就是ListView里面的Item的设计. 直接上代码: ListView,ite ...
- Android 类似时间轴的实现
想要实现图片中的的时间轴的效果,设定了三种颜色,但是出来的只有一个黑色,还不是设定好的,而且长度很长的话不能滚动,下面上代码: 布局文件: <LinearLayout xmlns:android ...
- Android自定义指示器时间轴
指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现. 在Activity关联的布局文件activit ...
- Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！
Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...
- Android实现时间轴
昨天群里有讨论时间轴的项目,没有接触过,以为非常吊,研究之后才知道表面都是忽悠人的,使用listview就能实现了,也没有什么新奇的东西 废话少说,直接上图 图片和文字都能够私人订制 没什么好说的,直 ...
随机推荐
- OS之进程管理---孤儿进程和僵尸进程
僵尸进程 当一个进程终止时,操作系统会释放其资源,不过它位于进程表中的条目还是在的,直到它的父进程调用wait():这是因为进程表中包含了进程的退出状态.当进程已经终止,但是其父进尚未调用wait() ...
- 用expect解决批量Linux集群机器间SSH免密码访问
转自:http://blog.csdn.net/aichaoguy/article/details/11693269#!/bin/bash #check whether package 'expect ...
- Storm实现单词统计代码
import java.io.File; import java.io.IOException; import java.util.Collection; import java.util.HashM ...
- spring boot和mybatis集成分页插件
MyBatis提供了拦截器接口,我们可以实现自己的拦截器,将其作为一个plugin装入到SqlSessionFactory中. 首先要说的是,Spring在依赖注入bean的时候,会把所有实现MyBa ...
- JVM-Java GC分析
如何获取JavaGC日志 用动态命令查看: jstat -gc 1262 2000 20 每隔20秒输入一次日志,总共输入20次 设置GC参数打印出日志 -XX:+PrintGC 输出GC日志 -X ...
- 《LeetBook》leetcode题解(20):Valid Parentheses[E]——栈解决括号匹配问题
我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
- Python -- Gui编程 -- MFC的使用
1.消息框 mfcDialog.py import win32ui import win32con from pywin.mfc import dialog class MyDialog(dialog ...
- 在Windows家里杀死一个偷端口的家伙
今天,写项目了,写了好多代码,然后运行成功,但是返回的信息啥的还有代码整体的逻辑有点问题,于是就review了代码,改了些东西,然后再次启动服务,但是,问题来了:Address already in ...
- springboot-5-整合jpa
######## ##springboot-parent.version: ## jdk 1.8 ## ####### 在整合jpa之前, 先说下mysql 步骤: 1), 在application. ...
- Android JNI初体验
欢迎转载,转载请注明出处:http://www.cnblogs.com/lanrenxinxin/p/4696991.html 开始接触Android JNI层面的内容,推荐一本不错的入门级的书< ...