ExpandableListView簡單使用

　　　　Android 中關於ExpandableListView的簡單使用，以一個demo為例，比較簡單，主要用於理解一些概念性的知識。僅作為學習筆記。

1、定義：可擴展的ListView。

public class ExpandableListView extends ListView {
    ......
}

繼承自ListView,因此基本使用方法同ListView：
（1）需要自定義一個繼承自BaseExpandableListAdapter的Adapter；當然包括相關的布局等。
（2）注冊監聽事件；

由於該例子很簡單，直接查看代碼及注釋，更清晰的顯示常用方法的作用，在此不再詳述。

2、基本用法：

//主界面布局：
    <Button
        android:id="@+id/expandBtn"
        android:textSize="18sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/expandable_des" 
        />
    
    <ExpandableListView 
        android:layout_marginTop="10dp"
        android:id="@+id/expandableListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/bg_default" 
        android:groupIndicator="@null"
        android:visibility="gone"
         
        ></ExpandableListView>
    <!-- 
    android:groupIndicator="@null"  去掉系統自帶的展開圖標
     -->

//自定義適配器ExpandAdapter.java
public class ExpandAdapter extends BaseExpandableListAdapter {
    private final String TAG = "ExpandAdapter";

    private Context mContext;
    private LayoutInflater layoutInflater;

    private String[] groupNames = new String[]
            {"C++","JAVA","Android","HTML"};

//    private Drawable leftDrawable;　　　　　　　　//具體看本文末尾補充部分
    private int arrowUpId,arrowDownId;

    public ExpandAdapter(Context context) {
        // TODO Auto-generated constructor stub
        mContext = context;
        layoutInflater = LayoutInflater.from(mContext);

        arrowUpId = R.drawable.arrow_up;
        arrowDownId = R.drawable.arrow_down;
        
//        leftDrawable = context.getDrawable(R.drawable.ic_launcher);
//        leftDrawable.setBounds(0, 0, leftDrawable.getMinimumWidth(), leftDrawable.getMinimumHeight());
    }

    @Override
    public Object getChild(int arg0, int arg1) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getChildId(int arg0, int arg1) {
        // TODO Auto-generated method stub
        return arg1;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View childView,
            ViewGroup parent) {   //子項布局
        // TODO Auto-generated method stub
        ChildHolder childHolder;

        if(childView == null){
            childView = layoutInflater.inflate(R.layout.child_view, null);
            childHolder = new ChildHolder();
            childHolder.child_content = (TextView) childView.findViewById(R.id.child_content);
            childView.setTag(childHolder);
        }else{
            childHolder = (ChildHolder) childView.getTag();
        }

//        Log.d(TAG, "getChildView groupPos: " + groupPosition + "  childPos: " + childPosition);

//        if(groupPosition < groupNames.length){
//            groupHolder.name_type.setText(groupNames[groupPosition]);
//        }
        
//        if(childPosition % 2 == 0){
//            childHolder.child_content.setText("使用  drawableLeft getChildView  getChildView  getChildView getChildView");
//            childHolder.child_content.setCompoundDrawables(leftDrawable, null, null, null);
//        }    

        return childView;
    }

    @Override
    public int getChildrenCount(int arg0) {  //子項總數
        return 5;
    }

    @Override
    public Object getGroup(int arg0) {
        return groupNames[arg0];
    }

    @Override
    public int getGroupCount() {    //一級列表項數
        return groupNames.length;
    }

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

    @Override
    public View getGroupView(int groupPosition, boolean isExpand, View convertView, ViewGroup parent) {//一級列表項
        // TODO Auto-generated method stub
        GroupHolder groupHolder;

        if(convertView == null){
            convertView = layoutInflater.inflate(R.layout.grounp_view, null);
            groupHolder = new GroupHolder();
            groupHolder.img_type = (ImageView) convertView.findViewById(R.id.img_type);
            groupHolder.name_type = (TextView) convertView.findViewById(R.id.name_type);
            groupHolder.img_arrow = (ImageView) convertView.findViewById(R.id.img_arrow);
            convertView.setTag(groupHolder);
        }else{
            groupHolder = (GroupHolder) convertView.getTag();
        }

        if(isExpand){
//            groupHolder.img_arrow.setImageResource(R.drawable.arrow_up);
            groupHolder.img_arrow.setImageResource(arrowUpId);
        }else{
//            groupHolder.img_arrow.setImageResource(R.drawable.arrow_down);
            groupHolder.img_arrow.setImageResource(arrowDownId);
        }
        
        Log.i(TAG, "getGroupView groupPosition: " + groupPosition + "  isExpand: " + isExpand);

        if(groupPosition < groupNames.length){
            groupHolder.name_type.setText(groupNames[groupPosition]);
        }

        return convertView;
    }

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

