在我們?cè)谒nstagram的動(dòng)態(tài)時(shí)，你是否注意到這樣一個(gè)小小的動(dòng)效，就是當(dāng)一條動(dòng)態(tài)(以卡片形式呈現(xiàn))向上滑動(dòng)時(shí)，動(dòng)態(tài)卡片的頭部會(huì)始終懸浮在列表最上方，直到下一張動(dòng)態(tài)卡片的頭部將它頂?shù)舨⑻鎿Q它懸浮著。言語(yǔ)可能說(shuō)不清楚，就直接來(lái)看一下它的效果好了。 

綜合我上面的文字描述加上這張Gif圖，我想大家應(yīng)該知道這是個(gè)什么樣的效果了吧。那么不廢話了，接下來(lái)我就來(lái)說(shuō)說(shuō)一種很簡(jiǎn)單的實(shí)現(xiàn)方法吧。

思路

雖然實(shí)現(xiàn)起來(lái)炒雞簡(jiǎn)單，但還是花了我一個(gè)多小時(shí)的時(shí)間思考實(shí)現(xiàn)。先說(shuō)說(shuō)思考過(guò)程吧，那天中午，Instagram給我推了一條消息(哈，就是我最喜歡的偶像金泰妍更新了Ins)，于是我就點(diǎn)進(jìn)去看了，喜歡了之后就開(kāi)始研究這個(gè)效果，我反復(fù)地上下滑這個(gè)列表，因?yàn)镮ns的列表有滾動(dòng)條，我就發(fā)現(xiàn)每次滾動(dòng)條在那個(gè)懸浮條附近的時(shí)候就會(huì)特別短。看到這個(gè)現(xiàn)象，敏銳的你是不是察覺(jué)到了什么?沒(méi)錯(cuò)，我感覺(jué)這個(gè)就像是FrameLayout的效果，一個(gè)FrameLayout里按順序有列表，懸浮條兩個(gè)View，懸浮條覆蓋在列表的上方，它在合適的時(shí)機(jī)更新自己的位置，在合適的時(shí)機(jī)更新自己的信息，然后看上去就像是一個(gè)懸浮的效果。

接下來(lái)我們思考的核心就轉(zhuǎn)移到了如何確定并找到這個(gè)合適的時(shí)機(jī)。

再仔細(xì)觀察上面的Gif圖，我們可以確定當(dāng)?shù)诙€(gè)列表項(xiàng)的頭部距離列表頂端一個(gè)懸浮條的距離時(shí)，懸浮條隨著列表的滑動(dòng)改變自身的位置，從而看起來(lái)像是被頂?shù)舻男Ч?。?huà)一張簡(jiǎn)單位置示意圖 

那么，數(shù)據(jù)更新的時(shí)機(jī)也很容易確定，就是在懸浮條恰好完全被頂?shù)舻臅r(shí)候，更新自己的數(shù)據(jù)，并移動(dòng)到列表頂部。

至于如何找到這個(gè)時(shí)機(jī)會(huì)在接下來(lái)的實(shí)現(xiàn)部分講解。

實(shí)現(xiàn)

建立布局

如上面所言，就是一個(gè)簡(jiǎn)單的FrameLayout。

<FrameLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 
 
    <android.support.v7.widget.RecyclerView 
        android:id="@+id/feed_list" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:background="@android:color/white" 
        android:scrollbars="vertical" /> 
 
    <your-head-layout> 
    …… 
    </your-head-layout> 
</FrameLayout>  

注意這里FrameLayout的第二個(gè)child應(yīng)該為你列表項(xiàng)要懸浮顯示的布局。

找到時(shí)機(jī)

根據(jù)我們的思路，我們首先要找到第二個(gè)列表項(xiàng)的頭部距離列表頂端一個(gè)懸浮條的距離時(shí)的那個(gè)時(shí)機(jī)，如果我們能找到這個(gè)時(shí)機(jī)，那么第二個(gè)時(shí)機(jī)也相當(dāng)于找出來(lái)了。

這里我們使用的是RecyclerView來(lái)實(shí)現(xiàn)列表，我們都知道RecyclerView的列表布局是由LayoutManager來(lái)確定的，由于一般要實(shí)現(xiàn)懸浮條顯示效果的列表一般都為線性列表，即我們一般會(huì)使用LinearLayoutManager。通過(guò)LinearLayoutManager，我們可以很方便的獲取到RecyclerView中相應(yīng)位置的View，這里我們需要獲取當(dāng)前懸浮條數(shù)據(jù)來(lái)源的View和其下一個(gè)數(shù)據(jù)來(lái)源的View。這兩個(gè)View有什么用呢?懸浮條顯示的信息是來(lái)自***個(gè)可見(jiàn)View的，而其下方的View正是第二個(gè)列表項(xiàng)，我們可以獲取到它的top值。好了接下來(lái)就真的很簡(jiǎn)單了，我們只要給RecyclerView加一個(gè)ScrollListener，并在相應(yīng)的回調(diào)里做之前我們想好的事就ok了，來(lái)看一下代碼

