在上一篇Android ExpandableListView使用小結(jié)（一）的介紹中，我們學(xué)習了 ExpandableListView 的使用方法，學(xué)習了自定義適配器，為列表選項設(shè)置監(jiān)聽事件。想必大家都能熟練使用了，今天我要分享的是 ExpandableListView 的 Indicator（指示器）的使用。

在我們看來，Indicator 就是分組項前面的小箭頭，回顧一下我們之前做的 Demo，并沒有顯式指定 Indicator 啊，怎么還會出現(xiàn)呢？原來系統(tǒng)自動為分組的左邊加上了 Indicator，不用我們做任何操作。

系統(tǒng)默認的Indicator

有人可能覺得系統(tǒng)提供的 Indicator 難看，想換成自己喜歡的，這可怎么辦？當然有辦法啦，開源代碼總是具有良好的擴展性，這里給出幾種辦法：

1. 在 Drawable 中利用 XML 定義 Indicator 的狀態(tài)選擇器，然后設(shè)置 ExpandableListView 的 groupIndicator 屬性，引用我們自定義的 Drawable。先看看我們的狀態(tài)選擇器部分，根據(jù)不同的狀態(tài)分別定義分組展開和閉合的圖標就 OK 了。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/ic_expand" android:state_expanded="true"/>
    <item android:drawable="@mipmap/ic_collapse"/>
</selector>

為 ExpandableListView 設(shè)置 Indicator，indicatorLeft 和 indicatorRight 是分別用來指定 Indicator 的左右邊界的，這里我們把它放在分組項的左邊。

<ExpandableListView
    android:id="@+id/expand_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:groupIndicator="@drawable/group_indicator"
    android:indicatorLeft="0dp"
    android:indicatorRight="40dp"
    />

看一下運行效果，除了丑陋沒有其他可說的T_T...

通過XML配置Indicator

2. 通過 Java 代碼獲取自定義的 Drawable 對象，設(shè)置 ExpandableListView 的 Indicator，以及顯示的位置，來看一下關(guān)鍵代碼。

Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics displayMetrics = new DisplayMetrics();
display.getMetrics(displayMetrics);
int widthPixels = displayMetrics.widthPixels;
Drawable drawable = getResources().getDrawable(R.drawable.group_indicator);
expandableListView.setGroupIndicator(drawable);
expandableListView.setIndicatorBounds(widthPixelsdrawable.getMinimumWidth() - 40, widthPixels - 40);

運行一下是這個樣子的，它竟然跑到右邊去了~~

通過Java代碼設(shè)置Indicator

3. 有人說了你這 Indicator 的圖標長寬比例怎么這么丑呢？哎！誰讓咱不是美工呢？美工的妹子在哪里？ I need U~~咳咳...言歸正傳?？催^源碼才知道，官方是用狀態(tài)數(shù)組記錄了 Group 的狀態(tài)，包括是否展開狀態(tài)、是否為空以及兩者的組合，每次繪制子布局的時候改變狀態(tài)值。當然還有其他辦法，我是這樣做的：不管你怎么實現(xiàn)，我就要自己定義 Indicator，自己控制狀態(tài)的轉(zhuǎn)換。

首先，在分組項的 Item 布局里面加入 Indicator 的圖標，就用一個簡單的 ImageView 展示吧。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="@android:color/holo_blue_light"
              android:orientation="horizontal"
              android:padding="8dp">

    <TextView
        android:id="@+id/label_expand_group"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:paddingLeft="20dp"
        android:textColor="@android:color/white"
        android:textSize="20sp"/>

    <ImageView
        android:id="@+id/iv_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:src="@mipmap/ic_collapse"/>
</LinearLayout>

然后呢，就是在我們自定義的 Adapter 里面操控了。定義一個 Map 集合存放 Indicator 的位置和圖標，根據(jù) Group 的狀態(tài)動態(tài)改變 Indicator。

//                用于存放Indicator的集合
private SparseArray<ImageView> mIndicators;
//            根據(jù)分組的展開閉合狀態(tài)設(shè)置指示器
public void setIndicatorState(int groupPosition, boolean isExpanded) {
    if (isExpanded) {
                mIndicators.get(groupPosition).setImageReource(R.mipmap.ic_expand);
    } else {
                mIndicators.get(groupPosition).setImageReource(R.mipmap.ic_collapse);
    }

//        獲取顯示指定分組的視圖
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
    GroupViewHolder groupViewHolder;
    if (convertView == null) {
        convertView = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_expand_group, false);
        groupViewHolder = new GroupViewHolder();
        groupViewHolder.ivIndicator = (ImagView)convertView.findViewById(R.id.iv_indicator);
        groupViewHolder.tvTitle = (TextView)convertView.findViewByIdR.id.label_expand_group);
        convertView.setTag(groupViewHolder);
    } else {
        groupViewHolder = (GroupViewHolder) convertView.getTag();
    }
    groupViewHolder.tvTitle.setText(groupStrings[groupPosition]);
    //      把位置和圖標添加到Map
    mIndicators.put(groupPosition, groupViewHolder.ivIndicator);
    //      根據(jù)分組狀態(tài)設(shè)置Indicator
    setIndicatorState(groupPosition, isExpanded);
    return convertView;
}

最后，為 ExpandableListView 添加 Group 點擊事件，當點擊分組項的時候，改變 Indicator 的狀態(tài)，就能實現(xiàn)我們想要的功能了。

//      設(shè)置分組單擊監(jiān)聽事件
expandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
    @Override
    public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
        boolean groupExpanded = parent.isGroupExpanded(groupPosition);
        if (groupExpanded) {
            parent.collapseGroup(groupPosition);
        } else {
            parent.expandGroup(groupPosition, true);
        }
        adapter.setIndicatorState(groupPosition, groupExpanded);
        return true;
        }
    });

我們看看效果怎么樣，不用美工我也能做得好看一點了，聊表安慰 (^_^)v

我的Indicator我做主

好了，啰啰嗦嗦這么多，總算把效果做出來了，聊表欣慰。如果各位有什么問題，請評論留言就好，(～ o ～)~zZ

Demo 地址：點我飛往 GitHub~