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

今天给大家带来一篇关于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(Listviews) {

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)布局文件中：

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~