ExpandableListView版时光轴效果

上两篇讲到了用listView和recyclerView来实现时光轴，这一篇我们用ExpandableListView来实现时光轴，废话不多说，直接来代码。

      还是先activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#f7f7f7" >
<View
android:id="@+id/top_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/head_line_bg" />

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@id/top_line" >

<View
android:id="@+id/group_tiao"
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginLeft="55dp"
android:background="@color/time_line_bg" />

<ExpandableListView
android:id="@+id/expandlist"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@+id/courses_title"
android:cacheColorHint="#00000000"
android:divider="@null" />
</RelativeLayout>
</RelativeLayout>

<?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:gravity="center_vertical" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="45dp"
android:layout_marginRight="5dp"
android:background="@drawable/img_line_point"
android:contentDescription="@string/app_name" />

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
android:orientation="vertical" >

<TextView
android:id="@+id/one_status_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textColor="#000000"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>

很简单的布局也就是一个组标题。

接着是child_status_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"
android:gravity="center_vertical" >
<ImageView
android:padding="8dp"
android:id="@+id/img"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="50dp"
android:scaleType="fitXY" />

<TextView
android:id="@+id/content_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:layout_marginLeft="70dp"
android:layout_marginTop="6dp"
android:textColor="#999999" />
</LinearLayout>

很简单就是左边图片右边文字。

然后来看代码，先来数据适配器

       package com.zy.adapter;
import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.zy.R;
import com.zy.entity.ChildStatusEntity;
import com.zy.entity.GroupStatusEntity;
import com.zy.entity.TimeFormat;
public class StatusExpandAdapter extends BaseExpandableListAdapter {
private LayoutInflater inflater = null;
private List<GroupStatusEntity> groupList;

/**
* 构造方法
*
* @param context
* @param oneList
*/
public StatusExpandAdapter(Context context,
List<GroupStatusEntity> group_list) {
this.groupList = group_list;
inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

/**
* 返回一级Item总数
*/
@Override
public int getGroupCount() {

return groupList == null ? 0 : groupList.size();
}

/**
* 返回二级Item总数
*/
@Override
public int getChildrenCount(int groupPosition) {
return groupList == null ? 0
: (groupList.get(groupPosition) == null ? 0 : (groupList
.get(groupPosition).getChildList() == null ? 0
: groupList.get(groupPosition).getChildList().size()));
}

/**
* 获取一级Item内容
*/
@Override
public Object getGroup(int groupPosition) {
// TODO Auto-generated method stub
return groupList.get(groupPosition);
}

/**
* 获取二级Item内容
*/
@Override
public Object getChild(int groupPosition, int childPosition) {
return groupList.get(groupPosition).getChildList().get(childPosition);
}

@Override
public long getGroupId(int groupPosition) {
// TODO Auto-generated method stub
return groupPosition;
}

@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
@Override
public boolean hasStableIds() {
return false;
}
@Override
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
GroupViewHolder holder = new GroupViewHolder();
if (convertView == null) {
convertView = inflater.inflate(R.layout.group_status_item, null);
}
holder.groupName = (TextView) convertView
.findViewById(R.id.one_status_name);

holder.groupName.setText(TimeFormat.format("yyyy.MM.dd",groupList.get(groupPosition).getGroupName()));

return convertView;
}

@Override
public View getChildView(int groupPosition, int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
ChildViewHolder viewHolder = null;
ChildStatusEntity entity = (ChildStatusEntity) getChild(groupPosition,
childPosition);
if (convertView != null) {
viewHolder = (ChildViewHolder) convertView.getTag();
} else {
viewHolder = new ChildViewHolder();
convertView = inflater.inflate(R.layout.child_status_item, null);
viewHolder.content_text = (TextView) convertView
.findViewById(R.id.content_text);
viewHolder.img=(ImageView) convertView.findViewById(R.id.img);
}
viewHolder.content_text.setText(entity.getContentText());
viewHolder.img.setImageResource(entity.getImgSrc());
convertView.setTag(viewHolder);
return convertView;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}

private class GroupViewHolder {
TextView groupName;
}
private class ChildViewHolder {
public TextView content_text;
public ImageView img;
}
}
这就是简单的ExpandableListView的适配器的写法，不明白的自己去查api咯。
然后里面封装了2个实体对象，当然也就是group和child的类对象：
package com.zy.entity;
import java.util.List;
/**
* 一级Item实体类
*
*
*/
public class GroupStatusEntity {
private String groupName;
/** 二级Item数据列表 **/
private List<ChildStatusEntity> childList;
public String getGroupName() {
return groupName;
}

public void setGroupName(String groupName) {
this.groupName = groupName;
}
public List<ChildStatusEntity> getChildList() {
return childList;
}
public void setChildList(List<ChildStatusEntity> childList) {
this.childList = childList;
}
}
package com.zy.entity;

/**
* 二级Item实体类
*
* @author zihao
*
*/
public class ChildStatusEntity {
/** 预计完成时间 **/
private String contentText;
/** 是否已完成 **/
private boolean isfinished;
private int imgSrc;
public int getImgSrc() {
return imgSrc;
}
public void setImgSrc(int imgSrc) {
this.imgSrc = imgSrc;
}
public String getContentText() {
return contentText;
}
public void setContentText(String contentText) {
this.contentText = contentText;
}
public boolean isIsfinished() {
return isfinished;
}
public void setIsfinished(boolean isfinished) {
this.isfinished = isfinished;
}
}

