2. 程式人生 > >ListView動畫展開佈局 ExpandableLayout原始碼解析

ListView動畫展開佈局 ExpandableLayout原始碼解析

阿新 • • 發佈：2019-02-03


專案結構

這裡寫圖片描述
在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不是由使用者關閉的，就顯示開啟狀態。

相關推薦

ListView動畫展開佈局 ExpandableLayout原始碼解析

專案結構 在library下面，定義了ExpandableLayout的原始碼。我們來看 ExpandableLayout： 繼承自RelativeLayout，實現了點選view向下出現要彈出的view的效果 ExpandableLayoutIt

iOS仿QQ側滑選單、登入按鈕動畫、仿鬥魚直播APP、城市選擇器、自動佈局等原始碼

iOS精選原始碼 QQ側滑選單,右滑選單,QQ展開選單,QQ好友分組 image 登入按鈕 image 3分鐘快捷建立高效能輪播圖 ScrollView巢狀ScrolloView（UITableView 、UICollectionView）解決方案

Android屬性動畫原始碼解析

屬性動畫是Android開發中常用的知識，網上大多數文章都是基於屬性動畫的用法來解說的，本文基於屬性動畫的原始碼，從原始碼角度去一探屬性動畫的究竟。 屬性動畫有兩個非常重要的類，分別是ObjectAnimator和ValueAnimator，其中前者繼承了後者，前者是對屬性動畫的api提供了

動畫原始碼解析

目錄介紹 1.Animation和Animator區別 2.Animation執行原理和原始碼分析 2.1 基本屬性介紹 2.2 如何計算動畫資料 2.3 什麼是動畫更新函式 2.4 動畫資料如何儲存 2.5 Animation的呼叫 3.Animato

原始碼解析ListView中的RecycleBin機制

在自定義Adapter時，我們常常會重寫Adapter的getView方法，該方法的簽名如下所示： public abstract View getView (int position, View convertView, ViewGroup parent

ListView---一個神奇的控制元件原始碼解析

ListView—–一個神奇的控制元件 讓我們帶著一個問題來開始我們的ListView之旅。 為什麼ListView能夠顯示成千上萬條資料都不會OOM，而且消耗記憶體還基本保持恆定？ View控制元件，就是為了互動和展示資料用的。對於其他View控制元件，

Android設計模式原始碼解析之ListView觀察者模式

Android設計模式原始碼解析之觀察者模式 本文為 Android 設計模式原始碼解析 中 觀察者模式 分析 Android系統版本： 2.3 分析者：Mr.Simple，分析狀態：未完成，校對者：Mr.Simple，校對狀態：未開始

Android SVG動畫PathView原始碼解析與使用教程（API 14）

使用的是一個第三方庫android-pathview主要是一個自定義View——PathView，跟所有自定義View一樣，重寫了三個構造方法。並且最終呼叫三個引數的構造方法，在裡面獲取自定義屬性。 /** * Default construct

【cocos2d-x 原始碼解析】幀動畫

前言 幀動畫是以序列幀輪放的方式來表現一個動畫，就像膠片電影一樣，一張張畫面進行切換，當切換的間隔足夠小時，人眼就看不出中間的間隔，而是一個流暢的視訊。cocos2d-x 中的幀動畫涉及到三個類 AnimationFrame，Animation 和 Anima

RecyclerView 的常用方法；工作原理與ListView比較；原始碼解析

寫在前面 本文原創，轉載請以連結形式註明地址：http://kymjs.com/code/2016/07/10/01起深入淺出這名字的時候我是慎重又慎重的，生怕被人罵標題黨，寫的什麼破玩意還敢說深入淺出。所以還是請大家不要抱著太高的期望，因為沒有期望就沒有失望，就像陳潤說的

H5頁面 js終端裝置驗證 jquery動畫彈框效果 原始碼下載和解析

今天做了一個h5下載頁面和一個滑動彈窗提示。 這裡的圖片和一些樣式顏色跟原版做了很大修改，主要是因為原原本本的東西涉及到一些商業隱私。 不過沒關係，該有的東西都有，你只需要把這個下載下來，然後顏色和圖片改改就行了。 H5頁面css和div樣式佈局 layer的彈窗

原始碼解析Android中View的layout佈局過程

Android中的Veiw從記憶體中到呈現在UI介面上需要依次經歷三個階段：量算 -> 佈局 -> 繪圖，關於View的量算、佈局、繪圖的總體機制可參見博文 《 Android中View的佈局及繪圖機制》。量算是佈局的基礎，如果想了解量算的細節，可參

Android ListView動畫實現方法

rri pan 自己 data- src def popu 動畫 onclick 在Android中listview是最經常使用的控件之中的一個，可是有時候我們會認為千篇一律的listview看起來過於單調，於是就產生了listView動畫，listview載入了動畫會

Android ListView動畫特效實現原理及源代碼

stat 每一個 應該 所有 ner haar .get tde pri Android 動畫分三種，當中屬性動畫為我們最經常使用動畫，且能滿足項目中開發差點兒所有需求，google官方包支持3.0+。我們能夠引用三方包nineoldandr

Netty進階：Futrue&Promise原始碼解析

文章目錄 1. Future&Promise 2. AbstractFuture 3.Completefuture 4.Channelfuture&Completechannel

大資料基礎（1）zookeeper原始碼解析

五 原始碼解析   public enum ServerState { LOOKING, FOLLOWING, LEADING, OBSERVING;}zookeeper伺服器狀態：剛啟動LOOKING，follower是FOLLOWING，leader是LEADING，observer是

Android框架原始碼解析之（四）Picasso

這次要分析的原始碼是 Picasso 2.5.2 ，四年前的版本，用eclipse寫的，但不影響這次我們對其原始碼的分析 地址：https://github.com/square/picasso/tree/picasso-parent-2.5.2 Picasso的簡單使用

Android框架原始碼解析之（三）ButterKnife

注：所有分析基於butterknife:8.4.0 原始碼目錄：https://github.com/JakeWharton/butterknife 其中最主要的3個模組是： Butterknife註解處理器https://github.com/JakeWharton/

Android框架原始碼解析之（二）OKhttp

原始碼在：https://github.com/square/okhttp 包實在是太多了，OKhttp核心在這塊https://github.com/square/okhttp/tree/master/okhttp 直接匯入Android Studio中即可。 基本使用：

Android框架原始碼解析之（一）Volley

前幾天面試CVTE，HR面掛了。讓內部一個學長幫我查看了一下面試官評價，發現二面面試官的評價如下： 廣度OK，但缺乏深究能力，深度與實踐不足 原始碼：只能說流程，細節程式碼不清楚，retrofit和volley都是。 感覺自己一方面：自己面試技巧有待提高吧（框