在许多App上都能看到时光轴的效果,比如携程等等,那么我们今天就利用ExpandableListView来实现一个时光轴效果,先来看看效果图:

效果还是挺简单的,这里我们主要是采用ExpandableListView来实现,关于ExpandableListView的详细使用参见(android开发之ExpandableListView的使用,实现类似QQ好友列表),我们这里主要介绍这个效果的实现:

先来看看主布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" > <TextView
android:id="@+id/title_p"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="12dp"
android:gravity="center"
android:text="2015年11月"
android:textSize="18sp" /> <View
android:id="@+id/hor_div"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@id/title_p"
android:background="#9F79EE" /> <View
android:id="@+id/ver_div"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_below="@id/hor_div"
android:layout_marginLeft="70dp"
android:background="#9F79EE" /> <TextView
android:id="@+id/title_c"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/hor_div"
android:layout_marginLeft="60dp"
android:paddingBottom="12dp"
android:paddingLeft="18dp"
android:paddingTop="12dp"
android:text="时光轴"
android:textSize="24sp" /> <ExpandableListView
android:id="@+id/lv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/title_c"
android:layout_marginLeft="60dp"
android:background="@null"
android:clickable="false"
android:divider="@null" >
</ExpandableListView> </RelativeLayout>

两条分割线用View来做,整体不难,不多说,看看MainActivity

public class MainActivity extends Activity {

	private List<TimeLineBean> list;
private ExpandableListView lv; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initData();
initView();
} private void initView() {
lv = (ExpandableListView) this.findViewById(R.id.lv);
lv.setAdapter(new MyAdapter(MainActivity.this, list));
for (int i = 0; i < list.size(); i++) {
lv.expandGroup(i);
}
lv.setGroupIndicator(null);
lv.setOnGroupClickListener(new OnGroupClickListener() { @Override
public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
return true;
}
});
} private void initData() {
list = new ArrayList<TimeLineBean>();
List<String> things = new ArrayList<String>();
things.add("六王毕,四海一;");
things.add("蜀山兀,阿房出。");
things.add("覆压三百余里,隔离天日。");
list.add(new TimeLineBean("11月24日", things));
things = new ArrayList<String>();
things.add("骊山北构而西折,");
things.add("直走咸阳。");
things.add("二川溶溶,流入宫墙。");
list.add(new TimeLineBean("11月23日", things));
things = new ArrayList<String>();
things.add("五步一楼,十步一阁;");
things.add("廊腰缦回,");
list.add(new TimeLineBean("11月22日", things));
things = new ArrayList<String>();
things.add("檐牙高啄;");
things.add("各抱地势,钩心斗角。");
things.add("盘盘焉,囷囷焉,蜂房水涡,");
things.add("矗不知乎几千万落!");
list.add(new TimeLineBean("11月21日", things));
things = new ArrayList<String>();
things.add("长桥卧波,未云何龙?");
things.add("複道行空,不霁何虹?");
things.add("高低冥迷,不知西东。");
list.add(new TimeLineBean("11月20日", things));
things = new ArrayList<String>();
things.add("歌台暖响,");
things.add("春光融融;");
list.add(new TimeLineBean("11月19日", things));
things = new ArrayList<String>();
things.add("舞殿冷袖,");
things.add("风雨凄凄。");
things.add("一日之内,一宫之间,");
things.add("而气候不齐。");
list.add(new TimeLineBean("11月18日", things));
}
}

在MainActivity中我们先初始化模拟数据,然后初始化View,初始化View的过程中,通过一个for循环让所有的group展开,然后再屏蔽掉group的点击事件,好了,再来看看Adapter:

public class MyAdapter extends BaseExpandableListAdapter {

	private Context context;
private List<TimeLineBean> list; public MyAdapter(Context context, List<TimeLineBean> list) {
this.context = context;
this.list = list;
} @Override
public Object getChild(int groupPosition, int childPosition) {
return list.get(groupPosition).getThings();
} @Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
} @Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView,
ViewGroup parent) {
ChildHolder holder = null;
if (convertView == null) {
convertView = LayoutInflater.from(context).inflate(R.layout.child_item, null);
holder = new ChildHolder();
holder.tv = (TextView) convertView.findViewById(R.id.ci_thing);
convertView.setTag(holder);
} else {
holder = (ChildHolder) convertView.getTag();
}
holder.tv.setText(list.get(groupPosition).getThings().get(childPosition));
return convertView;
} @Override
public int getChildrenCount(int groupPosition) {
return list.get(groupPosition).getThings().size();
} @Override
public Object getGroup(int groupPosition) {
return list.get(groupPosition).getDate();
} @Override
public int getGroupCount() {
return list.size();
} @Override
public long getGroupId(int groupPosition) {
return groupPosition;
} @Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
GroupHolder holder = null;
if (convertView == null) {
convertView = LayoutInflater.from(context).inflate(R.layout.group_item, null);
holder = new GroupHolder();
holder.tv = (TextView) convertView.findViewById(R.id.gi_date);
convertView.setTag(holder);
} else {
holder = (GroupHolder) convertView.getTag();
}
holder.tv.setText(list.get(groupPosition).getDate());
return convertView;
} @Override
public boolean hasStableIds() {
return false;
} @Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return false;
} class GroupHolder {
TextView tv;
} class ChildHolder {
TextView tv;
} }

