listView实现时光轴效果

尼玛，非要搞什么时光轴，一想简单的不就是个listView吗，然后一步一步来就好了，哈哈别看那么好看其实不要想多了。

　时光轴timeline最大的作用就是把过去的事物系统化、完整化、精确化。时间轴能够让用户更直观的看到，我的这一刻在做什么，那一刻做过什么，依据时间顺序，把一方面或多方面的时间足迹事件串联起来，形成相对完整的记录体系，再运用图文的形式呈现给用户;页面简单，表现形式特别，一直以来受到广大用户的欢迎。

qq空间的时光轴还是用起来蛮不错的，看图：

要实现我们就慢慢来吧。虽然效果赶不上qq空间但是个人觉得还是不错的，下面我们看listView方法的实现：

先main_activity.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="match_parent"

android:orientation="vertical" >

<ListView

android:id="@+id/lv_list"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:cacheColorHint="@null"

android:divider="@null" >

</ListView>

</LinearLayout>

主布局很简单，就是一个listView，设置分割线为空就好了，然后cacheColorHint也为空。

接下来我们写时光轴的item布局：

item_time_line.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" >

<RelativeLayout

android:id="@+id/rl_title"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingTop="10dp" >

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_marginLeft="8dp"

android:background="@drawable/img_line_point" />

<TextView

android:id="@+id/txt_date_time"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_marginLeft="15dp"

android:textColor="#FC6802" />

</RelativeLayout>

<View

android:id="@+id/v_line"

android:layout_width="2dp"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:background="#FC6802" />

<ImageView

android:padding="8dp"

android:id="@+id/img"

android:layout_width="80dp"

android:layout_height="80dp"

android:layout_below="@id/rl_title"

android:layout_marginLeft="3dp"

android:layout_toRightOf="@id/v_line"

android:scaleType="fitXY" />

<TextView

android:paddingTop="15dp"

android:id="@+id/txt_date_content"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/rl_title"

android:layout_marginLeft="15dp"

android:layout_toRightOf="@id/img"

android:paddingBottom="10dp"

android:maxLines="3"

android:textColor="#5296C5" />

</RelativeLayout>

我们的时光轴呢，由标题、时光轴的线、图片、时间点图片和文字内容组成，然后时光轴的线我们是动态显示的，为了方便显示，我把图片大小固定为80x80,然后文字强制设为最大行数为3行，效果还是比较明显 的。

接下来上代码：

先来一下数据实体：

DateText.java

package com.zy.timeline;

public class DateText {

private String date;

private String text;

private int imgsrc;

public DateText(String date, String text,int imgsrc) {

super();

this.date = date;

this.text = text;

this.imgsrc=imgsrc;

}

public String getDate() {

return date;

}

public void setDate(String date) {

this.date = date;

}

public String getText() {

return text;

}

public void setText(String text) {

this.text = text;

}

public int getImgsrc() {

return imgsrc;

}

public void setImgsrc(int imgsrc) {

this.imgsrc = imgsrc;

}

}

很简单的3个成员，分别是时间，文本内容，和图片。

接着数据适配器：

DateAdapter.java

package com.zy.timeline;

import java.util.List;

import com.zy.timeline.R;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.RelativeLayout;

import android.widget.RelativeLayout.LayoutParams;

import android.widget.TextView;

