可展开和收起的LinearLayout

场景介绍

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

  订单详情页面一开始只显示购买的前三样菜，当点击“点击展开”时，则将购买的所有外卖都展示出来，当点击“点击收起”时，则将除了前三样菜以外的都隐藏起来。其实要完成这样的功能并不难，为了方便自己和大家以后的开发，我将其封装成一个控件，取名为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_intro)
        TextView tvIntro;
        @Bind(R.id.tv_price)
        TextView tvPrice;

        ProductBean productBean;

        public ViewHolder(View view, ProductBean productBean) {
            ButterKnife.bind(this, view);
            this.productBean = productBean;
        }

        private void refreshUI() {
            Glide.with(EllDefaultBottomDemoActivity.this)
                    .load(productBean.getImg())
                    .placeholder(R.mipmap.ic_default)
                    .into(ivImg);
            tvName.setText(productBean.getName());
            tvIntro.setText(productBean.getIntro());
            tvPrice.setText("￥" + productBean.getPrice());
        }
    }

效果如下：

1.支持修改默认显示的个数

可以修改默认显示的个数，比如将其修改为3，即defaultItemCount="3"

效果如下：

2.支持修改待展开和待收起状态下的文字提示

可以修改待展开状态和待收起状态下的文字提示，比如修改expandText="查看更多"，hideText="收起更多"

效果如下：

3.支持修改提示文字的大小、颜色

可以修改提示文字的大小和颜色，对应的属性分别是tipTextSize，tipTextColor。比如修改tipTextSize="16sp"，tipTextColor="#ff7300"

效果如下：

4.支持更换箭头的图标

可以修改箭头的图标，只需配置arrowDownImg属性，引用对应的图标，这里的箭头图标需要是向下的箭头，这样当展开和收起时，箭头会做相应的旋转动画。设置arrowDownImg="@mipmap/arrow_down_grey"，修改为灰色的向下图标。

效果如下：

二、使用自定义底部

布局文件中，ExpandableLinearLayout配置useDefaultBottom="false",声明不使用默认底部。自己定义底部的布局。

    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >

            <!--商品列表-->
            <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:defaultItemCount="2"
                app:useDefaultBottom="false"
                >

            </com.chaychan.viewlib.ExpandableLinearLayout>

            <!--自定义底部-->
            <RelativeLayout...>

            <!--优惠、实付款-->
            <RelativeLayout...>

        </LinearLayout>

    </ScrollView>

java文件中，代码如下：

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

      ...  //插入模拟数据的代码，和上面演示使用默认底部的代码一样

      //设置状态改变时的回调
      ellProduct.setOnStateChangeListener(new ExpandableLinearLayout.OnStateChangeListener() {
            @Override
            public void onStateChanged(boolean isExpanded) {
                doArrowAnim(isExpanded);//根据状态箭头旋转
                //根据状态更改文字提示
                if (isExpanded) {
                    //展开
                    tvTip.setText("点击收起");
                } else {
                    tvTip.setText("点击展开");
                }
            }
        });

       //为自定义的底部设置点击事件
       rlBottom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ellProduct.toggle();
            }
        });

    }

      // 箭头的动画
      private void doArrowAnim(boolean isExpand) {
        if (isExpand) {
            // 当前是展开，箭头由下变为上
            ObjectAnimator.ofFloat(ivArrow, "rotation", 0, 180).start();
        } else {
            // 当前是收起，箭头由上变为下
            ObjectAnimator.ofFloat(ivArrow, "rotation", -180, 0).start();
        }
     }

主要的代码是为ExpandableLinearLayout设置状态改变的回调，rlBottom为自定义底部的根布局RelativeLayout,为其设置点击事件，当点击的时候调用ExpandableLinearLayout的toggle（）方法，当收到回调时，根据状态旋转箭头以及更改文字提示。

效果如下：

到这里，ExpandableLinearLayout的使用就介绍完毕了，接下来是对源码进行解析。

  ExpandableLinearLayout的原理其实很简单，当使用默认的底部时，如果子条目的个数小于或者等于默认显示的个数，则不添加底部，如果子条目的个数大于默认显示的个数，则往最后插入一个默认的底部，一开始的时候，将ExpandableLinearLayout除了默认显示的条目和底部不隐藏以外，其他的子条目都进行隐藏，当点击“展开”的时候，将被隐藏的条目设置为显示状态，当点击“收起”的时候，将默认显示条目以下的那些条目都隐藏。

首先介绍下ExpandableLinearLayout自定义的属性：

    <declare-styleable name="ExpandableLinearLayout">
        <!--默认显示的条目数-->
        <attr name="defaultItemCount" format="integer" />
        <!--提示文字的大小-->
        <attr name="tipTextSize" format="dimension" />
        <!--字体颜色-->
        <attr name="tipTextColor" format="color"/>
        <!--待展开的文字提示-->
        <attr name="expandText" format="string" />
        <!--待收起时的文字提示-->
        <attr name="hideText" format="string" />
        <!--向下的箭头的图标-->
        <attr name="arrowDownImg" format="reference" />
        <!--是否使用默认的底部-->
        <attr name="useDefaultBottom" format="boolean" />
    </declare-styleable>

