近期开发app搞到历史查询，受腾讯qq的启示，搞一个具有时间轴效果的ui，看上去还能够，然后立即想到分享给小伙伴，，大家一起来看看，先上效果图吧

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

接下来就是代码了，axtivity的布局代码。非常easy。就是一个listview 

  1. <?xml version="1.0" encoding="utf-8"?
  2.  
  3. >
  4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical" >
  8.  
  9. 	<ListView
  10. 	    android:id="@+id/listview"
  11. 	    android:layout_width="fill_parent"
  12. 	    android:layout_height="wrap_content"/>
  13.  
  14. </LinearLayout>

以下就是activity.java这个了 

  1. package com.agbc.activity;
  2.  
  3. import java.util.ArrayList;
  4. import java.util.HashMap;
  5. import java.util.List;
  6.  
  7. import java.util.Map;
  8.  
  9. import com.agbc.adapter.TimelineAdapter;
  10. import com.agbc.listview.XListView;
  11. import com.example.agbc.R;
  12. import com.lidroid.xutils.ViewUtils;
  13. import com.lidroid.xutils.view.annotation.ViewInject;
  14.  
  15. import android.os.Bundle;
  16. import android.support.v4.app.FragmentActivity;
  17. import android.widget.ListView;
  18. /**
  19.  * 历史时间轴
  20.  * @author twj
  21.  *
  22.  */
  23. public class HistoryTaskActivity extends FragmentActivity{
  24. 	private XListView listView;
  25. 	List<String> data ;
  26. 	private TimelineAdapter timelineAdapter;
  27. 	@Override
  28. 	protected void onCreate(Bundle arg0) {
  29. 		super.onCreate(arg0);
  30. 		setContentView(R.layout.activity_timeline);
  31. 		findViewById();
  32. 		listView.setDividerHeight(0);
  33. 		timelineAdapter=new TimelineAdapter(getDate(), this);
  34. 		listView.setAdapter(timelineAdapter);
  35. 	}
  36.  
  37. 	private List<Map<String, Object>> getDate() {
  38. 		List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
  39.  
  40. 		Map<String, Object> map = new HashMap<String, Object>();
  41. 		map.put("year", "2014");
  42. 		map.put("month", "03/15");
  43. 		map.put("title", "这是第1行測试数据");
  44. 		list.add(map);
  45.  
  46. 		map = new HashMap<String, Object>();
  47. 		map.put("year", "2014");
  48. 		map.put("month", "12/1");
  49. 		map.put("title", "这是第2行測试数据");
  50. 		list.add(map);
  51.  
  52. 		map = new HashMap<String, Object>();
  53. 		map.put("year", "2013");
  54. 		map.put("month", "11/15");
  55. 		map.put("title", "这是第3行測试数据");
  56. 		list.add(map);
  57.  
  58. 		map = new HashMap<String, Object>();
  59. 		map.put("year", "1998");
  60. 		map.put("month", "01/1");
  61. 		map.put("title", "这是第4行測试数据");
  62. 		list.add(map);
  63. 		return list;
  64. 	}
  65.  
  66. 	private void findViewById() {
  67. 		listView=(XListView) findViewById(R.id.listview);	
  68.  
  69. 	}
  70.  
  71. }

