今天給大家?guī)硪粋€布局吸頂效果。一般出現(xiàn)在內(nèi)容較長頁面還嵌套著分類頁面的情況，比如電商的詳情頁嵌套分類，在頁面滑動到tab的時候我們希望tab還能保留在頁面頂部而不被頂上去。話不多說，直接上效果圖：

替換大法：

其實很早之前就接觸到這類效果了。當時采用的最古老的方式：XML中編寫兩套一模一樣的tab。其中多出的一套放在頁面最頂部默認隱藏，監(jiān)聽最外層的滑動控件。當Y向滑動值達到tab的top時顯示頂部隱藏的那個tab以達到目的。反之，當滑動距離小于tab的bottom時，隱藏頂部的tab。

scroll?.setOnScrollChangeListener { _, _, scrollY, _, _ ->
   tabTop.visible = scrollY > tab.top
}

這樣寫得到的效果完全沒問題，但需要編寫兩套同樣的布局，有時候可能還需要編寫兩套同樣的邏輯，這顯然是不可取的。

VLayout布局：

后來又接觸過阿里的VLayout，一個針對RecyclerView的LayoutManager擴展庫。可以將各種布局融為一體，整個頁面就只是一個RecyclerView。其中有一個StickyLayoutHelper布局，可以叫做吸附布局，可起到吸附頂部或底部等功能。但可能不適用于我們這個頁面，僅因為一個吸附功能就去引入一個庫且配置稍微繁瑣一點，所以這個方案僅當備用方案。

ConsecutiveScroller：

無意之中在Github上看到了ConsecutiveScroller，可以說它是專門為各類滑動效果做的一個輪子。不僅支持各類模式的吸頂功能，還可以嵌套各類滑動控件使其連續(xù)滑動，咱們就以上面的效果圖簡單做個實現(xiàn)。

通過文檔得知，ConsecutiveScrollerLayout是作為頂級控件，由它包裹咱們的內(nèi)容。其中有個layout_isSticky屬性，為true就代表托頂，當然可以多個控件都托頂。由于我們布局是有ViewPager的，為了能夠正?；瑒有枰獙崿F(xiàn)IConsecutiveScroller接口，直接自定義一個ViewPager實現(xiàn)該接口即可。

</com.donkingliang.consecutivescroller.ConsecutiveScrollerLayout>
   ......
<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    app:layout_isSticky="true"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/teal_200"
    app:tabIndicatorHeight="3dp"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/black" />
<com.donkingliang.consecutivescroller.ConsecutiveViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</com.donkingliang.consecutivescroller.ConsecutiveScrollerLayout>

像這樣配置后運行即可達到效果，使用起來很簡單，但其中還有些細節(jié)需要注意：

• 文檔中注明最好將ConsecutiveScrollerLayout作為頂級布局，但我們的應用通常是配置了無標題欄和沉浸式主題的效果。如果將標題寫在ConsecutiveScrollerLayout中會被滑動出屏幕，所以外部還是需要根據(jù)情況套一層布局用來實現(xiàn)沉浸式和標題欄。
• 該布局作為頂級布局后，其子View不再支持margin等屬性，需要用View進行填充
• 當子View是Linearlayout且視圖超過一屏時是不能滑動的，需要在Linearlayout外部嵌套一層可滑動控件

好了，以上便是實現(xiàn)一個常用的布局吸頂?shù)娜績?nèi)容，希望對大家有所幫助。

到此這篇關于基于Android實現(xiàn)一個常用的布局吸頂效果的文章就介紹到這了,更多相關Android實現(xiàn)布局吸頂內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論