哈哈接下来是mainActivity咯；

       package com.zy;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.ExpandableListView.OnGroupExpandListener;
import com.zy.R;
import com.zy.adapter.StatusExpandAdapter;
import com.zy.entity.ChildStatusEntity;
import com.zy.entity.DateComparator;
import com.zy.entity.GroupStatusEntity;
public class MainActivity extends Activity {
private ExpandableListView expandlistView;
private StatusExpandAdapter statusAdapter;
private Context context;
private int count = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
context = this;
expandlistView = (ExpandableListView) findViewById(R.id.expandlist);
initExpandListView();
}

/**
* 初始化可拓展列表
*/
private void initExpandListView() {
statusAdapter = new StatusExpandAdapter(context, getListData());
expandlistView.setAdapter(statusAdapter);
expandlistView.setGroupIndicator(null); // 去掉默认带的箭头
// expandlistView.setSelection(0);// 设置默认选中项

// 遍历所有group
int groupCount = expandlistView.getCount();
expandlistView.expandGroup(0);
for (int i = 0; i < groupCount; i++) {
if (i <= 1) {
expandlistView.expandGroup(i);
}
}

expandlistView.setOnGroupClickListener(new OnGroupClickListener() {

@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
return false;
}
});
expandlistView.setOnGroupExpandListener(new OnGroupExpandListener() {

@Override
public void onGroupExpand(int groupPosition) {
count++;
for (int i = 0, count = expandlistView
.getExpandableListAdapter().getGroupCount(); i < count; i++) {
if (groupPosition != i && count > 2) {// 关闭其他分组
expandlistView.collapseGroup(i);
count = 1;
}
}
}
});
}

private List<GroupStatusEntity> getListData() {
List<GroupStatusEntity> groupList;
String[] strArray = new String[] { "20140710", "20081201", "20150809" };
String[][] childTimeArray = new String[][] {
{
"敬往事一杯酒，再爱也不回头",
"择一城终老，遇一人白首。",
"有时候邀女生出来玩她拒绝你的原因只有两个，一是她懒得洗头，二是你的邀请不值得她洗头。女生非要约人出来也有两个原因，一是她洗了头不出来玩不甘心，二是突然很想吃某家的东西。",
"我见过千万人像你的发像你的眼却都不是你的脸。" },
{
"你说长相不重要，是因为你长了一张就算刚睡醒也敢自拍的脸。你说成绩不重要，是因为你随随便便又不小心考了次年级前五。你说恋爱不重要，是因为你身边备胎多的可以摆四五桌麻将了。你说家境不重要，是因为你有一个看你皱一下眉就给你买新款的父母。你说健康不重要，是因为你不会半夜因为疼痛而翻来覆去咳得撕心裂肺。你说不重要不过是因为你已经拥有了，你说不重要不过是因为你从来不知道别人的努力和挣扎。",
"你永远不知道在你发了个“嗯”或者“哦”还能继续回复你的人，是有多在乎你！",
"最想说的话在眼睛里，草稿箱里，还有梦里" },
{ "那些花了好久才想明白的事，总是会被偶尔的情绪失控全部推翻。",
"折磨人的不是离别，而是感动的回忆，让人很容易站在原地还以为回得去", "敬往事一杯酒，再爱也不回头！",
"可以一杯滚水烫死我，也可以一杯冰水冷死我，但不能一杯温水耗着我，我要的是黑白分明直接利落" } };
groupList = new ArrayList<GroupStatusEntity>();
for (int i = 0; i < strArray.length; i++) {
GroupStatusEntity groupStatusEntity = new GroupStatusEntity();
groupStatusEntity.setGroupName(strArray[i]);
List<ChildStatusEntity> childList = new ArrayList<ChildStatusEntity>();
for (int j = 0; j < childTimeArray[i].length; j++) {
ChildStatusEntity childStatusEntity = new ChildStatusEntity();
childStatusEntity.setContentText(childTimeArray[i][j]);
if (j % 3 == 0) {
childStatusEntity.setImgSrc(R.drawable.one);
}
if (j % 3 == 1) {
childStatusEntity.setImgSrc(R.drawable.two);
}
if (j % 3 == 2) {
childStatusEntity.setImgSrc(R.drawable.three);
}
childStatusEntity.setIsfinished(true);
childList.add(childStatusEntity);
}
groupStatusEntity.setChildList(childList);
groupList.add(groupStatusEntity);
}
// 将数据按照时间排序
DateComparator comparator = new DateComparator();
Collections.sort(groupList, comparator);
return groupList;
}
}

哈哈写完了，看下效果图：


              


马蛋，手机差截图不用愁了，用asm.jar来显示生成图片传上来清晰多了。

运行asm.jar后是这样的效果：



asm.jar的下载地址http://download.csdn.net/download/lxq_xsyu/6666965，我可是下了好几个不能用的，说什么清单文件为空，醉了，步骤呢

1、将其copy到platform-tools目录下

2、运行java -jar asm.jar即可启动

按右键就出现如此菜单选项：



图片就可以直接保存了（save image），zoom呢是设置屏幕的大小，哈哈哈，讲完了，又要去写代码了，最后附上源码，想看下效果的可以去下一下，不要积分的http://download.csdn.net/detail/u013278099/8994581，哈哈时光轴系列的文章就写完了，觉得可以的话就点个赞，不足之处给我指出，让我也多学习大家的知识。