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就能实现了,也没有什么新奇的东西 废话少说,直接上图 图片和文字都能够私人订制 没什么好说的,直 ...
随机推荐
- 如何正确的加载和执行 JavaScript 代码
无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行 ...
- 用postman做接口测试实例
使用postman做接口测试,可以选择请求方式,可以直接输入参数和header,可以编写测试结果的代码,判断是否通过测试 下图为填写接口测试地址.填写接口的参数,点击send发送请求 其中,Param ...
- 2018春招-今日头条笔试题-第二题(python)
题目描述:2018春招-今日头条笔试题5题(后附大佬答案-c++版) 解题思路: 利用深度优先搜索 #-*- coding:utf-8 -*- class DFS: ''' num:用于存储最后执行次 ...
- centos7上安装redis
关闭防火墙:systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service #禁止firewall开机启 ...
- ELK日志系统之通用应用程序日志接入方案
前边有两篇ELK的文章分别介绍了MySQL慢日志收集和Nginx访问日志收集,那么各种不同类型应用程序的日志该如何方便的进行收集呢?且看本文我们是如何高效处理这个问题的 日志规范 规范的日志存放路径和 ...
- CRF两个例子的理解
概率计算例子: 预测例子:
- JAVA-7NIO之Socket/ServerSocket Channel
一.ServerSocketChannel Java NIO中的 ServerSocketChannel 是一个可以监听新进来的TCP连接的通道, 就像标准IO中的ServerSocket一样.Ser ...
- springboot jpa 多条件查询(多表)
前几天写的,贴上来. 实体类. package com.syl.demo.daomain; import lombok.Data; import javax.persistence.*; /** * ...
- hadoop学习笔记(七):Java HDFS API
一.使用HDFS FileSystem详解 HDFS依赖的第三方包: hadoop 1.x版本: commons-configuration-1.6.jar commons-lang-2.4.jar ...
- JPA之@OneToMany、@ManyToOne、@JoinColumn
顾名思义,@OneToMany.@ManyToOne这两个注解就是处理一对多,多对一的关系 这两个注解是成双成对的,有了@OneToMany,一定会配置一个@ManyToOne OneToMany设置 ...