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

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

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

<?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="match_parent"

    android:orientation="vertical" >

	<ListView

	    android:id="@+id/listview"

	    android:layout_width="fill_parent"

	    android:layout_height="wrap_content"/>

</LinearLayout>

以下就是activity.java这个了 

package com.agbc.activity;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import com.agbc.adapter.TimelineAdapter;

import com.agbc.listview.XListView;

import com.example.agbc.R;

import com.lidroid.xutils.ViewUtils;

import com.lidroid.xutils.view.annotation.ViewInject;

import android.os.Bundle;

import android.support.v4.app.FragmentActivity;

import android.widget.ListView;

/**

 * 历史时间轴

 * @author twj

 *

 */

public class HistoryTaskActivity extends FragmentActivity{

	private XListView listView;

	List<String> data ;

	private TimelineAdapter timelineAdapter;

	@Override

	protected void onCreate(Bundle arg0) {

		super.onCreate(arg0);

		setContentView(R.layout.activity_timeline);

		findViewById();

		listView.setDividerHeight(0);

		timelineAdapter=new TimelineAdapter(getDate(), this);

		listView.setAdapter(timelineAdapter);

	}

	private List<Map<String, Object>> getDate() {

		List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();

		Map<String, Object> map = new HashMap<String, Object>();

		map.put("year", "2014");

		map.put("month", "03/15");

		map.put("title", "这是第1行測试数据");

		list.add(map);

		map = new HashMap<String, Object>();

		map.put("year", "2014");

		map.put("month", "12/1");

		map.put("title", "这是第2行測试数据");

		list.add(map);

		map = new HashMap<String, Object>();

		map.put("year", "2013");

		map.put("month", "11/15");

		map.put("title", "这是第3行測试数据");

		list.add(map);

		map = new HashMap<String, Object>();

		map.put("year", "1998");

		map.put("month", "01/1");

		map.put("title", "这是第4行測试数据");

		list.add(map);

		return list;

	}

	private void findViewById() {

		listView=(XListView) findViewById(R.id.listview);	

	}

}

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

package com.example.timelinetext.test;

import java.util.List;

import java.util.Map;

import android.content.Context;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.TextView;

public class TimelineAdapter extends BaseAdapter {

	private Context context;

	private List<Map<String, Object>> list;

	private LayoutInflater inflater;

	public TimelineAdapter(Context context, List<Map<String, Object>> list) {

		super();

		this.context = context;

		this.list = list;

	}

	@Override

	public int getCount() {

		return list.size();

	}

	@Override

	public Object getItem(int position) {

		return position;

	}

	@Override

	public long getItemId(int position) {

		return position;

	}

	@Override

	public View getView(int position, View convertView, ViewGroup parent) {

		ViewHolder viewHolder = null;

			inflater = LayoutInflater.from(parent.getContext());

			convertView = inflater.inflate(R.layout.adapter_timeline, null);

			viewHolder = new ViewHolder();

			viewHolder.year = (TextView) convertView.findViewById(R.id.year);

			viewHolder.month = (TextView) convertView.findViewById(R.id.month);

			viewHolder.title = (TextView) convertView.findViewById(R.id.title);

		String yearStr = list.get(position).get("year").toString();

		String monthStr = list.get(position).get("month").toString();

		String titleStr = list.get(position).get("title").toString();

		viewHolder.year.setText( yearStr);

		viewHolder.month.setText(monthStr);

		viewHolder.title.setText(titleStr);

		return convertView;

	}

	static class ViewHolder {

		public TextView year;

		public TextView month;

		public TextView title;

	}

}

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

