可展开和收起的LinearLayout

本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布
转载请注明出处： http://blog.csdn.net/Chay_Chan/article/details/72810770

##ExpandableLinearLayout介绍
###场景介绍
  开发的过程中，有时我们需要使用到这样一个功能，在展示一些商品的时候，默认只显示前几个，例如先显示前三个，这样子不会一进入页面就被商品列表占据了大部分，可以先让用户可以看到页面的大概，当用户需要查看更多的商品时，点击“展开”，就可以看到被隐藏的商品，点击“收起”，则又回到一开始的状态，只显示前几个，其他的收起来了。就拿美团外卖的订单详情页的布局作为例子，请看以下图片：

  订单详情页面一开始只显示购买的前三样菜，当点击“点击展开”时，则将购买的所有外卖都展示出来，当点击“点击收起”时，则将除了前三样菜以外的都隐藏起来。其实要完成这样的功能并不难，为了方便自己和大家以后的开发，我将其封装成一个控件，取名为ExpandableLinearLayout，下面开始介绍它如何使用以及源码解析。

##使用方式
###一、使用默认展开和收起的底部
在布局文件中，使用ExpandableLinearLayout，代码如下：

<com.chaychan.viewlib.ExpandableLinearLayout
        android:id="@+id/ell_product"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
		app:useDefaultBottom="true"
        app:defaultItemCount="2"
        app:expandText="点击展开"
        app:hideText="点击收起"
        ></com.chaychan.viewlib.ExpandableLinearLayout>

和LinearLayout的使用方法类似，如果是静态数据，可以在两个标签中间插入子条目布局的代码，也可以在java文件中使用代码动态插入。useDefaultBottom是指是否使用默认底部（默认为true，如果需要使用默认底部，可不写这个属性），如果是自定义的底部，则设置为false，下面会介绍自定义底部的用法，defaultItemCount=“2”,设置默认显示的个数为2，expandText为待展开时的文字提示，hideText为待收起时的文字提示。

在java文件中，根据id找到控件，动态往ExpandableLinearLayout中插入子条目并设置数据即可，代码如下：

@Bind(R.id.ell_product)
ExpandableLinearLayout ellProduct;    

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.page_ell_default_bottom_demo);
    ButterKnife.bind(this);

    ellProduct.removeAllViews();//清除所有的子View（避免重新刷新数据时重复添加）
    //添加数据
    for (int i = 0; i < 5; i++) {
        View view = View.inflate(this, R.layout.item_product, null);
        ProductBean productBean = new ProductBean(imgUrls[i], names[i], intros[i], "12.00");
        ViewHolder viewHolder = new ViewHolder(view, productBean);
        viewHolder.refreshUI();
        ellProduct.addItem(view);//添加子条目
    }
}


 class ViewHolder {
    @Bind(R.id.iv_img)
    ImageView ivImg;
    @Bind(R.id.tv_name)
    TextView tvName;
    @Bind(R.id.tv_i