关闭

ExpandableListView的使用

标签: expandablelistview
175人阅读 评论(0) 收藏 举报
分类:

介于本人刚接触不久,如有出现低级亦或重大的错误,勿喷还请悉心指出,小学生定会虚心吸取~~


话表正文。

ExpandableListView,字面意为可展开列表。

如图所示,这是不加任何修饰的ExpandableListView

从上图我们便可知,ExpandableListView的应用大概是为了更好的可视化的展示某些繁杂信息所用的,就好比你QQ好友列表,如果是一股脑的ListView那样,碰上个稍微强迫症患者还不是要搞出大事情?

但是我们又不难看出ExpandableListView在:
未展开情形
是不是很像是一个ListView?
然后我们发现果然
public class ExpandableListView extends ListView
或许这也是ExpandableListView名字的由来,名如其人。
那么,我们是不是可以这么来理解:外面是父列表,父item,点开是子列表,子item。
然后,因为这是两个ListView的结合,那么就意味着会有两个不同的布局去为这两个ListView展示东西而准备。
就如我所展示图片内容,我为他们的布局分别是:(父)图片文字1:1,(子)仅文字。
接下来我们就要为其提供数据:

private ArrayList<Group> glist = new ArrayList<Group>();
private ArrayList<ArrayList<String>> strlists = new ArrayList<ArrayList<String>>();

其中用来展示父item的Group类里封装的是该列表所展示的图片和名字资源。
子item则是装载的是“步骤”的集合,之所以是以ArrayList

import java.util.ArrayList;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.test.month.R;
import com.test.month.bean.Group;
import com.test.month.utils.ImageLoaderUtils;

public class MyExpandableListViewAdapter extends BaseExpandableListAdapter {
    //该视图所在的上下文和父子数据集合
    private Context context;
    private ArrayList<Group> glist;
    private ArrayList<ArrayList<String>> strlists;

    public MyExpandableListViewAdapter(Context context, ArrayList<Group> glist,
            ArrayList<ArrayList<String>> strlists) {
        this.context = context;
        this.glist = glist;
        this.strlists = strlists;
    }
    //以下继承BaseExpandableListAdapter后重写的方法
    //指父item的数量
    @Override
    public int getGroupCount() {
        return glist.size();
    }
    //指子item的数量
    //从他括号里的内容可以看出,这个子item的数量是指单个父item下的子item数量
    @Override
    public int getChildrenCount(int groupPosition) {
        return strlists.get(groupPosition).size();
    }
    //获取父item
    @Override
    public Object getGroup(int groupPosition) {
        return glist.get(groupPosition);
    }
    //获取子item
    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return strlists.get(groupPosition).get(childPosition);
    }
    //获取父item的id,可以不写。
    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }
    //获取子item的id,可以不写。
    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }
    //是否有唯一的id
    @Override
    public boolean hasStableIds() {
        return true;
    }
    //设置父item的布局
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
            View convertView, ViewGroup parent) {

        convertView = View.inflate(context, R.layout.group, null);
        ImageView iv_group = (ImageView) convertView.findViewById(R.id.iv_group);
        TextView tv_group = (TextView) convertView.findViewById(R.id.tv_group);
        DisplayImageOptions options = ImageLoaderUtils.initoptions();
        ImageLoader.getInstance().displayImage(glist.get(groupPosition).getIcon(), iv_group, options);
        tv_group.setText(glist.get(groupPosition).getName());

        return convertView;
    }
    //设置子item的布局
    @Override
    public View getChildView(int groupPosition, int childPosition,
            boolean isLastChild, View convertView, ViewGroup parent) {

        convertView = View.inflate(context, R.layout.child, null);
        TextView tv_child = (TextView) convertView.findViewById(R.id.tv_child);
        tv_child.setText(strlists.get(groupPosition).get(childPosition));

        return convertView;
    }
    //设置子item是否可以点击
    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

}

此时,便可以简单展示ExpandableListView,但是运行上去,我们点了几下不难发现,点开每一个父item,不去关闭的话,是一直开着的,这种情况我们可以这么做:

//点击某列时,其他列为关闭状态
        elv_food.setOnGroupExpandListener(new OnGroupExpandListener() {
            @Override
            public void onGroupExpand(int groupPosition) {

                //逻辑是点击这个组别时,返回的这个值是否是在组的数组中,是则开,否则闭
                for (int i = 0; i < glist.size(); i++) {
                    if(groupPosition!=i){

                        //关闭
                        elv_food.collapseGroup(i);

                    }
                }

            }
        });

(这段为摘抄-↓-)
点击父item展开,并及时关闭其他父item,同时将该展开的item在当前所显示的界面置顶,并非是跳到该ExpandableListView的顶端。
但是此方法难以关闭当前item,只是想点开哪个点开那个,显目一些罢了。

elv_food.setOnGroupClickListener(new OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView parent, View v,
                    int groupPosition, long id) {
int sign = -1;
if (sign == -1) {
                    // 展开
                    expandable.expandGroup(groupPosition);
                    // 置顶
                    expandable.setSelectedGroup(groupPosition);
                    sign = groupPosition;
                } else if (sign == groupPosition) {
                    // 同一个条目收起
                    expandable.collapseGroup(groupPosition);

                    sign = -1;
                } else {
                    // 上一个条目收起
                    expandable.collapseGroup(sign);
                    // 当前条目展开
                    expandable.expandGroup(groupPosition);
                    // 当前条目置顶
                    expandable.setSelectedGroup(groupPosition);
                    sign = groupPosition;
                }
                    return true;
            }
        });

最后注意其方法,group打头的是对父item的事件,child是对子item的事件。
最后是如果你不喜欢它默认的小箭头的话,你可以使用selector的方法去改变:
而这个方法是基于ExpandableListView布局里面的

android:groupIndicator="@drawable/selector"

这个方法。
首先创建一个drawable文件夹,在创建一个selector的xml,写入如下代码:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_expanded="true" android:drawable="@drawable/xxxx" />
<item android:drawable="@drawable/yyyy" />
</selector>

xxxx和yyyy是你想要替换的两张图片,分别是点击后和点击前的。
这么做,有时候会使图片出现拉伸的现象而横生怪异丑陋的感觉,但是网上有一个9-path的图片处理方法,貌似只是对png格式的。
CSDN_9-path的下载地址
CSND_9-path的用法

小学生之言,或有不确之处,望请多多指正。

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2298次
    • 积分:123
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:7篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论