接下来就是适配器了。适配器事实上也简单 

  1. package com.example.timelinetext.test;
  2.  
  3. import java.util.List;
  4. import java.util.Map;
  5.  
  6. import android.content.Context;
  7. import android.util.Log;
  8. import android.view.LayoutInflater;
  9. import android.view.View;
  10. import android.view.ViewGroup;
  11. import android.widget.BaseAdapter;
  12. import android.widget.TextView;
  13.  
  14. public class TimelineAdapter extends BaseAdapter {
  15.  
  16. 	private Context context;
  17. 	private List<Map<String, Object>> list;
  18. 	private LayoutInflater inflater;
  19.  
  20. 	public TimelineAdapter(Context context, List<Map<String, Object>> list) {
  21. 		super();
  22. 		this.context = context;
  23. 		this.list = list;
  24. 	}
  25.  
  26. 	@Override
  27. 	public int getCount() {
  28.  
  29. 		return list.size();
  30. 	}
  31.  
  32. 	@Override
  33. 	public Object getItem(int position) {
  34. 		return position;
  35. 	}
  36.  
  37. 	@Override
  38. 	public long getItemId(int position) {
  39. 		return position;
  40. 	}
  41.  
  42. 	@Override
  43. 	public View getView(int position, View convertView, ViewGroup parent) {
  44. 		ViewHolder viewHolder = null;
  45. 			inflater = LayoutInflater.from(parent.getContext());
  46. 			convertView = inflater.inflate(R.layout.adapter_timeline, null);
  47. 			viewHolder = new ViewHolder();
  48. 			viewHolder.year = (TextView) convertView.findViewById(R.id.year);
  49. 			viewHolder.month = (TextView) convertView.findViewById(R.id.month);
  50. 			viewHolder.title = (TextView) convertView.findViewById(R.id.title);
  51.  
  52. 		String yearStr = list.get(position).get("year").toString();
  53. 		String monthStr = list.get(position).get("month").toString();
  54. 		String titleStr = list.get(position).get("title").toString();
  55.  
  56. 		viewHolder.year.setText( yearStr);
  57. 		viewHolder.month.setText(monthStr);
  58. 		viewHolder.title.setText(titleStr);
  59.  
  60. 		return convertView;
  61. 	}
  62.  
  63. 	static class ViewHolder {
  64. 		public TextView year;
  65. 		public TextView month;
  66. 		public TextView title;
  67. 	}
  68. }

