前言

最近公司項(xiàng)目里面有一個(gè)頁面需要用到很多的設(shè)置功能，絞盡腦汁的我最終想到使用折疊卡片的形式來布局我的界面，效果如下：

效果

在沒有產(chǎn)品經(jīng)理沒有UI設(shè)計(jì)的情況下，我認(rèn)為做出這個(gè)效果已經(jīng)達(dá)到了我對(duì)美觀的極限了。。。（請(qǐng)忽略美觀 認(rèn)真研究代碼。。）

大致步驟如下

• 1.擴(kuò)展ExpandableListView功能添加折疊和展開的動(dòng)畫，為ExpandableListView添加動(dòng)畫是一個(gè)非常令人頭疼的事情，所以我選擇了使用github上某人的項(xiàng)目

  為了不湊字?jǐn)?shù)這段代碼我還是不貼了，請(qǐng)自行去github上查看或者下載我的Demo查看

• 2.布局中使用自己擴(kuò)展了功能的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.設(shè)置ExpandableListView 的適配器
  適配器需要繼承自己擴(kuò)展的適配器，適配器根據(jù)需要添加條目類型復(fù)寫添加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()中根據(jù)不同的type類型設(shè)置不同的布局

     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設(shè)置一些初始效果

    //去除分割線
    mExpandableListView.setDivider(null);
    //設(shè)置所有條目全部展開
    for (int i = 0; i < mItemNameArr.length; i++) {
    mExpandableListView.expandGroup(i);
    }
  

• 6.設(shè)置ExpandableListView 的折疊動(dòng)畫

    mExpandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
        @Override
        public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
  
            //設(shè)置擴(kuò)展動(dòng)畫
            if (mExpandableListView.isGroupExpanded(groupPosition)) {
                mExpandableListView.collapseGroupWithAnimation(groupPosition);
            } else {
                mExpandableListView.expandGroupWithAnimation(groupPosition);
            }
  
            return true;
        }
    });
  

• 7.具體細(xì)節(jié)請(qǐng)下載項(xiàng)目完整代碼觀看：

完整Demo下載地址

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