ExpandableListView实现侧页导航栏目

来源：互联网发布：山东省软件评测中心编辑：程序博客网时间：2024/06/18 10:40

项目中需要一个需求就是在侧页中显示分类。但是这个侧页的内容是根据后台的数据会进行变更的。第一种思路就是使用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!

1 0