android ExpandableListView三級菜單的使用

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/huangf321123/article/details/51920056

由於本人所作的項目需要用到這種列表式的收縮與展開，因此，就好好研究了有關這方面的一些知識，當然，也借鑑了網上一些成功的案列。下面就是我模擬測試的一個展示界面。

實現上面的這些功能，我主要是通過ExpandableListView這一控件，以及BaseExpandableListAdapter適配器。這兩者關聯實現的。好的，那接下來，就對這些進行詳細的展示。

• 所有的xml佈局展示
  ## activity_main.xml##

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="com.example.administrator.expandablelistviewdemo1.MainActivity">

    <ExpandableListView
        android:id="@+id/expand_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:groupIndicator="@null"/>
</RelativeLayout>

## parent_group_item.xml##

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:text="121"/>
    <TextView
        android:id="@+id/kpi_score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/title"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:text="80分"/>
    <ImageView
        android:id="@+id/kpi_back_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/up"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="20dp"
        />
</RelativeLayout>

## child_adapter.xml##

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp" >

        <TextView
            android:id="@+id/childGroupTV"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:paddingLeft="40dp" />
        <ImageView
            android:id="@+id/kpi_back_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/up"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="20dp"
            />
        <TextView
            android:id="@+id/score_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:visibility="gone"
            android:background="@drawable/score_bg"
            android:text="10分"
            android:layout_marginRight="50dp"
            />
    </RelativeLayout>

</LinearLayout>

## child_child.xml##

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp" >

        <TextView
            android:id="@+id/childGroupTV"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:paddingLeft="60dp" />
        <TextView
            android:id="@+id/score_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:visibility="gone"
            android:background="@drawable/score_bg"
            android:text="10分"
            android:layout_marginRight="50dp"
            />
    </RelativeLayout>

</LinearLayout>

## activity_content.xml##

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.example.administrator.expandablelistviewdemo1.ContentActivity">
    <TextView
        android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:textSize="40dp"
        android:textColor="#ff0000"
        />
</RelativeLayout>

• 接下來就是獲取數據、適配數據，以及對控件的操作事件。首先是獲取數據，由於項目接口不宜公開，固這裏採用的是測試數據其主要代碼如下。

 /**
     * 初始化數據
     */
    private void initData() {
        for(int i=0;i<4;i++){
            FirstBean firstBean = new FirstBean();
            ArrayList<SecondBean> mArrlistSecondBean = new ArrayList<SecondBean>();
            if(i==0){
                firstBean.setScore("80分");
                firstBean.setTitle("KPI  關鍵能力");
            }else if(i==1){
                firstBean.setScore("10分");
                firstBean.setTitle("API  工作態度");
            }else if(i==2){
                firstBean.setScore("10分");
                firstBean.setTitle("LPI  團隊建設");
            }else if(i==3){
                firstBean.setScore("5分");
                firstBean.setTitle("WPI  特殊事件");
            }
            for(int j=0;j<3;j++){
                SecondBean secondBean = new SecondBean();
                secondBean.setTitle("第"+i+"個二級標題");
                ArrayList<ThirdBean> mArrlistBean = new ArrayList<ThirdBean>();
                for(int k=0;k<2;k++){
                    ThirdBean thirdBean = new ThirdBean();
                    thirdBean.setTitle("第"+k+"個三級標題");
                    mArrlistBean.add(thirdBean);
                }
                secondBean.setSecondBean(mArrlistBean);
                mArrlistSecondBean.add(secondBean);
            }
            firstBean.setFirstData(mArrlistSecondBean);
            mDatas.add(firstBean);

            Log.e("xxx",mDatas.get(i).getTitle());
        }
    }

• 由於是三級菜單，所以這裏的實體用了3個，理論上，n級菜單的話，那就得n個實體，但是一般的app用到的至多就是3級，4級以上的都比較少見。其適配器那就得用兩個。接下來講解第一個適配器，它不是繼承BaseAdapter,繼承的是BaseExpandableListAdapter，通過重寫它的方法能很好的把數據與控件結合在一起。其主要的方法有：getGroupView()、getChildView()….主要代碼如下。