最后就是适配器布局代码了，事实上效果就是在这里提现出来的 

  1. <?
  2.  
  3. xml version="1.0" encoding="utf-8"?>
  4. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:background="#ffffff"
  8.     android:orientation="vertical"
  9.     android:paddingRight="20dp" >
  10.  
  11.     <RelativeLayout
  12.         android:id="@+id/layout_1"
  13.         android:layout_width="60dp"
  14.         android:layout_height="25dp"
  15.         android:layout_marginLeft="43dp"
  16.         android:background="@android:color/black"
  17.         android:gravity="center" >
  18.  
  19.         <TextView
  20.             android:id="@+id/month"
  21.             android:layout_width="wrap_content"
  22.             android:layout_height="wrap_content"
  23.             android:text="測试数据"
  24.             android:textColor="#FFFFFF"
  25.             android:textSize="12sp" />
  26.     </RelativeLayout>
  27.  
  28.     <View
  29.         android:id="@+id/view_0"
  30.         android:layout_width="1dp"
  31.         android:layout_height="25dp"
  32.         android:layout_below="@+id/layout_1"
  33.         android:layout_marginLeft="71dp"
  34.         android:background="#A6A6A6" />
  35.  
  36.     <RelativeLayout
  37.         android:id="@+id/layout_2"
  38.         android:layout_width="60dp"
  39.         android:layout_height="25dp"
  40.         android:layout_below="@+id/view_0"
  41.         android:layout_marginLeft="43dp"
  42.         android:background="@android:color/black"
  43.         android:gravity="center" >
  44.  
  45.         <TextView
  46.             android:id="@+id/year"
  47.             android:layout_width="wrap_content"
  48.             android:layout_height="wrap_content"
  49.             android:text="測试数据"
  50.             android:textColor="#FFFFFF"
  51.             android:textSize="12sp" />
  52.     </RelativeLayout>
  53.  
  54.     <View
  55.         android:id="@+id/view_1"
  56.         android:layout_width="1dp"
  57.         android:layout_height="25dp"
  58.         android:layout_below="@+id/layout_2"
  59.         android:layout_marginLeft="71dp"
  60.         android:background="#A6A6A6" />
  61.  
  62.     <TextView
  63.         android:id="@+id/show_time"
  64.         android:layout_width="wrap_content"
  65.         android:layout_height="wrap_content"
  66.         android:layout_below="@+id/view_1"
  67.         android:layout_marginLeft="30dp"
  68.         android:text="測试数据"
  69.         android:textSize="12dp" />
  70.  
  71.     <ImageView
  72.         android:id="@+id/image"
  73.         android:layout_width="15dp"
  74.         android:layout_height="15dp"
  75.         android:layout_below="@+id/view_1"
  76.         android:layout_marginLeft="65dp"
  77.         android:src="@drawable/timeline_green" />
  78.  
  79.     <View
  80.         android:id="@+id/view_2"
  81.         android:layout_width="1dp"
  82.         android:layout_height="100dp"
  83.         android:layout_below="@+id/image"
  84.         android:layout_marginLeft="71dp"
  85.         android:background="#A6A6A6" />
  86.  
  87.     <RelativeLayout
  88.         android:id="@+id/relative"
  89.         android:layout_width="fill_parent"
  90.         android:layout_height="wrap_content"
  91.         android:layout_below="@+id/image"
  92.         android:layout_marginTop="-20dp"
  93.         android:layout_toRightOf="@+id/image"
  94.         android:background="@drawable/timeline_content"
  95.         android:padding="10dp" >
  96.  
  97.         <ImageView
  98.             android:id="@+id/image_1"
  99.             android:layout_width="60dp"
  100.             android:layout_height="60dp"
  101.             android:layout_alignParentLeft="true"
  102.             android:layout_centerVertical="true"
  103.             android:layout_marginLeft="5dp"
  104.             android:src="@drawable/bg_green_circle_smic" />
  105.  
  106.         <TextView
  107.             android:id="@+id/title"
  108.             android:layout_width="wrap_content"
  109.             android:layout_height="wrap_content"
  110.             android:layout_toRightOf="@+id/image_1"
  111.             android:ellipsize="end"
  112.             android:singleLine="true"
  113.             android:maxEms="7"
  114.             android:paddingLeft="5dp"
  115.             android:text="測试数据"
  116.             android:textSize="12sp" />
  117.  
  118.         <ImageView
  119.             android:id="@+id/personal_circle"
  120.             android:layout_width="15dp"
  121.             android:layout_height="15dp"
  122.             android:layout_toRightOf="@+id/title"
  123.             android:src="@drawable/ic_launcher" />
  124.  
  125.         <TextView
  126.             android:id="@+id/text_2"
  127.             android:layout_width="wrap_content"
  128.             android:layout_height="wrap_content"
  129.             android:layout_toRightOf="@+id/image_1"
  130.             android:paddingLeft="5dp"
  131.             android:paddingTop="20dp"
  132.             android:text="測试数据"
  133.             android:textSize="12sp" />
  134.  
  135.         <TextView
  136.             android:id="@+id/text_3"
  137.             android:layout_width="wrap_content"
  138.             android:layout_height="wrap_content"
  139.             android:layout_toRightOf="@+id/text_2"
  140.             android:ellipsize="end"
  141.             android:singleLine="true"
  142.             android:paddingTop="20dp"
  143.             android:text="測试数据"
  144.             android:textSize="12sp" />
  145.  
  146.         <TextView
  147.             android:id="@+id/text_4"
  148.             android:layout_width="wrap_content"
  149.             android:layout_height="wrap_content"
  150.             android:layout_toRightOf="@+id/image_1"
  151.             android:paddingLeft="5dp"
  152.             android:paddingTop="40dp"
  153.             android:text="測试数据"
  154.             android:textSize="12sp" />
  155.  
  156.         <TextView
  157.             android:id="@+id/text_5"
  158.             android:layout_width="wrap_content"
  159.             android:layout_height="wrap_content"
  160.             android:layout_toRightOf="@+id/text_4"
  161.             android:ellipsize="end"
  162.             android:singleLine="true"
  163.             android:paddingTop="40dp"
  164.             android:text="測试数据"
  165.             android:textSize="12sp" />
  166.  
  167.         <TextView
  168.             android:id="@+id/text_6"
  169.             android:layout_width="wrap_content"
  170.             android:layout_height="wrap_content"
  171.             android:layout_toRightOf="@+id/image_1"
  172.             android:paddingLeft="5dp"
  173.             android:paddingTop="60dp"
  174.             android:text="測试数据"
  175.             android:textSize="12sp" />
  176.  
  177.         <TextView
  178.             android:id="@+id/text_7"
  179.             android:layout_width="wrap_content"
  180.             android:layout_height="wrap_content"
  181.             android:layout_alignRight="@+id/text_3"
  182.             android:layout_alignTop="@+id/title"
  183.             android:layout_toRightOf="@+id/text_6"
  184.             android:ellipsize="end"
  185.             android:singleLine="true"
  186.             android:paddingTop="60dp"
  187.             android:text="測试数据"
  188.             android:textSize="12sp" />
  189.     </RelativeLayout>
  190.  
  191. </RelativeLayout>