public class DateAdapter extends BaseAdapter {

private Context context;

private List<DateText> list;

public DateAdapter(Context context, List<DateText> list) {

this.context = context;

this.list = list;

}

@Override

public int getCount() {

if (list == null) {

return 0;

}

return list.size();

}

@Override

public Object getItem(int position) {

if (list == null) {

return null;

}

return list.get(position);

}

@Override

public long getItemId(int position) {

return position;

}

@Override

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

ViewHolder holder = null;

if (convertView == null) {

holder = new ViewHolder();

convertView = LayoutInflater.from(context).inflate(

R.layout.item_time_line, parent, false);

holder.date = (TextView) convertView

.findViewById(R.id.txt_date_time);

holder.content = (TextView) convertView

.findViewById(R.id.txt_date_content);

holder.line = (View) convertView.findViewById(R.id.v_line);

holder.title = (RelativeLayout) convertView

.findViewById(R.id.rl_title);

holder.img = (ImageView) convertView

.findViewById(R.id.img);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();

}

//时间轴竖线的layout

LayoutParams params = (LayoutParams) holder.line.getLayoutParams();

//第一条数据，肯定显示时间标题

if (position == 0) {

holder.title.setVisibility(View.VISIBLE);

holder.date.setText(TimeFormat.format("yyyy.MM.dd",

list.get(position).getDate()));

params.addRule(RelativeLayout.ALIGN_TOP, R.id.rl_title);

params.addRule(RelativeLayout.ALIGN_BOTTOM, R.id.img);

} else { // 不是第一条数据

// 本条数据和上一条数据的时间戳相同，时间标题不显示

if (list.get(position).getDate()

.equals(list.get(position - 1).getDate())) {

holder.title.setVisibility(View.GONE);

params.addRule(RelativeLayout.ALIGN_TOP, R.id.txt_date_content);

params.addRule(RelativeLayout.ALIGN_BOTTOM,

R.id.img);

} else {

//本条数据和上一条的数据的时间戳不同的时候，显示数据

holder.title.setVisibility(View.VISIBLE);

holder.date.setText(TimeFormat.format("yyyy.MM.dd",

list.get(position).getDate()));

params.addRule(RelativeLayout.ALIGN_TOP, R.id.rl_title);

params.addRule(RelativeLayout.ALIGN_BOTTOM,

R.id.img);

}

}

holder.line.setLayoutParams(params);

holder.content.setText(list.get(position).getText());

holder.img.setImageResource(list.get(position).getImgsrc());

return convertView;

}

public static class ViewHolder {

RelativeLayout title;

View line;

TextView date;

TextView content;

ImageView img;

}

}

数据适配器和普通的数据适配器没有什么两样，只不过是左边的时光轴的线的长度是自动匹配的，我这里是图片的高度要高于文字的高度，所以是以图片的底部为标准来设置高度的。

接下来就是写mainActivity的代码了;

package com.zy.timeline;

import java.util.ArrayList;

import java.util.Collections;

import java.util.List;

import com.zy.timeline.R;

import android.app.Activity;

import android.os.Bundle;

import android.widget.ListView;

public class MainActivity extends Activity {

// 时间轴列表

private ListView lvList;

// 数据list

private List<DateText> list;

// 列表适配器

private DateAdapter adapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// findviewbyid

lvList = (ListView) findViewById(R.id.lv_list);

list = new ArrayList<DateText>();

// 添加测试数据

addData();

// 将数据按照时间排序

DateComparator comparator = new DateComparator();

Collections.sort(list, comparator);

// listview绑定适配器

adapter = new DateAdapter(this, list);

lvList.setAdapter(adapter);

}

