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

来源：互联网发布：新闻发布 java 编辑：程序博客网时间：2024/04/29 17:08

前言

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

在没有产品经理没有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;@Overridepublic int getRealChildTypeCount() {    return mItemNameArr.length;}@Overridepublic 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;    }});

完整Demo下载地址

Demo使用androidStudio2.3和gradle-3.3构建.

http://download.csdn.net/detail/jrwetiop/9833714

Github下载：
https://github.com/343906936/AnimatedExpandableListViewDemo

1 0