在上一篇Android ExpandableListView使用小結（一）的介紹中，我們學習了 ExpandableListView 的使用方法，學習了自定義適配器，為列表選項設置監聽事件。想必大家都能熟練使用了，今天我要分享的是 ExpandableListView 的 Indicator（指示器）的使用。
在我們看來，Indicator 就是分組項前面的小箭頭，回顧一下我們之前做的 Demo，并沒有顯式指定 Indicator 啊，怎么還會出現呢？原來系統自動為分組的左邊加上了 Indicator，不用我們做任何操作。
系統默認的Indicator
有人可能覺得系統提供的 Indicator 難看，想換成自己喜歡的，這可怎么辦？當然有辦法啦，開源代碼總是具有良好的擴展性，這里給出幾種辦法：
- 在 Drawable 中利用 XML 定義 Indicator 的狀態選擇器，然后設置 ExpandableListView 的 groupIndicator 屬性，引用我們自定義的 Drawable。先看看我們的狀態選擇器部分，根據不同的狀態分別定義分組展開和閉合的圖標就 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 設置 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
- 通過 Java 代碼獲取自定義的 Drawable 對象，設置 ExpandableListView 的 Indicator，以及顯示的位置，來看一下關鍵代碼。
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代碼設置Indicator
- 有人說了你這 Indicator 的圖標長寬比例怎么這么丑呢？哎！誰讓咱不是美工呢？美工的妹子在哪里？ I need U~~咳咳...言歸正傳。看過源碼才知道，官方是用狀態數組記錄了 Group 的狀態，包括是否展開狀態、是否為空以及兩者的組合，每次繪制子布局的時候改變狀態值。當然還有其他辦法，我是這樣做的：不管你怎么實現，我就要自己定義 Indicator，自己控制狀態的轉換。
首先，在分組項的 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 的位置和圖標，根據 Group 的狀態動態改變 Indicator。
// 用于存放Indicator的集合
private SparseArray<ImageView> mIndicators;
// 根據分組的展開閉合狀態設置指示器
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);
// 根據分組狀態設置Indicator
setIndicatorState(groupPosition, isExpanded);
return convertView;
}
最后，為 ExpandableListView 添加 Group 點擊事件，當點擊分組項的時候，改變 Indicator 的狀態，就能實現我們想要的功能了。
// 設置分組單擊監聽事件
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~