private void addData() {

DateText date1 = new DateText("20140710", "人生的平衡，内涵也很多。丰富的内涵，是生存的保障，是身心的健康，是自由和快乐生活的均衡全面的发展。真理往往在俗人认为的相反之处，常人好争，“圣人不敢为也”，随和谦让。常人追求美好的东西、好吃的东西吃过多了，以后就再也不能吃了。真理讲的是心，不能离心找身外的原因。",R.drawable.one);

DateText date2 = new DateText("20120209", "夺走你初吻的人现在和你是什么关系",R.drawable.two);

DateText date3 = new DateText("20140526", "不管有多么的舍不得，我们都只有笑过之后，长歌当哭。",R.drawable.three);

DateText date4 = new DateText("20150310", "那些让我们哭过的事,总有一天我们会笑着说出来。",R.drawable.one);

DateText date5 = new DateText("20140911", "你年轻时也曾扬言，要饮遍全世界的酒。老了却发现，白水才是最长情的。",R.drawable.one);

DateText date6 = new DateText("20140713", "我这一个不太宽厚的肩膀只希望你累了能停靠不太温暖却能为你挡住风浪",R.drawable.one);

DateText date7 = new DateText("20141012", "有人问过井上，“为什么不设计湘北最后夺冠？”-井上回答说“因为青春的梦想往往是不完美的…",R.drawable.one);

DateText date8 = new DateText("20140714", "将来的你,一定会感激现在拼命的自己。",R.drawable.one);

DateText date9 = new DateText("20140709", "地球之所以是圆的，是因为上帝想让那些走失或迷路的人重新相遇",R.drawable.one);

DateText date10 = new DateText("20110705", "如果有一天我出事了，我一个电话能到场的有谁？",R.drawable.two);

DateText date11 = new DateText("20120729", "你厌恶自己的生活，然而有人在梦想着过你的生活。",R.drawable.two);

DateText date12 = new DateText("20130725", "很爱很爱你，可你却MD不知道",R.drawable.two);

DateText date13 = new DateText("20140716", "就算现在的他对你再好，都比不过曾经那个伤你最深的人也是如今最熟悉的陌生人，",R.drawable.two);

DateText date14 = new DateText("20140711", "回忆中，总有些瞬间，能温暖整个曾经。",R.drawable.two);

DateText date15 = new DateText("20140710", "我最想旅游的地方，是暗恋者的心。",R.drawable.two);

DateText date16 = new DateText("20140711", "我不是故意 让自己变得不像自己",R.drawable.two);

DateText date17 = new DateText("20100712", "不要求，不一定是没有心声。不流泪，不一定是没有泪痕。不表达，不一定是不爱你",R.drawable.two);

DateText date18 = new DateText("20140711", "谁苍白了谁的等待，谁无悔着谁的执着。",R.drawable.two);

DateText date19 = new DateText("20140715", "网上作者呕心呖血码出的字，他们不费一兵一卒就能轻易地据为己有",R.drawable.three);

DateText date20 = new DateText("20120723", "自从我遇见你那天开始，我的心就像跌进了深深的湖水",R.drawable.three);

DateText date21 = new DateText("20150718", "有些东西，当你拥有时，你认为理所应当。当你失去时，才知道自己没资格。",R.drawable.three);

DateText date22 = new DateText("20130706", "有时候上天没有给你想要的，不是因为你不配，而是你值得拥有更好的。",R.drawable.three);

DateText date23 = new DateText("20110714", "退出没结局的剧",R.drawable.three);

DateText date24 = new DateText("20120726", "曾经的现实，现在已是回忆。",R.drawable.three);

DateText date25 = new DateText("20140325", "谁人曾照顾过我的感受，待我温柔吻过伤口，谁人曾介意我也不好受，为我出头碰过我的手",R.drawable.three);

DateText date26 = new DateText("20140623", "人生归于尘埃如花瓣零落，然而人生生不息，花瓣飘零尘泥，依然花开花落。",R.drawable.three);

DateText date27 = new DateText("20140121", "现在，我们都应忘了对方，重新去过彼此的生活。",R.drawable.three);

DateText date28 = new DateText("20140916", "爱上大声地啊地",R.drawable.three);

DateText date29 = new DateText("20140712", "被人需要是种无法言表却又充满能量的安全感",R.drawable.one);

DateText date30 = new DateText("20140710", "没有信的日子，如同一堆温柴，被回忆点着，一脑子的浓烟。",R.drawable.two);

list.add(date1);

list.add(date2);

list.add(date3);

list.add(date4);

list.add(date5);

list.add(date6);

list.add(date7);

list.add(date8);

list.add(date9);

list.add(date10);

list.add(date11);

list.add(date12);

list.add(date13);

list.add(date14);

list.add(date15);

list.add(date16);

list.add(date17);

list.add(date18);

list.add(date19);

list.add(date20);

list.add(date21);

list.add(date22);

list.add(date23);

list.add(date24);

list.add(date25);

list.add(date26);

list.add(date27);

list.add(date28);

list.add(date29);

list.add(date30);

}

}

哈哈代码基本上写完了，期间我们对时间进行了一下处理，用到了一个工具类：

看方法：

package com.zy.timeline;

import java.util.Comparator;

public class DateComparator implements Comparator<DateText> {

@Override

public int compare(DateText lhs, DateText rhs) {

return rhs.getDate().compareTo(lhs.getDate());//时间比较排序

}

}

package com.zy.timeline;

import java.text.ParseException;

import java.text.SimpleDateFormat;

import java.util.Date;

public class TimeFormat {

public static String format(String format, String time) {

String result = "";

SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");//时间格式化

try {

Date date = df.parse(time);

SimpleDateFormat df1 = new SimpleDateFormat(format);

result = df1.format(date);

} catch (ParseException e) {

e.printStackTrace();

}

return result;

}

}

好了代码也写完了，看下效果图啊：

马蛋手机比较垃圾没有屏幕快照的功能，只能拿另外一个手机来拍了，拍的效果不是很好，见谅啊。

