ListView动画展开布局 ExpandableLayout源代码解析

github地址：https://github.com/traex/
假设你相自己实现。能够看我的还有一篇文章： 一步一步带你实现ListView动画展开布局。 ExpandableLayout实现
效果：

如图，假设我们向实现点击ListView的Item,在item以下展示一个view。能够使用ExpandableLayout来实现。

项目结构

在library以下，定义了ExpandableLayout的源代码。我们来看

ExpandableLayout： 继承自RelativeLayout。实现了点击view向下出现要弹出的view的效果
ExpandableLayoutItem： ExpandableLayoutListView的item的view的类型
ExpandableLayoutListView： 实现了一个ListView,点击item会弹出一个下拉视图，在点击一次视图会收缩回去。

我们先来看ExpandableLayout.java的实现:

ExpandableLayout的实现

ExpandableLayout有几个重要的方法：

1.collapse(final View v):下拉视图消失
2.expand(final View v):展开下拉视图
3.getContentLayout()：得到下拉视图
4.getHeaderLayout()：得到item视图
5.hide():隐藏下拉视图，内部调用了collapse(final View v)函数
6.show():展开下拉视图。内部调用了expand(final View v)函数

好了。如今我们从构造函数来一步一步的看

构造函数:

  public ExpandableLayout(Context context)
    {
        super(context);
    }

    public ExpandableLayout(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        init(context, attrs);
    }

    public ExpandableLayout(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        init(context, attrs);
    }

能够看到，在构造中。调用了init()方法，我们来看一下init做了什么

init()方法：

 private void init(final Context context, AttributeSet attrs)
    {
        final View rootView = View.inflate(context, R.layout.view_expandable, this);
        headerLayout = (FrameLayout) rootView.findViewById(R.id.view_expandable_headerlayout);
        final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ExpandableLayout);
        final int headerID = typedArray.getResourceId(R.styleable.ExpandableLayout_el_headerLayout, -1);
        final int contentID = typedArray.getResourceId(R.styleable.ExpandableLayout_el_contentLayout, -1);
        contentLayout = (FrameLayout) rootView.findViewById(R.id.view_expandable_contentLayout);

        if (headerID == -1 || contentID == -1)
            throw new IllegalArgumentException("HeaderLayout and ContentLayout cannot be null!");

        if (isInEditMode())
            return;

        duration = typedArray.getInt(R.styleable.ExpandableLayout_el_duration, getContext().getResources().getInteger(android.R.integer.config_shortAnimTime));
        final View headerView = View.inflate(context, headerID, null);
        headerView.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
        headerLayout.addView(headerView);
        final View contentView = View.inflate(context, contentID, null);
        contentView.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        contentLayout.addView(contentView);
        contentLayout.setVisibility(GONE);
        headerLayout.setOnClickListener(new OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                if (!isAnimationRunning)
                {
                    if (contentLayout.getVisibility() == VISIBLE)
                        collapse(contentLayout);
                    else
                        expand(contentLayout);

                    isAnimationRunning = true;
                    new Handler().postDelayed(new Runnable()
                    {
                        @Override
                        public void run()
                        {
                            isAnimationRunning = false;
                        }
                    }, duration);
                }
            }
        });

        typedArray.recycle();
    }

第一句

 final View rootView = View.inflate(context, R.layout.view_expandable, this);

载入R.layout.view_expandable布局文件到自己上，来看以下R.layout.view_expandable是怎么定义的：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    <FrameLayout
        android:id="@+id/view_expandable_headerlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <FrameLayout
        android:id="@+id/view_expandable_contentLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view_expandable_headerlayout"/>

</RelativeLayout>

一个RelativeLayout包裹了两个FrameLayout,各自是headerLayout和contentLayout,当中，contentLayout在headerLayout的以下。

我们继续看init()

 headerLayout = (FrameLayout) rootView.findViewById(R.id.view_expandable_headerlayout);
        final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ExpandableLayout);
        final int headerID = typedArray.getResourceId(R.styleable.ExpandableLayout_el_headerLayout, -1);
        final int contentID = typedArray.getResourceId(R.styleable.ExpandableLayout_el_contentLayout, -1);
        contentLayout = (FrameLayout) rootView.findViewById(R.id.view_expandable_contentLayout);

分别通过findViewById得到headerLayout和contentLayout,
同一时候，例如以下。得到了headerID和contentID。headerID和contentID是在attr.xml中定义的。

<resources>
    <declare-styleable name="ExpandableLayout">
        <attr name="el_headerLayout" format="reference"/>
        <attr name="el_contentLayout" format="reference" />
        <attr name="el_duration" format="integer" />
    </declare-styleable>
</resources>

继续init函数

