Android ExpandableListView使用小结（二）

http://www.jianshu.com/p/4c7be6fdb12b

在上一篇Android ExpandableListView使用小结（一）的介绍中，我们了解了ExpandableListView的使用方法，学习了自定义适配器，为列表选项设置监听事件。想必大家都能熟练使用了，今天我要分享的是ExpandableListView的Indicator（指示器）的使用。

在我们看来，Indicator就是分组项前面的小箭头，回顾一下我们之前做的Demo，并没有显式指定Indicator啊，怎么还会出现呢？原来系统自动为分组的左边加上了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...
   
   
   

   通过XML配置Indicator

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);

   运行一下是这个样子的，它竟然跑到右边去了~~
   

   
   

   通过Java代码设置Indicator

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); }

   //        获取显示指定分组的视图@Overridepublic 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;     } });

   我们看看效果怎么样，不用美工我也能做得好看一点了，聊表安慰(￣￣)"
   

   
   

   我的Indicator我做主