时光轴一之listView实现时光轴效果
尼玛。非要搞什么时光轴,一想简单的不就是个listView吗,然后一步一步来就好了,哈哈别看那么好看事实上不要想多了。
时光轴timeline最大的作用就是把过去的事物系统化、完整化、精确化。时间轴可以让用户更直观的看到,我的这一刻在做什么。那一刻做过什么,根据时间顺序。把一方面或多方面的时间足迹事件串联起来,形成相对完整的记录体系,再运用图文的形式呈现给用户;页面简单。表现形式特别,一直以来受到广大用户的欢迎。
qq空间的时光轴还是用起来蛮不错的,看图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
要实现我们就慢慢来吧。尽管效果赶不上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>
主布局非常easy。就是一个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;
}
}
非常easy的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的使用,不喜勿喷啊,小伙伴们,认为不错就给个赞。应该非常快吧,感觉加班前可以搞定的样子。加油小伙伴们,请继续关注时光轴系列篇 时光轴二之RecyclerView版时光轴效果。
come
on ,enjoy it.
时光轴一之listView实现时光轴效果的更多相关文章
- 时光轴二之RecyclerView版时光轴效果
由于如今RecyclerView是support-v7包中的新组件,是一个强大的滑动组件.与经典的ListView相比,相同拥有item回收复用的功能,可是直接把viewholder的实现封装起来,用 ...
- listview选中没有效果
listview选中没有效果了,设置了android:listselector也没有效果,最后发现是listview中的item布局设置了背景颜色导致,把item的背景色去掉就OK了 http://b ...
- listview 拖动item效果实现
listview 拖动item效果实现 效果图如下: 拖拽前: 拖拽后: 首先参考源码中:TouchInterceptor 类,该类会在下面给出: 第一步:主类: /** * */ packag ...
- 时光轴三之 ExpandableListView版时光轴效果
上两篇讲到了用listView和recyclerView来实现时光轴,这一篇我们用ExpandableListView来实现时光轴,废话不多说,直接来代码. 还是先activity_main.xml ...
- Android 实现ListView不可滚动效果
希望得到的效果是ListView不能滚动,但是最大的问题在与ListView Item还必有点击事件,如果不需要点击事件那就简单了,直接设置ListView.setEnable(false); 如果还 ...
- React Native之ListView实现九宫格效果
概述 在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ListView是基于ScrollView扩展 ...
- Android 开源库StickyListHeadersListView来实现ListView列表分组效果
项目中有一新的需求,要求能像一些Android机带"联系人列表"一样,数据可以自动分组,且在列表滑动过程中,列表头固定在顶部,效果图如下: 下面就带大家实现上面的效果, 首先,我们 ...
- ListView滑动删除效果实现
通过继承ListView然后结合PopupWindow实现 首先是布局文件: delete_btn.xml:这里只需要一个Button <?xml version="1.0" ...
- uwp,GridView、ListView取消选中效果
在SelectionChanged事件中,添加两行代码,取消点击Item后的选中效果 void GridViewSelectionChanged(object sender, SelectionCha ...
随机推荐
- 算法复习——splay+启发式合并(bzoj2733-永无乡)
题目: Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通 ...
- spring工作机制及为什么要用?
spring工作机制及为什么要用?1.spring mvc请所有的请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责对请求进行真正的处理工作.2.DispatcherSer ...
- Garbage First介绍
本文摘自<构建高性能的大型分布式Java应用>一书,Garbage First简称G1,它的目标是要做到尽量减少GC所导致的应用暂停的时间,让应用达到准实时的效果,同时保持JVM堆空间的利 ...
- Bat命令学习 (转载)
基础部分:====================================================================== 一.基础语法: 1.批处理文件是一个“.bat” ...
- kubernetes---CentOS7安装kubernetes1.11.2图文完整版
转载请注明出处:kubernetes-CentOS7安装kubernetes1.11.2图文完整版 架构规划 k8s至少需要一个master和一个node才能组成一个可用集群. 本章我们搭建一个mas ...
- BZOJ4723: [POI2017]Flappy Bird
$n \leq 500000$个水管,每秒横坐标加一,纵坐标如果你点击就+1否则-1,问从$(0,0)$飞到$m$处最少点多少次,或者说明无解. 如果能飞到某个水管的高度区间$[L,R]$,那么答案肯 ...
- Laravel 之Artisan
简介: Artisan是Laravel中自带的命令行工具的名称: 由强大的Symfony Console组件驱动的: 提供了一些对应用开发有帮助的命令: 查看所有可用的Artisan的命令 php a ...
- HTML网页滚动加载--mark一下
console控制台: >: function stroll(){ window.scrollTo(, document.body.scrollHeight); }; >: window. ...
- luogu P3420 [POI2005]SKA-Piggy Banks
题目描述 Byteazar the Dragon has NN piggy banks. Each piggy bank can either be opened with its correspon ...
- the import org.springframewok.test cannot be resolved
在写Spring的单元测试时遇见了问题,注解@ContextConfiguration和SpringJUnit4ClassRunner.class无法导包.手动导包后错误为“the import or ...