duration = typedArray.getInt(R.styleable.ExpandableLayout_el_duration, getContext().getResources().getInteger(android.R.integer.config_shortAnimTime));

得到duration,它表示下拉和收起下拉视图时动画运行的时间。

 final View headerView = View.inflate(context, headerID, null);
        headerView.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
        headerLayout.addView(headerView);
        final View contentView = View.inflate(context, contentID, null);
        contentView.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        contentLayout.addView(contentView);
        contentLayout.setVisibility(GONE);

这一段代码，通过headerID和contentID得到headerView和contentView,而且把headerView加入到headerLayout中，把contentView加入到contentLayout中。设置contentLayout不可见。
到此。该view的结构如图：

好了，继续看init()

   headerLayout.setOnClickListener(new OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                if (!isAnimationRunning)
                {
                    if (contentLayout.getVisibility() == VISIBLE)
                        collapse(contentLayout);
                    else
                        expand(contentLayout);

                    isAnimationRunning = true;
                    new Handler().postDelayed(new Runnable()
                    {
                        @Override
                        public void run()
                        {
                            isAnimationRunning = false;
                        }
                    }, duration);
                }
            }
        });

        typedArray.recycle();

这段代码，为headerLayout设置点击事件。点击的时候，假设contentLayout可见，就运行collapse,否则运行expand,而且duration之后运行handler.
到此。init()方法结束。我们开看collapse()方法和expand方法

collapse()方法：

 private void collapse(final View v)
    {
        final int initialHeight = v.getMeasuredHeight();
        animation = new Animation()
        {
            @Override
            protected void applyTransformation(float interpolatedTime, Transformation t) {
                //在绘制动画的过程中会重复的调用applyTransformation函数，
                // 每次调用參数interpolatedTime值都会变化。该參数从0渐 变为1，当该參数为1时表明动画结束
                if(interpolatedTime == 1) //动画结束
                {
                    v.setVisibility(View.GONE);
                    isOpened = false;
                }
                else{
                    v.getLayoutParams().height = initialHeight - (int)(initialHeight * interpolatedTime);
                    v.requestLayout();
                }
            }

            @Override
            public boolean willChangeBounds() {
                return true;
            }
        };

        animation.setDuration(duration);
        v.startAnimation(animation);
    }

代码就是运行了一个动画，使contentLayout的LayoutParams的height不断变小，最后动画结束的时候。contentLayout设置为不可见。

expand()方法

private void expand(final View v)
    {
        v.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        final int targetHeight = v.getMeasuredHeight();
        v.getLayoutParams().height = 0;
        v.setVisibility(VISIBLE);

        animation = new Animation()
        {
            @Override
            protected void applyTransformation(float interpolatedTime, Transformation t)
            {
                if (interpolatedTime == 1)
                    isOpened = true;
                v.getLayoutParams().height = (interpolatedTime == 1) ?
 LayoutParams.WRAP_CONTENT : (int) (targetHeight * interpolatedTime);
                v.requestLayout();
            }


            @Override
            public boolean willChangeBounds() {
                return true;
            }
        };
        animation.setDuration(duration);
        v.startAnimation(animation);
    }

与collapse相反，expand运行了一段动画。在动画运行前使contentLayout可见，动画运行过程中不断添加contentLayout的LayoutParams的height。

值得注意的是，在collpase和expand函数中，我们一直用isOpen来标志contentLayout是否已经全然看见。

好了，以上就是ExpandableLayout的源代码解析。

ExpandableLayoutItem

与ExpandableLayout类似，我们来看ExpandableLayoutItem.
与ExpandableLayout的大部分代码都一样，基本的不同在于init()函数的最后有setOnClickListenr改为setOnTouchListener

        headerLayout.setOnTouchListener(new OnTouchListener()
        {
            @Override
            public boolean onTouch(View v, MotionEvent event)
            {
                if (isOpened() && event.getAction() == MotionEvent.ACTION_UP)
                {
                    hide();
                    closeByUser = true;
                }

                return isOpened() && event.getAction() == MotionEvent.ACTION_DOWN;
            }
        });

ExpandableLayoutListView

public class ExpandableLayoutListView extends ListView
{
    private Integer position = -1;
    public ExpandableLayoutListView(Context context)
    {
        super(context);
        setOnScrollListener(new OnExpandableLayoutScrollListener());
    }

