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

替換大法：

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

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

這樣寫(xiě)得到的效果完全沒(méi)問(wèn)題，但需要編寫(xiě)兩套同樣的布局，有時(shí)候可能還需要編寫(xiě)兩套同樣的邏輯，這顯然是不可取的。

VLayout布局：

后來(lái)又接觸過(guò)阿里的VLayout，一個(gè)針對(duì)RecyclerView的LayoutManager擴(kuò)展庫(kù)。可以將各種布局融為一體，整個(gè)頁(yè)面就只是一個(gè)RecyclerView。其中有一個(gè)StickyLayoutHelper布局，可以叫做吸附布局，可起到吸附頂部或底部等功能。但可能不適用于我們這個(gè)頁(yè)面，僅因?yàn)橐粋€(gè)吸附功能就去引入一個(gè)庫(kù)且配置稍微繁瑣一點(diǎn)，所以這個(gè)方案僅當(dāng)備用方案。

ConsecutiveScroller：

無(wú)意之中在Github上看到了ConsecutiveScroller，可以說(shuō)它是專(zhuān)門(mén)為各類(lèi)滑動(dòng)效果做的一個(gè)輪子。不僅支持各類(lèi)模式的吸頂功能，還可以嵌套各類(lèi)滑動(dòng)控件使其連續(xù)滑動(dòng)，咱們就以上面的效果圖簡(jiǎn)單做個(gè)實(shí)現(xiàn)。

通過(guò)文檔得知，ConsecutiveScrollerLayout是作為頂級(jí)控件，由它包裹咱們的內(nèi)容。其中有個(gè)layout_isSticky屬性，為true就代表托頂，當(dāng)然可以多個(gè)控件都托頂。由于我們布局是有ViewPager的，為了能夠正?；瑒?dòng)需要實(shí)現(xiàn)IConsecutiveScroller接口，直接自定義一個(gè)ViewPager實(shí)現(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>

像這樣配置后運(yùn)行即可達(dá)到效果，使用起來(lái)很簡(jiǎn)單，但其中還有些細(xì)節(jié)需要注意：

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

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

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

最新評(píng)論