最后附上源码（想看下效果的可以看下linetime.zip）：最他妈讨厌那种下源码还要积分的程序狗了

下一篇计划把listView换成RecyclerView来实现，也顺便温习下RecyclerView的使用，不喜勿喷啊，小伙伴们。应该很快吧，感觉加班前能够搞定的样子，加油小伙伴们

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-10-01 00:47:45

listView实现时光轴效果的相关文章

时光轴二之RecyclerView版时光轴效果

因为现在RecyclerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,但是直接把viewholder的实现封装起来,用户只要实现自己的viewholder就可以了,该组件会自动帮你回收复用每一个item. 它不但变得更精简,也变得更加容易使用,而且更容易组合设计出自己需要的滑动布局. 使用它的理由: RecyclerView is a more advanced and flexible version of Li

【Android】时光轴效果

[Android]时光轴效果 支持平台:Android   运行环境:Eclipse   开发语言:Java 下载地址:http://t.cn/R71Ge5c 源码简介 利用ExpandableListView通过对布局的控制来实现时光轴效果,只要有点耐心,你,也可以~ 源码运行图

Android 简单实现ListView顶部悬浮效果

首先上效果图,实现如下效果: 起初在网上搜了下实现这样的效果,美团网,大众点评的"购买框"悬浮效果也是这样的,不过作者实现比较麻烦,自己想了想就根据ListView提供的一些特性进行了简单实现. 整个主要布局就是一个ListView,如果listview的上面有内容且高度比较高,可以把它当做listview的header,这样也可以避免ScrollView嵌套ListView带来的麻烦(记住这一点就不会在平时出现ScrollView与ListView各种问题了).要实现悬浮效果,主要是

Android 实现ListView不可滚动效果

希望得到的效果是ListView不能滚动,但是最大的问题在与ListView Item还必有点击事件,如果不需要点击事件那就简单了,直接设置ListView.setEnable(false); 如果还需要点击事件,滚动与点击都是在ListView Touch处理机制管理. ListView点击事件是复用ViewGroup的处理逻辑,当用户点击视图并且按下与抬起手指之间移动距离很小,满足点击事件的时间长度限制,就会触发点击事件. ListView滚动事件是自己处理,有两个判断条件,当用户触发mov

Android的ListView弹动效果

继承ListView,重写overScrollBy方法,调用super.overScrollBy()方法,替换maxOverScrollY参数 import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.widget.ListView; /** * 弹性ListView. * @author E */ public clas

RecyclerView&amp;自定义View实现时光轴效果

在QQ空间,淘宝,京东,以及一些旅游类的app上经常可以看到时间轴的效果,这种时间轴的效果有多种实现方式,本文用RecyclerView和自定义View来实现这个效果. 实现的效果图如下: 分析 从上面的效果图可以看出,这个就是一个RecyclerView,并且他的LayoutManager为LinearLayoutManager,LinearLayoutManager的方向是垂直的.但是我们注意到他的item不是都是一致的,大概有这几种情况: 只有一个item 第一个item 普通item 最

RecyclerView版的时光轴

因为现在RecyclerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,但是直接把viewholder的实现封装起来,用户只要实现自己的viewholder就可以了,该组件会自动帮你回收复用每一个item. 它不但变得更精简,也变得更加容易使用,而且更容易组合设计出自己需要的滑动布局. 使用它的理由: RecyclerView is a more advanced and flexible version of Li

一起学android之设置ListView数据显示的动画效果（24）

效果图: 平时我们要实现ListView数据显示时的动画效果,可以使用LayoutAnimationController为ListView设置动画效果,并通过ListView的setLayoutAnimation方法来设置,最后startLayoutAnimation,启动动画.参看以下代码: public class MainActivity extends Activity { private ListView lv_arrayadapter; private String[] str_na

赵雅智_AndroidUI_Android中listview可折叠伸缩仿手风琴效果（动态）

之前写了一篇静态数据listview显示手风琴效果,今天写的博客是动态实现listview的手风琴效果 静态链接:listview静态手风琴效果 数据都是存储在数据库中的,如果想要获取数据就要查询数据库 并且实现了:点击查看想要看的名片的时候,上一个打开的就能关闭 核心代码如下: package com.cards.activity; import java.util.List; import android.app.Activity; import android.app.AlertDialo