    public ExpandableLayoutListView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        setOnScrollListener(new OnExpandableLayoutScrollListener());
    }

    public ExpandableLayoutListView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        setOnScrollListener(new OnExpandableLayoutScrollListener());
    }

    @Override
    public boolean performItemClick(View view, int position, long id)
    {
        this.position = position;

        for (int index = 0; index < getChildCount(); ++index)
        {
            if (index != (position - getFirstVisiblePosition()))
            {
                ExpandableLayoutItem currentExpandableLayout = (ExpandableLayoutItem) getChildAt(index).findViewWithTag(ExpandableLayoutItem.class.getName());
                currentExpandableLayout.hide();
            }
        }

        ExpandableLayoutItem expandableLayout = (ExpandableLayoutItem) getChildAt(position - getFirstVisiblePosition()).findViewWithTag(ExpandableLayoutItem.class.getName());

        if (expandableLayout.isOpened())
            expandableLayout.hide();
        else
            expandableLayout.show();


        return super.performItemClick(view, position, id);
    }

    @Override
    public void setOnScrollListener(OnScrollListener l)
    {
        if (!(l instanceof OnExpandableLayoutScrollListener))
            throw new IllegalArgumentException("OnScrollListner must be an OnExpandableLayoutScrollListener");

        super.setOnScrollListener(l);
    }

    public class OnExpandableLayoutScrollListener implements OnScrollListener
    {
        private int scrollState = 0;

        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState)
        {
            this.scrollState = scrollState;
        }

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount)
        {
            if (scrollState != SCROLL_STATE_IDLE)
            {
                for (int index = 0; index < getChildCount(); ++index)
                {
                    ExpandableLayoutItem currentExpandableLayout = (ExpandableLayoutItem) getChildAt(index).findViewWithTag(ExpandableLayoutItem.class.getName());
                    if (currentExpandableLayout.isOpened() && index != (position - getFirstVisiblePosition()))
                    {
                        currentExpandableLayout.hideNow();
                    }
                    else if (!currentExpandableLayout.getCloseByUser() && !currentExpandableLayout.isOpened() && index == (position - getFirstVisiblePosition()))
                    {
                        currentExpandableLayout.showNow();
                    }
                }
            }
        }
    }
}

ExpandableLayoutListView代码基本的部分就是onScrollListener和performItemClick.我们一个一个来看。

performItemClick

 for (int index = 0; index < getChildCount(); ++index)
        {
            if (index != (position - getFirstVisiblePosition()))
            {
                ExpandableLayoutItem currentExpandableLayout = (ExpandableLayoutItem) getChildAt(index).findViewWithTag(ExpandableLayoutItem.class.getName());
                currentExpandableLayout.hide();
            }
        }

这段代码，循环遍历全部的item,使全部的item的contentLayout收起。

 ExpandableLayoutItem expandableLayout = (ExpandableLayoutItem) getChildAt(position - getFirstVisiblePosition()).findViewWithTag(ExpandableLayoutItem.class.getName());

        if (expandableLayout.isOpened())
            expandableLayout.hide();
        else
            expandableLayout.show();

这段代码，得到点击的item view,假设是打开的，就关闭，假设是关闭的，就打开。

onScrollListener

public class OnExpandableLayoutScrollListener implements OnScrollListener
    {
        private int scrollState = 0;

        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState)
        {
            this.scrollState = scrollState;
        }

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount)
        {
            if (scrollState != SCROLL_STATE_IDLE)
            {
                for (int index = 0; index < getChildCount(); ++index)
                {
                    ExpandableLayoutItem currentExpandableLayout = (ExpandableLayoutItem) getChildAt(index).findViewWithTag(ExpandableLayoutItem.class.getName());
                    if (currentExpandableLayout.isOpened() && index != (position - getFirstVisiblePosition()))
                    {
                        currentExpandableLayout.hideNow();
                    }
                    else if (!currentExpandableLayout.getCloseByUser() && !currentExpandableLayout.isOpened() && index == (position - getFirstVisiblePosition()))
                    {
                        currentExpandableLayout.showNow();
                    }
                }
            }
        }
    }

我们看onScroll方法内的操作。

if (scrollState != SCROLL_STATE_IDLE)

假设在滚动状态，进行操作。

 for (int index = 0; index < getChildCount(); ++index)
                {
                    ExpandableLayoutItem currentExpandableLayout = (ExpandableLayoutItem) getChildAt(index).findViewWithTag(ExpandableLayoutItem.class.getName());
                    if (currentExpandableLayout.isOpened() && index != (position - getFirstVisiblePosition()))
                    {
                        currentExpandableLayout.hideNow();
                    }
                    else if (!currentExpandableLayout.getCloseByUser() && !currentExpandableLayout.isOpened() && index == (position - getFirstVisiblePosition()))
                    {
                        currentExpandableLayout.showNow();
                    }
                }

遍历全部的item.
假设item view是打开的，可是不在屏幕内。就关闭了。
假设在屏幕内的item view不是由用户关闭的，就显示打开状态。