mFeedList.addOnScrollListener(new RecyclerView.OnScrollListener() { 
    @Override 
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) { 
        super.onScrollStateChanged(recyclerView, newState); 
        mSuspensionHeight = mSuspensionBar.getHeight(); 
    } 
 
    @Override 
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) { 
        super.onScrolled(recyclerView, dx, dy); 
        View view = linearLayoutManager.findViewByPosition(mCurrentPosition + 1); 
        if (view != null) { 
            if (view.getTop() <= mSuspensionHeight) { 
                mSuspensionBar.setY(-(mSuspensionHeight - view.getTop())); 
            } else { 
                mSuspensionBar.setY(0); 
            } 
        } 
 
        if (mCurrentPosition != linearLayoutManager.findFirstVisibleItemPosition()) { 
            mCurrentPosition = linearLayoutManager.findFirstVisibleItemPosition(); 
            mSuspensionBar.setY(0); 
 
            updateSuspensionBar(); 
        } 
    } 
});  

Tips：其中mCurrentPosition為懸浮條信息來(lái)自的那個(gè)列表項(xiàng)在RecyclerView的位置。還有這里的ScrollListener可以添加多個(gè)，在RecyclerView中會(huì)檢查所有的ScrollListener并觸發(fā)。

One more thing...

接下來(lái)，我們還需要……開(kāi)玩笑，哪來(lái)的One more thing，我們已經(jīng)完成了?什么?這么快?這么一點(diǎn)代碼?恩，沒(méi)錯(cuò)，就是只要這么一點(diǎn)代碼就好了，我們來(lái)看一下***我們實(shí)現(xiàn)的效果(當(dāng)然最終效果的好壞還是取決與你列表項(xiàng)的布局，比如在Ins里這個(gè)效果就很好看呢～) 

補(bǔ)充

上面這種情況我們RecyclerView的Item是單一的，但是我們的列表Item通常有很多種，只有在滑到我們想要類型的Item時(shí)才需要更新我們的懸浮條信息。比如很常見(jiàn)的通訊錄，在我們滑到從A開(kāi)頭聯(lián)系人滑到B開(kāi)頭聯(lián)系人時(shí)，懸浮條的信息才從A變?yōu)锽;再比如印象筆記的筆記列表，頂部的懸浮條是根據(jù)筆記的日期改變的。

那么，遇到這種情況我們應(yīng)該怎么簡(jiǎn)單修改代碼來(lái)實(shí)現(xiàn)我們需求呢?

其實(shí)很簡(jiǎn)單，思路已經(jīng)由上面確定了，只是我們要讓?xiě)腋l移動(dòng)的時(shí)機(jī)變化，變得更窄了，同時(shí)我們要更新的數(shù)據(jù)內(nèi)容也發(fā)生了變化(這當(dāng)然需要我們變換相應(yīng)的布局)。

mFeedList.addOnScrollListener(new RecyclerView.OnScrollListener() { 
    @Override 
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) { 
        super.onScrollStateChanged(recyclerView, newState); 
        mSuspensionHeight = mSuspensionBar.getHeight(); 
    } 
 
    @Override 
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) { 
        super.onScrolled(recyclerView, dx, dy); 
        //我們只是簡(jiǎn)單的收窄了我們讓?xiě)腋l移動(dòng)的條件，這里就是ItemType必須對(duì)應(yīng)時(shí)才發(fā)生移動(dòng) 
          if (adapter.getItemViewType(mCurrentPosition + 1) == MultiFeedAdapter.TYPE_TIME) { 
            View view = linearLayoutManager.findViewByPosition(mCurrentPosition + 1); 
            if (view != null) { 
                if (view.getTop() <= mSuspensionHeight) { 
                    mSuspensionBar.setY(-(mSuspensionHeight - view.getTop())); 
                } else { 
                    mSuspensionBar.setY(0); 
                } 
            } 
        } 
 
        if (mCurrentPosition != linearLayoutManager.findFirstVisibleItemPosition()) { 
            mCurrentPosition = linearLayoutManager.findFirstVisibleItemPosition(); 
            mSuspensionBar.setY(0); 
 
            updateSuspensionBar(); 
        } 
    } 
});  

上面的代碼我們只要注意注釋處，其他的和之前給出的相同。

總之，雖然大家的需求可能不同，但萬(wàn)變不離其宗。只要掌握了思路，什么需求都不怕。

Github 上已增加相應(yīng)代碼，***看一下我們的效果，只在時(shí)間變化時(shí)才移動(dòng)懸浮條. 

結(jié)語(yǔ)

哈哈，是不是很簡(jiǎn)單呢，***再說(shuō)一下封裝的事，本來(lái)我是想封裝一下的，由于每個(gè)人的列表布局都不一樣，數(shù)據(jù)更新方式也不一樣，就不封裝了，是的，我水平不行，雖然我不想承認(rèn)～不過(guò)代碼真心特別少哦。希望這篇文章可以對(duì)你有幫助，我也會(huì)繼續(xù)努力的。