關於Android ExpandableListView的小結(二)

摘要： 在上一篇 關於Android ExpandableListView的小結(一) 的介紹中，我們學習了 ExpandableListView 的使用方法，學習了自定義介面卡，為列表選項設定監聽事件。想必大家都能熟練使用了，今天我要分享的是 ExpandableListView 的 Indica...

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

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

有人可能覺得系統提供的 Indicator 難看，想換成自己喜歡的，這可怎麼辦？當然有辦法啦，開原始碼總是具有良好的擴充套件性，這裡給出幾種辦法：

1. 在 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...

2. 通過 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);

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

3. 有人說了你這 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

好了，囉囉嗦嗦這麼多，總算把效果做出來了，聊表欣慰。

【附錄】

需要資料的朋友可以加入Android架構交流QQ群聊：513088520

點選連結加入群聊【Android移動架構總群】： 加入群聊

獲取免費學習視訊，學習大綱另外還有像高階UI、效能優化、架構師課程、NDK、混合式開發（ReactNative+Weex）等Android高階開發資料免費分享。