[置顶] Android实现列表抽屉展示效果

终于迎来的周末哇，深圳两天的凉雨天终于迎来晴日。早上爬起来异常的累，哎。。每天地铁两小时真是强身健体啊~

今天给大家带来一篇关于Android UI的文章：列表Item抽屉展示效果。单说没意思，不然大家又该说我是标题党了。我来笔墨描述下场景：

例如当我们点击某个Item项时，该Item项会有一个或多个的选择项展开来让我们选择。其实这种需求场景很常见，尤其是在App的设置界面。

ok，先给大家带来几幅图：


    

  

德玛西亚~上面三幅图是我从英雄联盟助手App中截取，从截图可以看到，当我们点击游戏资料Item的时候，下面会展开显示关于游戏资料的选择。不过也有另外的展示效果就是点击Item项会弹出窗口展示更多的选择：

  


两种方式都以非常巧妙的设计来展示更多的内容。关于第二种方式相信大家都知道Android中为我们提供了很多窗口展示方式，例如：Dialog、AlertDialog、PopupWindow、DialogFragment等等。

那么第一种方式该如何实现呢？哈哈，可能很多朋友会说ExpandedListView！对，没错，用ExpandedListView确实可以实现多级菜单的展示效果，但是如果一个界面有多个这样的效果，那么我们就需要写多个ExpandListView + Adapter，太麻烦。并且某天产品说，这种展示太死板，我想让它伴随动画展示，例如渐渐下拉展开。哦买噶~如果使用ExpandedListView时没办法添加展开动画的，没办法，为了和产品搞好地下恋情，我们也只能咬咬牙去想办法，该如何实现呢？ok，今天就和大家分享一种实现方式，好了，废话少说，准备开车~

主要内容我会分为以下几个部分来展开：

（1）实现原理分析

（2）选择实现方式

（3）封装

首先先来看下实现的效果图：



哈哈，是不是很炫酷。当我们点击主Item项时会伴随动画以展开显示。相信大家看到这种效果第一反应就是Android属性动画哇！嗯，我们来分析分析使用Android属性动画实现的方式：

（1）主Item一个布局，子Item项一个布局。

（2）给主Item注册单击事件

（3）创建一个动画工具类，并创建一个位移的动画效果。

（4）在Activity中获取子Item的高度

（5）初始化时隐藏。

（6）点击主Item项时，开启动画，逐渐展开到子Item项总高度。

上面就是使用Android动画来实现的方式，相信大家看了都明白，哈哈，原来这么简单那~

确实，从上面的步骤来看这种效果确实很容易实现。但是如果多个界面都有类似效果，并且一个界面也不只一个Item可以展示，可能有很多。那我们一个一个实现的话，代码不仅多而且变的非常冗余。ok，那么我们就需要解决这个问题，没错，对它进行封装。

先来看看我的封装思路：

（1）既然是一个主Item项和一个或多个子Item项，那我可以分为两个布局来展示：MenuItem和SubMenuItem。

（2）然后我需要将两个布局联系到一起，那么就需要一个容器来存放，没错，自定义布局实现。

（3）为了复用，需要公开一些基本设置，那么就需要自定义属性。

（4）创建动画，实现展示效果。

来看看核心代码：

(1)创建主Item布局和子Item布局，并关联。

    /**

     * 初始化Menu和Item容器

     * @param context

     */

    private void addDefaultLayout(Context context) {

        View defaultView = LayoutInflater.from(context).inflate(layoutId, this,true);

        defaultView.setOnClickListener(this);

        content = new LinearLayout(context);

        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,

                ViewGroup.LayoutParams.WRAP_CONTENT);

        content.setShowDividers(SHOW_DIVIDER_BEGINNING|SHOW_DIVIDER_MIDDLE);

        content.setDividerDrawable(ContextCompat.getDrawable(context,R.drawable.item_divider));

        content.setOrientation(VERTICAL);

        addView(content,layoutParams);

    }

(2) 添加子Item选择项

/**

* 添加Item

* @param views

*/

public void addItemView(List<View>views) {

     this.itemList= views;

     for (int i=0; i < views.size(); i++) {

            final int position = i;

            content.addView(views.get(i));

            views.get(i).setOnClickListener(newOnClickListener() {

                          @Override

                          public void onClick(Viewv) {

                                     if(null!= mOnItemClickListener) {

                                                       mOnItemClickListener.onItemClick(v,position);

                                     }

                          }

          });

}}

使用方式很简单：

（1）布局文件中：

<com.example.song.foldlayout.FoldLayout

    android:id="@+id/foldlayout1"

    android:layout_width="match_parent"

   android:layout_height="wrap_content"

   app:layoutId="@layout/layout_menu_data"//菜单布局，自定义

/>

（2）Activity：

       // 1.添加两个子Item项

       for (int i = 0;i<2;i++) {

            views1.add(getLayoutInflater().inflate(R.layout.layout_item,null));

        }

        foldlayout.addItemView(views1);

       //  2.设置Item的单击事件

        foldlayout.setOnItemClickListener(new FoldLayout.OnItemClickListener() {

            @Override

            public void onItemClick(View view, int position) {

                Toast.makeText(MainActivity.this, "点击了第"+position+"个", Toast.LENGTH_SHORT).show();

            }

        });

短短几行代码，就轻松实现了。哈哈，是不是很nice。

ok，今天的内容就到这里了，核心的思路还是Android的动画使用以及如何巧妙的实现这种方式。具体的代码我放到了github，大家可以下载查看，如果觉得可以，还望赏颗星星鼓励一下哈。今天的内容就是这些了，thks~

Demo