你是否觉得手机QQ上的好友列表那个控件非常棒? 不是..... 那也没关系,学多一点知识对自己也有益无害。
(资料图片)
那么我们就开始吧。
展开型列表控件, 原名ExpandableListView
是普通的列表控件进阶版, 可以自由的把列表进行收缩, 非常的方便兼好看。
首先看看我完成的截图, 虽然界面不漂亮, 但大家可以自己去修改界面。
该控件需要一个主界面XML 一个标题界面XML及一个列表内容界面XML
首先我们来看看 mian.xml 主界面
复制代码 代码如下://该界面非常简单, 只要一个ExpandableListView即可
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ExpandableListView
android:id="@id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
groups.xml 该界面是父标题界面
我们只要放上一个要显示出来的标题TextView控件上去即可
复制代码 代码如下:<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="@+id/textGroup"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="40px"
android:paddingTop="6px"
android:paddingBottom="6px"
android:textSize="15sp"
android:text="No data"
/>
</LinearLayout>
childs.xml 是子控件, 直接显示列表内容
复制代码 代码如下:<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="@+id/textChild"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="60px"
android:paddingTop="10px"
android:paddingBottom="10px"
android:textSize="20sp"
android:text="No Data"
/>
</LinearLayout>
接下来再上主代码, 命名有点乱, 大家真正用于开发时可不要这样命名啊.
复制代码 代码如下:public class ExpandActivity extends ExpandableListActivity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//创建二个一级条目标题
Map<String, String> title_1 = new HashMap<String, String>();
Map<String, String> title_2 = new HashMap<String, String>();
title_1.put("group", "开发");
title_2.put("group", "管理");
//创建一级条目容器
List<Map<String, String>> gruops = new ArrayList<Map<String,String>>();
gruops.add(title_1);
gruops.add(title_2);
//创建二级条目内容
//内容一
Map<String, String> content_1 = new HashMap<String, String>();
Map<String, String> content_2 = new HashMap<String, String>();
content_1.put("child", "VC++");
content_2.put("child", "Java");
List<Map<String, String>> childs_1 = new ArrayList<Map<String,String>>();
childs_1.add(content_1);
childs_1.add(content_2);
//内容二
Map<String, String> content_3 = new HashMap<String, String>();
Map<String, String> content_4 = new HashMap<String, String>();
content_3.put("child", "敏捷开发");
content_4.put("child", "迭代开发");
List<Map<String, String>> childs_2 = new ArrayList<Map<String,String>>();
childs_2.add(content_3);
childs_2.add(content_4);
//存放两个内容, 以便显示在列表中
List<List<Map<String, String>>> childs = new ArrayList<List<Map<String,String>>>();
childs.add(childs_1);
childs.add(childs_2);
//创建ExpandableList的Adapter容器
//参数: 1.上下文 2.一级集合3.一级样式文件 4. 一级条目键值5.一级显示控件名
// 6. 二级集合7. 二级样式8.二级条目键值9.二级显示控件名
SimpleExpandableListAdapter sela = new SimpleExpandableListAdapter(
this, gruops, R.drawable.groups, new String[]{"group"}, new int[]{R.id.textGroup},
childs, R.drawable.childs, new String[]{"child"}, new int[]{R.id.textChild}
);
//加入列表
setListAdapter(sela);
}
}
//最后, 如果想响应各操作的话, 就要重载下面的方法
//列表内容按下
@Override
public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id)
{
// TODO Auto-generated method stub
return super.onChildClick(parent, v, groupPosition, childPosition, id);
}
//二级标题按下
@Override
public boolean setSelectedChild(int groupPosition, int childPosition, boolean shouldExpandGroup)
{
// TODO Auto-generated method stub
return super.setSelectedChild(groupPosition, childPosition, shouldExpandGroup);
}
//一级标题按下
@Override
public void setSelectedGroup(int groupPosition)
{
// TODO Auto-generated method stub
super.setSelectedGroup(groupPosition);
}
再最后, 运行你的模拟器就可以看见啦。
将上面的ExpandableListView控件化.
控件化比较简单我们只要用普通的Activity类就可以了, 不用再继承ExpandableListView.
只需要在成员变量中添加
private ExpandableListView expandList;
然后在添加内容时改成
expandList.setAdapter(sela);
就可以了。 当然, 响应事件Listener也可以自己添加。
附:另一个例子
ExpandableListView的用法与ListView和GridView,Gallery 类似,都是通过一个Adapter来显示.
main.xml:
复制代码 代码如下:<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ExpandableListView android:id="@+id/elv" android:indicatorRight="160dp"
android:layout_width="fill_parent" android:layout_height="fill_parent">
</ExpandableListView>
<!-- indicatorRight 设置那个小图标右边缘与 ExpandableListView左边缘的间距-->
</LinearLayout>
ElvAdapter.java
复制代码 代码如下:package com.test;
import java.util.ArrayList;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.TextView;
import android.widget.LinearLayout.LayoutParams;
public class ElvAdapter extends BaseExpandableListAdapter
{
ArrayList<ElvObject> objs;
Context context;
ElvAdapter(Context context,ArrayList<ElvObject> objs)
{
this.objs=objs;
this.context=context;
}
@Override
public Object getChild(int groupPosition, int childPosition)
{
// TODO Auto-generated method stub
return objs.get(groupPosition).childs.get(childPosition);
}
@Override
public long getChildId(int groupPosition, int childPosition)
{
// TODO Auto-generated method stub
return childPosition;
}
@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent)
{
//子元素的View
TextView tv=new TextView(context);
tv.setText(objs.get(groupPosition).childs.get(childPosition));
tv.setLayoutParams(new ExpandableListView.LayoutParams(ExpandableListView.LayoutParams.FILL_PARENT,ExpandableListView.LayoutParams.WRAP_CONTENT));
return tv;
}
@Override
public int getChildrenCount(int groupPosition)
{
// TODO Auto-generated method stub
return objs.get(groupPosition).childs.size();
}
@Override
public Object getGroup(int groupPosition)
{
// TODO Auto-generated method stub
return objs.get(groupPosition);
}
@Override
public int getGroupCount()
{
// TODO Auto-generated method stub
return objs.size();
}
@Override
public long getGroupId(int groupPosition)
{
// TODO Auto-generated method stub
return groupPosition;
}
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent)
{
//分组的View
TextView tv=new TextView(context);
tv.setText(objs.get(groupPosition).groupName);
ExpandableListView.LayoutParams params=new ExpandableListView.LayoutParams(ExpandableListView.LayoutParams.FILL_PARENT,60);
tv.setLayoutParams(params);
return tv;
}
@Override
public boolean hasStableIds()
{
// TODO Auto-generated method stub
return false;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition)
{
// TODO Auto-generated method stub
return true;
}
}
class ElvObject{
String groupName="";
ArrayList<String> childs=new ArrayList<String>();
ElvObject(String groupName,ArrayList<String> childs)
{
this.groupName=groupName;
this.childs=childs;
}
}
注意下面还有一个ElvObject类
主程序AndroidTestActivity.java
复制代码 代码如下:package com.test;
import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ExpandableListView;
public class AndroidTestActivity extends Activity
{
/** Called when the activity is first created. */
ExpandableListView elv;
ElvAdapter adapter;
ArrayList<ElvObject> objs=new ArrayList<ElvObject>();
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
elv=(ExpandableListView)findViewById(R.id.elv);
adapter=new ElvAdapter(this,objs);
elv.setAdapter(adapter);
ArrayList<String> list=new ArrayList<String>();
list.add("aaa");
list.add("bbb");
list.add("ccc");
objs.add(new ElvObject("英文",list));
ArrayList<String> list2=new ArrayList<String>();
list2.add("111");
list2.add("222");
list2.add("333");
list2.add("444");
objs.add(new ElvObject("数字",list2));
}
}