使用ExpandableListView纯手工打造带折叠动画的多条目展示框架

最新推荐文章于 2024-04-15 09:49:16 发布

Base_IT南

最新推荐文章于 2024-04-15 09:49:16 发布

阅读量1.2k

点赞数 1

文章标签：框架 expandablelistview 多条目折叠动画

本文链接：https://blog.csdn.net/jrwetiop/article/details/71173537

版权

前言

最近公司项目里面有一个页面需要用到很多的设置功能，绞尽脑汁的我最终想到使用折叠卡片的形式来布局我的界面，话不多说想看效果

在没有产品经理没有UI设计的情况下，我认为做出这个效果已经达到了我对美观的极限了。。。（请忽略美观认真研究代码。。）

框架效果

大致步骤如下

1.扩展ExpandableListView功能添加折叠和展开的动画，为ExpandableListView添加动画是一个非常令人头疼的事情，所以我选择了使用github上某人的项目

为了不凑字数这段代码我还是不贴了，请自行去github上查看或者下载我的Demo查看

2.布局中使用自己扩展了功能的ExpandableListView

<com.huyingzi.animatedexpandablelistviewdemo.view.AnimatedExpandableListView
    android:id="@+id/activity_expandablelistview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</com.huyingzi.animatedexpandablelistviewdemo.view.AnimatedExpandableListView>

3.设置ExpandableListView 的适配器
适配器需要继承自己扩展的适配器，适配器根据需要添加条目类型复写添加type的方法

private final int TYPE_1 = 0;
private final int TYPE_2 = 1;
private final int TYPE_3 = 2;
private final int TYPE_4 = 3;
private final int TYPE_5 = 4;

@Override
public int getRealChildTypeCount() {
    return mItemNameArr.length;
}
@Override
public int getRealChildType(int groupPosition, int childPosition) {

        if (groupPosition == 0) {
            return TYPE_1;
        } else if (groupPosition == 1) {
            return TYPE_2;
        } else if (groupPosition == 2) {
            return TYPE_3;
        } else if (groupPosition == 3) {
            return TYPE_4;
        } else if (groupPosition == 4) {
            return TYPE_5;
        }

    return -1;
}

4.Adapter的getRealChildView()中根据不同的type类型设置不同的布局

 int type = getRealChildType(groupPosition, childPosition);
 switch (type) {
     case TYPE_1:
         convertView = View.inflate(mContext, R.layout.item_child_one, null);
         break;
     case TYPE_2:
         convertView = View.inflate(mContext, R.layout.item_child_two, null);
         break;
     case TYPE_3:
         convertView = View.inflate(mContext, R.layout.item_child_three, null);
         break;
     case TYPE_4:
         convertView = View.inflate(mContext, R.layout.item_child_four, null);
         break;
     case TYPE_5:
         convertView = View.inflate(mContext, R.layout.item_child_five, null);
         break;
  }

5.给ExpandableListView设置一些初始效果

//去除分割线
mExpandableListView.setDivider(null);
//设置所有条目全部展开
for (int i = 0; i < mItemNameArr.length; i++) {
mExpandableListView.expandGroup(i);
}

6.设置ExpandableListView 的折叠动画

mExpandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
    @Override
    public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {

        //设置扩展动画
        if (mExpandableListView.isGroupExpanded(groupPosition)) {
            mExpandableListView.collapseGroupWithAnimation(groupPosition);
        } else {
            mExpandableListView.expandGroupWithAnimation(groupPosition);
        }

        return true;
    }
});