/**
     *  第一級菜單適配器佈局
     * @param parentPosition
     * @param isExpanded
     *
     * @param convertView
     * @param viewGroup
     * @return
     */
    @Override
    public View getGroupView(int parentPosition, boolean isExpanded, View convertView, ViewGroup viewGroup) {
        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(
                    R.layout.parent_group_item, null);
            holder = new ViewHolder();
            holder.upImg = (ImageView) convertView.findViewById(R.id.kpi_back_img);
            holder.score = (TextView) convertView.findViewById(R.id.kpi_score);
            holder.title = (TextView) convertView.findViewById(R.id.title);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        //區分箭頭往上還是
        if(isExpanded){
            holder.upImg.setImageResource(R.drawable.dowm);
        }else{
            holder.upImg.setImageResource(R.drawable.up);
        }
        holder.title.setText(mData.get(parentPosition).getTitle());
        holder.score.setText(mData.get(parentPosition).getScore());
        return convertView;
    }
    class ViewHolder{
        private TextView title;
        private TextView score;
        private ImageView upImg;
    }
    public ExpandableListView getExpandableListView() {
        ExpandableListView mExpandableListView = new ExpandableListView(
                mContext);
        AbsListView.LayoutParams lp = new AbsListView.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT, (int) mContext
                .getResources().getDimension(
                        R.dimen.parent_list_height));
        mExpandableListView.setLayoutParams(lp);
        mExpandableListView.setDividerHeight(0);// 取消group項的分割線
        mExpandableListView.setChildDivider(null);// 取消child項的分割線
        mExpandableListView.setGroupIndicator(null);// 取消展開摺疊的指示圖標
        return mExpandableListView;
    }
    /**
     * 第二級菜單式配
     * @param parentPosition
     * @param childPosition
     * @param isExpanded
     * @param view
     * @param viewGroup
     * @return
     */
    @Override
    public View getChildView(final int parentPosition, final int childPosition, boolean isExpanded, View view, ViewGroup viewGroup) {
        final ExpandableListView childListView = getExpandableListView();
        //獲取子菜單的數據
        final ArrayList<SecondBean> childData = new ArrayList<SecondBean>();
        final SecondBean bean = getChild(parentPosition,childPosition);
        childData.add(bean);
        ChildAdapter adapter = new ChildAdapter(mContext,childData,parentPosition);
        childListView.setAdapter(adapter);

        /**
         * 點擊最小級菜單，調用該方法
         * */
        childListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {

            @Override
            public boolean onChildClick(ExpandableListView arg0, View arg1,
                                        int groupIndex, int childIndex, long arg4) {
                if(mListener != null){
                    mListener.onclick(parentPosition,childPosition, childIndex);
                    //點擊三級菜單，跳轉到編輯菜單界面
                    Intent intent = new Intent(mContext, ContentActivity.class);
                    intent.putExtra("content","你點的位置是:  "+"parentPosition>>"+parentPosition+
                    "childPosition>>"+childPosition+"childIndex>>"+childIndex);
                    mContext.startActivity(intent);
                }
                return false;
            }
        });
        /**
         *子ExpandableListView展開時，因爲group只有一項，所以子ExpandableListView的總高度=
         * （子ExpandableListView的child數量 + 1 ）* 每一項的高度
         * */
        childListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
            @Override
            public void onGroupExpand(int groupPosition) {
                Log.e("xxx",groupPosition+"onGroupExpand>>");
                AbsListView.LayoutParams lp = new AbsListView.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        (bean.getSecondBean().size() + 1)* (int) mContext
                        .getResources().getDimension(R.dimen.parent_list_height));
                childListView.setLayoutParams(lp);
            }
        });
        /**
         *子ExpandableListView關閉時，此時只剩下group這一項，
         * 所以子ExpandableListView的總高度即爲一項的高度
         * */
        childListView.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {
            @Override
            public void onGroupCollapse(int groupPosition) {
                Log.e("xxx",groupPosition+">>onGroupCollapse");
                AbsListView.LayoutParams lp = new AbsListView.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT, (int) mContext
                        .getResources().getDimension(R.dimen.parent_list_height));
                childListView.setLayoutParams(lp);
                holder.upImg.setImageResource(R.drawable.up);
            }
        });
        /**
         * 在這裏對二級菜單的點擊事件進行操作
         */
        childListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView parent, View v, int Position, long id) {
//                if(isClick){
//                    holder.mUpImg.setImageResource(R.drawable.dowm);
//                    isClick = false;
//                }else{
//                    holder.mUpImg.setImageResource(R.drawable.up);
//                    isClick = true;
//                }
                Log.e("Xxx","恭喜你,點擊了"+parentPosition+"childpos>>>"+childPosition);
                return false;
            }
        });
        return childListView;
    }

• 第二個適配器與上述差不多，也是主要通過以上的方法來實現的。在這裏，我就不在貼出重複的的代碼了，在下面的鏈接，就可以下載源代碼。

  源代碼點此下載