ExpandableListView实现侧页导航栏目

项目中需要一个需求就是在侧页中显示分类。但是这个侧页的内容是根据后台的数据会进行变更的。第一种思路就是使用textview动态加载布局，比较容易实现；后面发现可以使用ExpandableListView进行实现，比较happy啊。先上效果图

好了。实现它。。。

一、首先是适配器，大量的注释来袭

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

import com.coofond.carservice.R;
import com.coofond.carservice.shop.bean.GroupBean;

import java.util.List;

/**
 * ExpandableListAdapter 左侧侧滑页面
 * Created by IBM on 2016/10/17.
 */
public class MyExpandableListAdapter extends BaseExpandableListAdapter {
    Context mContext;
    List<GroupBean> mGroupBeans;

    //构造函数
    public MyExpandableListAdapter(Context mContext, List<GroupBean> mGroupBeans) {
        this.mContext = mContext;
        this.mGroupBeans = mGroupBeans;
    }

    //获取组中元素的个数
    @Override
    public int getGroupCount() {
        return mGroupBeans.size();
    }

    //获取指定组中的元素个数
    @Override
    public int getChildrenCount(int groupPosition) {
        if(mGroupBeans.get(groupPosition).getChildLists()==null){
            return 0;
        }
        return mGroupBeans.get(groupPosition).getChildLists().size();
    }

    //获取指定组中的数据
    @Override
    public GroupBean getGroup(int groupPosition) {
        return mGroupBeans.get(groupPosition);
    }

    /**
     * 获取指定组中的指定元素
     * @param groupPosition
     * @param childPosition
     * @return
     */
    @Override
    public String getChild(int groupPosition, int childPosition) {
        return mGroupBeans.get(groupPosition).getChildLists().get(childPosition);
    }

    //获取指定组的id,这个id必须唯一
    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    /**
     * 获取指定组中的指定元素id
     * @param groupPosition
     * @param childPosition
     * @return
     */
    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }
    /**
     * 组和子元素是否持有稳定的ID,也就是底层数据的改变不会影响到它们。
     */
    @Override
    public boolean hasStableIds() {
        return false;
    }

    /**
     * 获取显示指定组的视图对象
     *
     * @param groupPosition
     *            组位置
     * @param isExpanded
     *            该组是展开状态还是伸缩状态
     * @param convertView
     *            重用已有的视图对象
     * @param parent
     *            返回的视图对象始终依附于的视图组
     */
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        convertView= LayoutInflater.from(mContext).inflate(R.layout.item_group,null);
        TextView tvGroup= (TextView) convertView.findViewById(R.id.tv_item);
        tvGroup.setTextSize(18);
        tvGroup.setPadding(20,10,0,10);
      tvGroup.setText(getGroup(groupPosition).getGroupName()+"");
        return convertView;
    }
    /**
     * 获取一个视图对象，显示指定组中的指定子元素数据。
     *
     * @param groupPosition
     *            组位置
     * @param childPosition
     *            子元素位置
     * @param isLastChild
     *            子元素是否处于组中的最后一个
     * @param convertView
     *            重用已有的视图(View)对象
     * @param parent
     *            返回的视图(View)对象始终依附于的视图组
     */
    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        if(convertView==null){
            convertView= LayoutInflater.from(mContext).inflate(R.layout.item_group,null);
        }
        TextView tvChild= (TextView) convertView.findViewById(R.id.tv_item);
        tvChild.setTextSize(13);
        tvChild.setPadding(100,10,0,10);
        tvChild.setText(getChild(groupPosition,childPosition));
        return convertView;
    }
    /**
     * 判断子项是否可以选中，如果不写这个，子项点击事件不触发
     */
    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }
}

