前言

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

效果

在没有产品经理没有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;
        }
    });
  

• 7.具体细节请下载项目完整代码观看：

完整Demo下载地址

Github下载：
https://github.com/CNHubin/AnimatedExpandableListViewDemo
博客资源下载：
http://download.csdn.net/detail/jrwetiop/9833714