可点击展开的ListView－－ExpandableListView

我的Android Studio配置：

---

主要内容

一、ExpandableListView的基本使用

二、ExpandableListView的个人案例

---

一、ExpandableListView的基本使用

代码地址：http://download.youkuaiyun.com/detail/cjh_android/9426019
先上效果图：

MainActivity的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<merge
 xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".activity.MainActivity">

    <ExpandableListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ></ExpandableListView>

</merge>

Item的布局文件，写的繁琐了点，不过这是为了个人案列的情况写的，而且其中的SurfaceView只是一个占位控件，并没有什么用，因为SurfaceView的绘制不是UI线程去做的，这纯属个人习惯：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".activity.MainActivity">

    <LinearLayout
        android:id="@+id/item_ll"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1">

        <TextView
            android:textSize="18sp"
            android:id="@+id/teacher_tv"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:padding="3dp"
            android:text="老师" />

        <SurfaceView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:visibility="invisible" />
    </LinearLayout>

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:scaleType="fitCenter"
        android:src="@drawable/up" />

</LinearLayout>

子Item的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity">

    <TextView
        android:gravity="center_horizontal"
        android:textSize="14sp"
        android:id="@+id/student_tv"
        android:text="Hello World!"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

布局很简单，接下来我们去MainActivity中去实现效果，在贴代码之前说下我定义的一些东西，每个条目都是一个teacher，每个teacher会有多个学生：
适配器使用的是对应的BaseExpandableListAdapter：

       /**
         * 相当于普通listview中的getCount()
         *
         * @return
         */
        @Override
        public int getGroupCount() {
            return 0;
        }

        /**
         * ListView中每个Item中数据的个数
         *
         * @param groupPosition
         * @return
         */
        @Override
        public int getChildrenCount(int groupPosition) {
            return 0;
        }

        /**
         * ListView中Item对应的对象
         *
         * @param groupPosition
         * @return
         */
        @Override
        public Object getGroup(int groupPosition) {
            return null;
        }

        /**
         * 每个Item下每个条目对应的对象
         *
         * @param groupPosition
         * @param childPosition
         * @return
         */
        @Override
        public Object getChild(int groupPosition, int childPosition) {
            return null;
        }

        /**
         * ListView中的getView，初始化Item的控件
         *
         * @param groupPosition
         * @param isExpanded
         * @param convertView
         * @param parent
         * @return
         */
        @Override
        public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
            return convertView;
        }

        /**
         * 每个Item点击展开的布局
         *
         * @param groupPosition
         * @param childPosition
         * @param isLastChild
         * @param convertView
         * @param parent
         * @return
         */
        @Override
        public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
            return convertView;
        }
        /**
         * 子Item中的条目是否可以点击
         *
         * @param groupPosition
         * @param childPosition
         * @return
         */
        @Override
        public boolean isChildSelectable(int groupPosition, int childPosition) {
            return true;//默认是false，即不可点击
        }

        @Override
        public boolean hasStableIds() {
            return false;
        }

        @Override
        public long getGroupId(int groupPosition) {
            return 0;
        }

        @Override
        public long getChildId(int groupPosition, int childPosition) {
            return 0;
        }

另外在使用ViewHolder的时候，我只用了一个ViewHolder的类，所以在使用ButterKnife的需要给每个控件都添加上 @Nullable 这个注解，即如果找不到控件就忽略，如果不添加会报错：

static class ViewHolder {

        public ViewHolder(View view) {
            ButterKnife.bind(this, view);
        }

        @Nullable
        @Bind(R.id.item_ll)
        LinearLayout item_ll;
        @Nullable
        @Bind(R.id.teacher_tv)
        TextView teacher_tv;
        @Nullable
        @Bind(R.id.student_tv)
        TextView student_tv;
    }

以上就是ExpandableListView的基本使用了，剩下的就是填充数据之类的，这里我就不详细去写了，和ListView没有任何区别。

---

二、ExpandableListView的个人案例

这是我朋友发给我的一个需求，可能大家也会遇到，如下图：

图中这是一个Item，要求是红色矩形点击不展开，图标位置点击才会展开。

ExpandableListView这个控件的展开操作你是无法控制的，除非你自定义，这个后面会讲到，所以在这里，最简单的方法，也是取巧的方法就是利用 事件分发 来屏蔽点击。

上面的贴图中可以看到，整个Item其实就是一个外层LinearLayout，其中红色矩形也是一个内层LinearLayout，将内层LinearLayout的点击时间消费掉，图标ImageView的点击事件不去响应，这样点击图标最终响应的是整个Item，自然展开列表，在代码中我注释了响应代码，可以打开：

 /**
         * ListView中的getView，初始化Item的控件
         *
         * @param groupPosition
         * @param isExpanded
         * @param convertView
         * @param parent
         * @return
         */
        @Override
        public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
            convertView = getView(convertView, true, groupPosition, -1);

            //个人案列，打开后，只会在点击右边图标才会展开item
//            ViewHolder holder = (ViewHolder) convertView.getTag();
//            holder.item_ll.setOnClickListener(MainActivity.this);
            return convertView;
        }