前言
本文實(shí)現(xiàn)了多列表下banner可上滑，條目可吸頂?shù)男Ч?/p>

歡迎加入學(xué)習(xí)小組QQ群: 193765960。

版權(quán)歸作者所有，如有轉(zhuǎn)發(fā)，請(qǐng)注明文章出處：http://www.itdecent.cn/u/d43d948bef39

技術(shù)方案

場(chǎng)景：

• 使用自定義的Titlebar
• 多tab多列表切換
• 頂部有公用的view,要求在列表上滑時(shí)，頂部View要滑出屏幕，tabs吸頂

選型：

• 其實(shí)項(xiàng)目之初，是沒有明確要求頂部view是可上下跟隨滑動(dòng)的，所以開始開發(fā)時(shí)自然而然的選擇了：TabLayout+Viewpager+fragment的方案。其中fragment的內(nèi)容為列表，可上拉自動(dòng)加載：RecyclerView實(shí)現(xiàn)。
  效果如下圖：
  
  Banner展開狀態(tài)
• 后來產(chǎn)品確認(rèn)時(shí)指出頂部的view要可上下跟隨滑動(dòng)，Tabs要吸頂。
  效果如下圖：
  
  Banner收起，Tabs吸頂狀態(tài)
  
  第一反應(yīng)是使用CollapsingToolbarLayout，但是因?yàn)閍pp統(tǒng)一使用的自定義Titlebar,所以認(rèn)為這個(gè)方案可能不合適，畢竟CollapsingToolbarLayout是要搭配AppBarLayout和Toolbar來使用的，目的是為了實(shí)現(xiàn)可伸縮的toolbar。
  • 實(shí)踐證明我還是淺薄的很，對(duì)知識(shí)的掌握還是不夠
  • CollapsingToolbarLayout遠(yuǎn)比我想的要靈活，以后再也不要認(rèn)為CollapsingToolbarLayout就是專用于實(shí)現(xiàn)伸縮性Toolbar了。

頂部view可滑動(dòng)跟隨的最終方案：

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout，熟悉的同學(xué)可以發(fā)現(xiàn)，我們這里是不帶Toolbar玩了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--自定義title bar-->
    <include
        android:id="@+id/title_bar_view"
        layout="@layout/my_title_bar"/>

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:visibility="gone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="@android:color/transparent"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleGravity="top"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
                
                //頂部view
                <ImageView
                    android:scaleType="fitXY"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />

            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        //正常視圖
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:orientation="vertical">

            <android.support.design.widget.TabLayout
                    android:id="@+id/deals_header_tab"
                    android:layout_width="match_parent"
                    android:layout_height="44dp"
                    app:tabGravity="fill"
                    app:tabIndicatorColor="#ffcb05"
                    app:tabIndicatorHeight="2dp"
                    app:tabMode="scrollable"
                    app:tabSelectedTextColor="#ffcb05"
                    app:tabTextColor="#ffffff"/>

            <android.support.v4.view.ViewPager
                android:id="@+id/page"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#f5f4ef"/>

        </LinearLayout>
        //正在加載中視圖
        <LinearLayout
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">
        </LinearLayout>

        //斷網(wǎng)時(shí)，重新加載視圖
        <LinearLayout
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#f5f4ef"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">
            ...
        </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

細(xì)節(jié)處理

• CollapsingToolbarLayout 必須是AppBarLayout的直接唯一子view，否則收縮不起作用
• 收縮的頂部view顯示處理：要求整個(gè)滑動(dòng)過程一直可見

<android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="@android:color/transparent"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleGravity="top"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

app:contentScrim="@android:color/transparent":view收縮到最后階段，前景色顯示透明，這樣就可以顯示后面的圖片

• fragment中顯示空界面和異常界面時(shí)，也要求整個(gè)屏幕可以滑動(dòng)

使用ScrollView或者NestedScrollview包裹fragment的空界面和異常界面，這樣就可以觸發(fā)系統(tǒng)的滑動(dòng)機(jī)制，將滑動(dòng)事件交給外層的CollapsingToolbarLayout來協(xié)同滑動(dòng)。

后記
如果原本就允許使用系統(tǒng)的toolbar,選型上不會(huì)經(jīng)歷很多的糾結(jié)，不過好在還是嘗試并成功了。通過這次的嘗試，也是對(duì)CollapsingToolbarLayout有了更新的認(rèn)識(shí)，舉一反三，做吸頂類的項(xiàng)目我們是不是掌握了更加便捷的實(shí)現(xiàn)？