关于Android ExpandableListView的小结(二)

最新推荐文章于 2021-05-25 17:22:01 发布

转载最新推荐文章于 2021-05-25 17:22:01 发布 · 112 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c90f688e51d4579a63014dc

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

在我们看来，Indicator 就是分组项前面的小箭头，回顾一下我们之前做的 Demo，并没有显式指定 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...

通过 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);
复制代码

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

有人说了你这 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

好了，啰啰嗦嗦这么多，总算把效果做出来了，聊表欣慰。

最后

在现在这个金三银四的面试季，我自己在网上也搜集了很多资料做成了文档和架构视频资料免费分享给大家【包括高级UI、性能优化、架构师课程、NDK、Kotlin、混合式开发（ReactNative+Weex）、Flutter等架构技术资料】，希望能帮助到您面试前的复习且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。

资料获取方式：加入Android架构交流QQ群聊：513088520 ，进群即领取资料！！！

点击链接加入群聊【Android移动架构总群】：加入群聊

转载于:https://juejin.im/post/5c90f688e51d4579a63014dc