关于Android ExpandableListView的小结(

作者: Android架构 | 来源:发表于2019-02-18 21:04 被阅读10次

    在上一篇关于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
    1. 通过 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
    1. 有人说了你这 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我做主

    好了,啰啰嗦嗦这么多,总算把效果做出来了,聊表欣慰。
    【附录】

    资料图

    需要资料的朋友可以加入Android架构交流QQ群聊:513088520

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

    获取免费学习视频,学习大纲另外还有像高级UI、性能优化、架构师课程、NDK、混合式开发(ReactNative+Weex)等Android高阶开发资料免费分享。

    相关文章

      网友评论

        本文标题:关于Android ExpandableListView的小结(

        本文链接:https://www.haomeiwen.com/subject/gfwzeqtx.html