好吧！时间轴事实上原理非常easy的。就是几个控件。调调位置而已，只是在实际开发中可能要对时间轴上面的控件进行操作，这就是关于事件分发的机制了，哎，事实上都是写烂的代码了。好了。这个天我要去研究tcp/ip通信了。

Android时间轴效果，直接使用在你的项目中的更多相关文章

  1. Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！

    Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...

  2. 使用ExpandableListView时间轴效果达到

    不废话,首先在地图上,查看结果 这是用ExpandableListView来实现时间轴效果,原理比較简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import ...

  3. CSS3实现时间轴效果

    原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬 ...

  4. Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

    Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...

  5. JS时间轴效果(类似于qq空间时间轴效果)

    在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 ...

  6. js实现的时间轴效果

    今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面 ...

  7. jQuery鼠标滑过横向时间轴效果

    jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...

  8. Android 时间轴

    最近开发的app中要用到时间轴这东西,需要实现的效果如下: 想想这个东西应该可以用listview实现吧.然后最近就模拟着去写了: 首先写  listview的item的布局: listview_it ...

  9. Android 时间轴的实现

    时间轴 时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户带来一种更加直观的体验.京东和淘宝的物流顺序就是一个时间轴(如图),想必大家都不陌生. 时间轴的初探 初次见到这种UI,感觉整个布局 ...

随机推荐

  1. 求助：可以使用任何编程工具做成一个控件或组件，使得在VB中能调用并得到摄像头的参数及图片。

    请看下网址上的这个问题,看是否有解决的方式http://www.educity.cn/wenda/338634.html

  2. windows系统下的redis启动教程

    下载解压后配置redis.conf文件配置端口号和密码,打开poweshell命令,进入redis解压目录,使用.\redis-server.exe redis.conf 命令启动redis服务,再打 ...

  3. Xcode相关概念：Target、Project、Scheme、Workspace

    创建并编译Xcode工程时,有几个常用概念想在这里记一下. Xcode Target: 定义:A target defines a single product; .... 理解:输出文件,等同于VS ...

  4. STA之Concepts (2)

    3 Skew between signals Skew is the difference in timing between two or more signals, maybe data, clo ...

  5. 并发和多线程(七)--volatile

    volatile: 相当于轻量级的synchronized,只能用来修饰变量,线程安全的三个特性通过volatile能实现其中的两个 原子性: 在之前的文章有说到,通过Atomic相关类.synchr ...

  6. 一段简单的手写Java计算器代码

    import java.awt.*;import java.awt.event.*;import javax.swing.*;import java.lang.*; public class Calc ...

  7. TWaver3D特效系列之环境映射

    随着TWaver3D的快速发展,越来越多的各种功能都在不断加强,包括性能的极大提升(可以参考这里),3D编辑器的易用性和功能持续增强(欢迎大家申请试用),各种特效的增加,特效是本文的主角. 对于UI技 ...

  8. 我的MYSQL学习心得链接

    http://www.cnblogs.com/lyhabc/p/3793524.html

  9. poj - 3254 - Corn Fields （状态压缩）

    poj - 3254 - Corn Fields (状态压缩)超详细 参考了 @外出散步 的博客,在此基础上增加了说明 题意: 农夫有一块地,被划分为m行n列大小相等的格子,其中一些格子是可以放牧的( ...

  10. I Think I Need a Houseboat POJ - 1005（数学）

    题目大意 在二维坐标内选定一个点,问你当洪水以半圆形扩散且每年扩散50单位,哪一年这个点被被洪水侵蚀? 解法 代码 #include <iostream> #include <cst ...