ExpandableLinearLayout继承于LinearLayout

    public class ExpandableLinearLayout extends LinearLayout implements View.OnClickListener {

    public ExpandableLinearLayout(Context context) {
        this(context, null);
    }

    public ExpandableLinearLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ExpandableLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //获取自定义属性的值
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ExpandableLinearLayout);
        defaultItemCount = ta.getInt(R.styleable.ExpandableLinearLayout_defaultItemCount, 2);
        expandText = ta.getString(R.styleable.ExpandableLinearLayout_expandText);
        hideText = ta.getString(R.styleable.ExpandableLinearLayout_hideText);
        fontSize = ta.getDimension(R.styleable.ExpandableLinearLayout_tipTextSize, UIUtils.sp2px(context, 14));
        textColor = ta.getColor(R.styleable.ExpandableLinearLayout_tipTextColor, Color.parseColor("#666666"));
        arrowResId = ta.getResourceId(R.styleable.ExpandableLinearLayout_arrowDownImg, R.mipmap.arrow_down);
        useDefaultBottom = ta.getBoolean(R.styleable.ExpandableLinearLayout_useDefaultBottom, true);
        ta.recycle();

        setOrientation(VERTICAL);
    }

     /**
     * 渲染完成时初始化默认底部view
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        findViews();
    }

    /**
     * 初始化底部view
     */
    private void findViews() {
        bottomView = View.inflate(getContext(), R.layout.item_ell_bottom, null);
        ivArrow = (ImageView) bottomView.findViewById(R.id.iv_arrow);

        tvTip = (TextView) bottomView.findViewById(R.id.tv_tip);
        tvTip.getPaint().setTextSize(fontSize);
        tvTip.setTextColor(textColor);
        ivArrow.setImageResource(arrowResId);

        bottomView.setOnClickListener(this);
    }

｝

添加子条目的方法,addItem(View view):

    public void addItem(View view) {
        int childCount = getChildCount();
        if (!useDefaultBottom){
            //如果不使用默认底部
            addView(view);
            if (childCount > defaultItemCount){
                hide();
            }
            return;
        }

        //使用默认底部
        if (!hasBottom) {
            //如果还没有底部
            addView(view);
        } else {
            addView(view, childCount - 2);//插在底部之前
        }
        refreshUI(view);
    }

  当添加条目的时候，获取所有子条目的个数，如果是不使用默认底部的话，则只是将View添加到ExpandableLinearLayout中，当数目超过默认显示个数时，则调用hide（）方法，收起除了默认显示条目外的其他条目，即将它们设置为隐藏。如果是使用默认底部，hasBottom为是否已经有底部的标志，如果还没有底部则是直接往ExpandableLinearLayout中顺序添加，如果已经有底部，则是往底部前一个的位置添加View。调用的相关方法代码如下：

     /**
     * 收起
     */
    private void hide() {
        int endIndex = useDefaultBottom ? getChildCount() - 1 : getChildCount();//如果是使用默认底部，则结束的下标是到底部之前，否则则全部子条目都隐藏
        for (int i = defaultItemCount; i < endIndex; i++) {
            //从默认显示条目位置以下的都隐藏
            View view = getChildAt(i);
            view.setVisibility(GONE);
        }
    }

    /**
     * 刷新UI
     *
     * @param view
     */
    private void refreshUI(View view) {
        int childCount = getChildCount();
        if (childCount > defaultItemCount) {
            if (childCount - defaultItemCount == 1) {
                //刚超过默认，判断是否要添加底部
                justToAddBottom(childCount);
            }
            view.setVisibility(GONE);//大于默认数目的先隐藏
        }
    }

    /**
     * 判断是否要添加底部
     * @param childCount
     */
    private void justToAddBottom(int childCount) {
        if (childCount > defaultItemCount) {
            if (useDefaultBottom && !hasBottom) {
                //要使用默认底部,并且还没有底部
                addView(bottomView);//添加底部
                hide();
                hasBottom = true;
            }
        }
    }

默认底部的点击事件：

     @Override
    public void onClick(View v) {
        toggle();
    }

    public void toggle() {
        if (isExpand) {
            hide();
            tvTip.setText(expandText);
        } else {
            expand();
            tvTip.setText(hideText);
        }
        doArrowAnim();
        isExpand = !isExpand;

        //回调
        if (mListener != null){
            mListener.onStateChanged(isExpand);
        }
    }

点击的时候调用toggle（）会根据当前状态，进行展开或收起，如果当前是展开状态，即isExpand为true，则调用hide（）方法收起，否则，当前是收起状态时，调用 expand( )进行展开。这里判断如果有设置状态改变的监听，如果有则调用接口的方法将状态传递出去，expand( )方法的代码如下：

    /**
     * 展开
     */
    private void expand() {
        for (int i = defaultItemCount; i < getChildCount(); i++) {
            //从默认显示条目位置以下的都显示出来
            View view = getChildAt(i);
            view.setVisibility(VISIBLE);
        }
    }

到这里为止，ExpandableLinearLayout的源码解析就结束了，希望可以这个控件可以帮助到大家。

导入方式

在项目根目录下的build.gradle中的allprojects{}中，添加jitpack仓库地址，如下：

    allprojects {
        repositories {
            jcenter()
            maven { url 'https://jitpack.io' }//添加jitpack仓库地址
        }
    }

打开app的module中的build.gradle，在dependencies{}中，添加依赖，如下：

    dependencies {
           compile 'com.github.chaychan:ExpandableLinearLayout:1.0.0'
    }

源码github地址：https://github.com/chaychan/ExpandableLinearLayout

同时也收录在PowfulViewLibrary中，如果想要在PowfulViewLibrary也有这个控件，更新下PowfulViewLibrary的版本。以下版本为目前最新：

compile 'com.github.chaychan:PowerfulViewLibrary:1.1.6'

PowerfulViewLibrary源码地址: https://github.com/chaychan/PowerfulViewLibrary