这个Adapter也没啥讲的,大家如果有疑问可以参见android开发之ExpandableListView的使用,实现类似QQ好友列表,这里有ExpandableListView的详细介绍。最后就是两个item文件:

group_item.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="horizontal" > <View
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="22dp"
android:background="@drawable/circle" /> <TextView
android:id="@+id/gi_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:paddingLeft="12dp"
android:paddingTop="18dp"
android:text="11月24号"
android:textSize="22sp" /> </LinearLayout>

child_item.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" > <TextView
android:id="@+id/ci_thing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="22dp"
android:paddingTop="8dp"
android:text="11月24号"
android:textColor="#999999"
android:textSize="16sp" /> </LinearLayout>

每个group_item的前面有一个红色的实心球,这个球我们用shape来绘制,关于shape的使用参见android开发之shape详解

circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" > <corners android:radius="10dp" /> <size
android:height="10dp"
android:width="10dp" /> <solid android:color="#FF6A6A" /> </shape>

好了,这个东西貌似没难度,其实就是ExpandableListView的使用。

Demo下载http://download.csdn.net/detail/u012702547/9297507

使用ExpandableListView实现一个时光轴的更多相关文章

  1. 关于ExpandableListView的一个小例子

    喜欢显示好友QQ那样的列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到an ...

  2. android自定义View之仿通讯录侧边栏滑动,实现A-Z字母检索

    我们的手机通讯录一般都有这样的效果,如下图: OK,这种效果大家都见得多了,基本上所有的android手机通讯录都有这样的效果.那我们今天就来看看这个效果该怎么实现. 一.概述 1.页面功能分析 整体 ...

  3. 时光轴三之 ExpandableListView版时光轴效果

    上两篇讲到了用listView和recyclerView来实现时光轴,这一篇我们用ExpandableListView来实现时光轴,废话不多说,直接来代码. 还是先activity_main.xml ...

  4. Android中使用ExpandableListView实现微信通讯录界面(完善仿微信APP)

    之前的博文<Android中使用ExpandableListView实现好友分组>我简单介绍了使用ExpandableListView实现简单的好友分组功能,今天我们针对之前的所做的仿微信 ...

  5. Android中使用ExpandableListView实现好友分组

    一个视图显示垂直滚动两级列表中的条目.这不同于列表视图,允许两个层次,类似于QQ的好友分组.要实现这个效果的整体思路为: 1.要给ExpandableListView 设置适配器,那么必须先设置数据源 ...

  6. Android常用控件之GridView与ExpandableListView的用法

    概述 1.GridView:与ListView相比,可以显示多列,xml布局时其属性numColumns可以设置显示的列数. 2.ExpandableListView:与ListView相比,可以让每 ...

  7. Android之ExpandableListView

    ExpandableListView可以用来表现多层级的listView,本文主要是ExpandableListView的一个简单实现 布局文件 <LinearLayout xmlns:andr ...

  8. Android ExpandableListView使用+获取SIM卡状态信息

    ExpandableListView 是一个可以实现下拉列表的控件,大家可能都用过QQ,QQ中的好友列表就是用ExpandableListView实现的,不过它是自定义的适配器.本篇 博客除了要介绍E ...

  9. Android 高级UI设计笔记01:使用ExpandableListView组件(ListView的扩展)

    1.ExpandableListView是一个用来显示二级节点的ListView. 比如如下效果的界面: 2.使用ExpandableListView步骤 (1)要给ExpandableListVie ...

随机推荐

  1. 手势识别官方教程(8)拦截触摸事件,得到触摸的属性如速度,距离等,控制view展开

    onInterceptTouchEvent可在onTouchEvent()前拦截触摸事件, ViewConfiguration得到触摸的属性如速度,距离等, TouchDelegate控制view展开 ...

  2. IPv6 tutorial – Part 7: Zone ID and unique local IPv6 unicast addresses

    The zone ID is used to distinguish ambiguous link-local and site-local addresses. Unique local IPv6 ...

  3. WCF - Versus Web Service

    There are some major differences that exist between WCF and a Web service which are listed below. 这里 ...

  4. URAL1017. Staircases

    链接 简单递推 #include <iostream> #include<cstdio> #include<cstring> #include<algorit ...

  5. css3动画(transition)属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  6. 6个可以隐藏运行bat,浏览器等程序的方法

    在电脑启动时或者设置时间时运行指定的程序很容易实现.但是有时候还需要运行时不显示主界面,隐藏到后台运行.比如:开机时一段Bat批处理执行删除默认共享; 开机自动运行浏览器隐藏到后代打开指定网页等,希望 ...

  7. Android 应用启动渐变效果

    /** * 应用程序启动类:显示欢迎界面并跳转到主界面 * @author liux (http://my.oschina.net/liux) * @version 1.0 * @created 20 ...

  8. 016专家视图测试脚本开发_utility对象

    utility对象(1)这个例子是:Extendtest使用Extend对象加载DLL,我们可以使用它来丰富windows api函数,能够编写更为强大和灵活的测试代码 实例代码: '声明FindWi ...

  9. Java笔记(八)……数组

    数组的概念 同一种类型数据的集合.其实数组就是一个容器. 数组的好处 可以自动给数组中的元素从0开始编号,方便操作这些元素. 数组的格式 元素类型[] 数组名 = new 元素类型[个数]; int[ ...

  10. [九度OJ]1008.最短路径问题

    原题链接:http://ac.jobdu.com/problem.php?pid=1008 题目描述: 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离 ...