    //為了使子項響應點擊事件，此處必須返回true!!!!!!!!!!!!!!!!!!!!!!!!!!!
    @Override
    public boolean isChildSelectable(int arg0, int arg1) {
        // TODO Auto-generated method stub
        return true;
    }

    class GroupHolder{
        ImageView img_type,img_arrow;
        TextView name_type;
    }
    class ChildHolder{
        TextView child_content;
    }

}

ExpandableListViewActivity中的基本使用：

　　　　 expandableListView = (ExpandableListView) findViewById(R.id.expandableListView);

        expandAdapter = new ExpandAdapter(this);
        expandableListView.setAdapter(expandAdapter);

//注冊監聽事件：
    private void initExpandableListener(){
        expandableListView.setOnGroupClickListener(new OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView expandableListView, View arg1, int groupPosition,
                    long arg3) {                    //組(一級列表)點擊事件       默認return false;若設為true,表示點擊列表不會展開
                // TODO Auto-generated method stub
                Log.i(TAG, "onGroupClick " + groupPosition);

                return false;
            }
        });
        expandableListView.setOnGroupCollapseListener(new OnGroupCollapseListener() {
            @Override
            public void onGroupCollapse(int groupPosition) {        //折疊
                // TODO Auto-generated method stub
                Log.i(TAG, "onGroupCollapse " + groupPosition);

            }
        });
        expandableListView.setOnGroupExpandListener(new OnGroupExpandListener() {
            @Override
            public void onGroupExpand(int groupPosition) {            //展開    若需要展開某項，其他項關閉，可在該處理方法中寫入相應邏輯
                // TODO Auto-generated method stub
                Log.i(TAG, "onGroupExpand " + groupPosition);

            }
        });


        //Child
        expandableListView.setOnChildClickListener(new OnChildClickListener() {

            @Override
            public boolean onChildClick(ExpandableListView arg0, View arg1, int groupPosition,
                    int childPosition, long arg4) {
                // TODO Auto-generated method stub
                Log.i(TAG, "onChildClick " + groupPosition  + "  " + childPosition);

                return false;
            }
        });


        //添加一個按鈕，用於測試expandGroup(int groupPos, boolean animate)中的animate不同值的顯示效果.
        Button expandBtn = (Button) findViewById(R.id.expandBtn);
        expandBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                expandableListView.expandGroup(3, false);            //展開時，是否執行滑動過程; 建議在測試時，選擇展開后列表能夠超出屏幕的，更容易看到兩者不同
                //看源碼，發現為true時執行了方法smoothScrollToPosition(position, boundPosition)
                //在默認情況下，點擊group選項，系統也會執行上述smoothScrollToPosition方法.
               
            }
        });

    }

函數expandGroup(int groupPos, boolean animate)的執行效果：
　　　　　　　　　　　　　　

　　　　　　　默認界面　　　　　　　　　　　　　　　　　　animate=false　　　　　　　　　　　　　　　　animate=true

3、注意事項：

a.寫布局時，為了去掉系統自帶的展開圖標(上下箭頭)，需設置ExpandableListView的android:groupIndicator="@null"

b.可展開列表的適配器一般自定義，並繼承自BaseExpandableListAdapter。當然，對於一些簡單的數據或布局，可直接使用SimpleExpandableListAdapter或SimpleCursorTreeAdapter。

c.可以讓Activity繼承ExpandableListActivity,這樣在Activity即可重寫相關點擊事件的方法.因為ExpandableListActivity實現了這些方法的接口。

d.若讓子項響應點擊事件，必須在ExpandAdapter中設置isChildSelectable()方法返回true。

4、補充：

　　上述demo中的子項布局很簡單，因為是簡單的測試，所以只在布局中定義了一個TextView，圖片使用了android:drawableLeft，在ExpandAdapter中可以看到還保留有在代碼中設置圖片的代碼(注釋的部分line)，以下就總結以下用法：

//子項布局child_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
     >

    <TextView
        android:id="@+id/child_content"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginStart="5dp" android:drawableLeft="@drawable/ic_launcher"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:text="child name"
        android:textSize="20sp"
        android:singleLine="true"
        android:maxLength="30"
         />   

</LinearLayout>

總結：android中，若圖標+文字確定的，則可使用TextView一個控件來實現，利用drawableLeft/drawableTop...等。但，若圖標不確定，需要在代碼中動態設置，則建議分開寫，ImageView + TextView 。

　　 因，在代碼中設置圖標很麻煩，需要以下三步：
　　　　（1） leftDrawable(獲取Drawable對象)
        　  （2） leftDrawable.setBounds(0, 0, leftDrawable.getMinimumWidth(), leftDrawable.getMinimumHeight());
       　   （3） childHolder.child_content.setCompoundDrawables(leftDrawable, null, null, null);