使用ExpandableListView实现一个时光轴

在许多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

时间: 11-25

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

ExpandableListView版的时光轴

上两篇讲到了用listView和recyclerView来实现时光轴,这一篇我们用ExpandableListView来实现时光轴,废话不多说,直接来代码. 还是先activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" an

使用ExpandableListView做一个类似QQ列表效果图

分组列表视图(ExpandableListView) 和ListView不同的是它是一个两级的滚动列表视图,每一个组可以展开,显示一些子项,类似于QQ列表,这些项目来至于ExpandableListAdapter的子类,也就是说,要实现向里面添加项目,必须写一个子类实现ExpandableListAdapter的接口或者使用系统为我们实现在子类 常用属性 1. android:childDivider 指定各组内子类表项之间的分隔条, 2. android:childIndicator 显示在子

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

我们的手机通讯录一般都有这样的效果,如下图: OK,这种效果大家都见得多了,基本上所有的Android手机通讯录都有这样的效果.那我们今天就来看看这个效果该怎么实现. 一.概述 1.页面功能分析 整体上来说,左边是一个ListView,右边是一个自定义View,但是左边的ListView和我们平常使用的ListView还有一点点不同,就是在ListView中我对所有的联系人进行了分组,那么这种效果的实现最常见的就是两种思路: 1.使用ExpandableListView来实现这种分组效果 2.使

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

概述 1.GridView:与ListView相比,可以显示多列,xml布局时其属性numColumns可以设置显示的列数. 2.ExpandableListView:与ListView相比,可以让每一列单元都拥有子列表. 内容 GridView 显示3列和多行的图片以及名称 布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://sc

Android中使用ExpandableListView实现好友分组

一个视图显示垂直滚动两级列表中的条目.这不同于列表视图,允许两个层次,类似于QQ的好友分组.要实现这个效果的整体思路为: 1.要给ExpandableListView 设置适配器,那么必须先设置数据源. 2.数据源,就是此处的适配器类,此方法继承了BaseExpandableListAdapter,它是ExpandableListView的一个子类.需要重写里面的多个方法.方法的意思,代码中都有详细的注释.数据源中,用到了自定义的View布局,此时根据自己的需求,来设置组和子项的布局样式.get

Android(java)学习笔记197:使用ExpandableListView组件(ListView的扩展)

1.ExpandableListView是一个用来显示二级节点的ListView. 比如如下效果的界面: 2.使用ExpandableListView步骤 (1)要给ExpandableListView设置适配器,那么必须先设置数据源: (2)数据源,就是此处的适配器类ExpandableAdapter,此方法继承了BaseExpandableListAdapter,它是ExpandableListView的一个子类.需要重写里面的多个方法.getChildView()和getGroupView

【Android UI设计】ExpandableListView详解

一.前言 今天我们来实现一下如下这个效果,类似于QQ好友分组的UI效果,废话不多说,先上效果图: ExpandableListView是一个用来显示二级节点的listview.默认展示的是第一级的分组,点击某个分组后会展开该分组下的子列表,下面我们就一步步来实现这个效果. 二.实现过程 1.首先在activity_main.xml中指定ExpandableListView组件 <RelativeLayout xmlns:android="http://schemas.android.com

仿Expandablelistview效果的ListView(加入了子列表渐入渐出的动画)

新来的项目要求第一眼一看就是用Expandablelistview.效果图如下:             其实本来希望直接使用Expandablelistview的,但是需求Expandablelistview在展开一个group时有个动画效果--该group的child一个一个滑动出来并且把下面的group"挤"下去.本以为这个Expandablelistview组件肯定有相关方法的,但竟然没有!网上居然也查不到(有很多人问同样的问题,答案却都是:继承Expandablelistvi

A022-列表容器之ExpandableListView

概述 本节课介绍Android中可实现二级可展开收缩列表的ExpandableListView容器,笔者感觉它非常难用并且难理解,很多时候我们可能需要对控件进行扩展和定制,然而它不太方便扩展,它使用难点主要在数据结构上和对控件的事件监听,其他的实现方式类似ListView,下面会提供笔者在实际开发中使用到的案例. 案例 上面实现的效果可展开的二级列表,每个组项都可能有若干个子项,默认的ExpandableListView不太美观,我们需要通过自定义布局类美化它,在使用过程中有一些需要我们去了解的