<?

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"

    android:paddingRight="20dp" >

    <RelativeLayout

        android:id="@+id/layout_1"

        android:layout_width="60dp"

        android:layout_height="25dp"

        android:layout_marginLeft="43dp"

        android:background="@android:color/black"

        android:gravity="center" >

        <TextView

            android:id="@+id/month"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="測试数据"

            android:textColor="#FFFFFF"

            android:textSize="12sp" />

    </RelativeLayout>

    <View

        android:id="@+id/view_0"

        android:layout_width="1dp"

        android:layout_height="25dp"

        android:layout_below="@+id/layout_1"

        android:layout_marginLeft="71dp"

        android:background="#A6A6A6" />

    <RelativeLayout

        android:id="@+id/layout_2"

        android:layout_width="60dp"

        android:layout_height="25dp"

        android:layout_below="@+id/view_0"

        android:layout_marginLeft="43dp"

        android:background="@android:color/black"

        android:gravity="center" >

        <TextView

            android:id="@+id/year"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="測试数据"

            android:textColor="#FFFFFF"

            android:textSize="12sp" />

    </RelativeLayout>

    <View

        android:id="@+id/view_1"

        android:layout_width="1dp"

        android:layout_height="25dp"

        android:layout_below="@+id/layout_2"

        android:layout_marginLeft="71dp"

        android:background="#A6A6A6" />

    <TextView

        android:id="@+id/show_time"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/view_1"

        android:layout_marginLeft="30dp"

        android:text="測试数据"

        android:textSize="12dp" />

    <ImageView

        android:id="@+id/image"

        android:layout_width="15dp"

        android:layout_height="15dp"

        android:layout_below="@+id/view_1"

        android:layout_marginLeft="65dp"

        android:src="@drawable/timeline_green" />

    <View

        android:id="@+id/view_2"

        android:layout_width="1dp"

        android:layout_height="100dp"

        android:layout_below="@+id/image"

        android:layout_marginLeft="71dp"

        android:background="#A6A6A6" />

    <RelativeLayout

        android:id="@+id/relative"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/image"

        android:layout_marginTop="-20dp"

        android:layout_toRightOf="@+id/image"

        android:background="@drawable/timeline_content"

        android:padding="10dp" >

        <ImageView

            android:id="@+id/image_1"

            android:layout_width="60dp"

            android:layout_height="60dp"

            android:layout_alignParentLeft="true"

            android:layout_centerVertical="true"

            android:layout_marginLeft="5dp"

            android:src="@drawable/bg_green_circle_smic" />

        <TextView

            android:id="@+id/title"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_toRightOf="@+id/image_1"

            android:ellipsize="end"

            android:singleLine="true"

            android:maxEms="7"

            android:paddingLeft="5dp"

            android:text="測试数据"

            android:textSize="12sp" />

        <ImageView

            android:id="@+id/personal_circle"

            android:layout_width="15dp"

            android:layout_height="15dp"

            android:layout_toRightOf="@+id/title"

            android:src="@drawable/ic_launcher" />

        <TextView

            android:id="@+id/text_2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_toRightOf="@+id/image_1"

            android:paddingLeft="5dp"

            android:paddingTop="20dp"

            android:text="測试数据"

            android:textSize="12sp" />

        <TextView

            android:id="@+id/text_3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_toRightOf="@+id/text_2"

            android:ellipsize="end"

            android:singleLine="true"

            android:paddingTop="20dp"

            android:text="測试数据"

            android:textSize="12sp" />

        <TextView

            android:id="@+id/text_4"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_toRightOf="@+id/image_1"

            android:paddingLeft="5dp"

            android:paddingTop="40dp"

            android:text="測试数据"

            android:textSize="12sp" />

        <TextView

            android:id="@+id/text_5"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_toRightOf="@+id/text_4"

            android:ellipsize="end"

            android:singleLine="true"

            android:paddingTop="40dp"

            android:text="測试数据"

            android:textSize="12sp" />

        <TextView

            android:id="@+id/text_6"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_toRightOf="@+id/image_1"

            android:paddingLeft="5dp"

            android:paddingTop="60dp"

            android:text="測试数据"

            android:textSize="12sp" />

        <TextView

            android:id="@+id/text_7"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignRight="@+id/text_3"

            android:layout_alignTop="@+id/title"

            android:layout_toRightOf="@+id/text_6"

            android:ellipsize="end"

            android:singleLine="true"

            android:paddingTop="60dp"

            android:text="測试数据"

            android:textSize="12sp" />

    </RelativeLayout>

</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. Rxjava1升级Rxjava2踩坑一记

    Rxjava1升级Rxjava2坑 共存问题 通常情况下,如果我们希望在一个模块中既想使用rxjava1又想使用rxjava2,这个时候在运行的时候会出现一下报错: ... APK META/-INF ...

  2. Redux 中的CombineReducer的函数详解

    combineReducers(reducers) 随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分. combineReducers 辅助函 ...

  3. 用antlr4来实现《按编译原理的思路设计的一个计算器》中的计算器

    上次在公司内部讲<词法分析——使用正则文法>是一次失败的尝试——上午有十几个人在场,下午就只来了四个听众. 本来我还在构思如何来讲“语法分析”的知识呢,但现在看来已不太可能. 这个课程没有 ...

  4. tensorboard在windows系统浏览器显示空白的解决

    一个简单的using_tensorboard.py程序,如下: #using_tensorboard.py import tensorflow as tf a = tf.constant(10,nam ...

  5. Web应用程序的安全性问题依其存在的形势划分，种类繁多，这里不准备介绍所有的，只介绍常见的一些。

    Web应用程序的安全性问题依其存在的形势划分,种类繁多,这里不准备介绍所有的,只介绍常见的一些.  常见Web应用安全问题安全性问题的列表: 1.跨站脚本攻击(CSS or XSS, Cross Si ...

  6. parsley.js验证的基本引用

    前段时间看到博客有些parsley.js验证,只是对parsley.js验证框架基本的应用,对parsley.js更深层理解没有介绍和demo 比如:异步请求,扩展验证的写法,我把我学到的parsle ...

  7. Vue实战之插件 sweetalert 的使用

    安装npm install sweetalert2@7.15.1 --save 封装 sweetalertimport swal from 'sweetalert2' export default { ...

  8. 梦想CAD控件关于曲线问题

    IMxDrawCurve 接口 控件中的曲线接口,实现了曲线的相关操作,如求曲线的长度,最近点,面积,曲线上任一点在曲线上的长度 切向方向,曲线交点,坐标变换,打断,偏移,离散等功能. 一.返回曲线组 ...

  9. thymeleaf在开发环境正常，但用jar运行时报错 Error resolving template template might not exist or might not be accessible

    解决方案: (1)配置中添加  spring.thymeleaf.prefix=classpath:/templates (2)指向模板的路径 不加 /

  10. 关于fragment+viewpager的优化

    上次写了一个问答项目,用的fragment+viewpager架构,后来发现,划了几次之后,再划回来,会重新加载布局,重新获取数据,这样整个程序和卡,并且占用太多的网络资源. 当时的解决办法是,自己重 ...