二、xml文件就不写了。然后上核心代码

 @Override
    protected void initData() {
        final List<GroupBean> list = new ArrayList<>();
        List<String> listchlid = new ArrayList<>();
        List<String> listchlid1 = new ArrayList<>();
        listchlid.clear();
        listchlid1.clear();
        listchlid.add("特色产品");
        listchlid.add("母婴用品");
        listchlid.add("食品饮料");
        listchlid.add("家居用品");
        listchlid.add("营养保健");
        listchlid1.add("保  养");
        listchlid1.add("钣  喷");
        listchlid1.add("美  容");
        listchlid1.add("精  品");
        GroupBean bean = new GroupBean();
        bean.setChildLists(listchlid);
        bean.setGroupName("全球海淘");
        GroupBean bean1 = new GroupBean();
        bean1.setChildLists(listchlid1);
        bean1.setGroupName("售后服务");
        GroupBean bean2 = new GroupBean();
        bean2.setChildLists(null);
        bean2.setGroupName("新车销售");
        GroupBean bean3 = new GroupBean();
        bean3.setChildLists(null);
        bean3.setGroupName("一元夺宝");
        list.clear();
        list.add(bean);
        list.add(bean1);
        list.add(bean2);
        list.add(bean3);
        MyExpandableListAdapter mAdapter = new MyExpandableListAdapter(this, list);
        exLeftMenu.setAdapter(mAdapter);
        //默认展开
        for (int i = 0; i < list.size(); i++) {
            exLeftMenu.expandGroup(i);
        }
        //组点击事件
        exLeftMenu.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
                ToastUtil.toastCenter2(MainAct.this, list.get(groupPosition).getGroupName());
                return true;
                //把他的组点击事件屏蔽,那么就不会触发展开的事件了
            }
        });

        //子项点击事件
        exLeftMenu.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
                ToastUtil.toastCenter2(MainAct.this, list.get(groupPosition).getChildLists().get(childPosition));
                return false;
            }
        });
    }

三、算了，贴个ExpandableListView的xml文件吧。。。主要是解释下属性， android:groupIndicator=”@null”是因为默认会给group级别的item有个向下的箭头。。。不要了。android:listSelector=”@color/textcolorgray”是可以设置选中item后的item的背景颜色。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/dl_left"
    android:orientation="vertical">
    <!--主视图-->
    <include layout="@layout/act_main"/>
    <!--侧滑菜单-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:layout_gravity="start">
        <ExpandableListView
            android:id="@+id/lv_leftmenu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:listSelector="@color/textcolorgray"
            android:cacheColorHint="@color/textcolorgray"
            android:groupIndicator="@null"
            >
        </ExpandableListView>
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

总结：我们用了ExpandableListview,它是extendsListView的，有了适配器，那么 我们通过mAdapter.notifyDataSetChanged();后台数据更新，我们也可以通过适配器通知这个列表的更新。比较方便，再有就是取消ExpandableListview的收缩，只要

       //绘制界面过程中默认展开
        for (int i = 0; i < list.size(); i++) {
            exLeftMenu.expandGroup(i);
        }
      //然后再屏蔽group点击事件
        //组点击事件
        exLeftMenu.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
                ToastUtil.toastCenter2(MainAct.this, list.get(groupPosition).getGroupName());
                return true;
                //把他的组点击事件屏蔽,那么就不会触发收缩的事件了
            }
        });

那么我们的这个导航栏目的条目就比较清晰了。顺便推荐下侧页的这种覆盖效果。。。本来打算用popwindow的，后来发现android.support.v4.widget.DrawerLayout简直是契合的不得了。相当好用。。。

四、番外，DrawerLayout的简单使用，感觉巨好用啊。你的主界面完全不用动，只要include进来就可以了。要注意下，侧页的布局的开始绘制是android:layout_gravity=”start”就可以了。
then获取这个控件对象，点击按钮，注册事件，就是这么简单~自带手势滑动显示侧页以及关闭侧页。

//打开侧滑页
mDrawerLayout.openDrawer(GravityCompat.START);

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/dl_left"
    android:orientation="vertical">
    <!--主视图-->
    <include layout="@layout/act_main"/>
    <!--侧滑菜单-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:layout_gravity="start">
        <ExpandableListView
            android:id="@+id/lv_leftmenu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:listSelector="@color/textcolorgray"
            android:cacheColorHint="@color/textcolorgray"
            android:groupIndicator="@null"
            >
        </ExpandableListView>
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

五、好了，have a nice day!