Android開發筆記（一百三十六）可折疊工具欄布局CollapsingToolbarLayout

2019-11-08 00:23:45

字體：大中小

來源：轉載

供稿：網友

可折疊工具欄布局CollapsingToolbarLayout

上一篇博文《Android開發筆記（一百三十五）應用欄布局AppBarLayout》闡述了如何把Toolbar往上滾動，那反過來，能不能把Toolbar往下拉動呢？這里要明確一點，Toolbar本身是頁面頂部的工具欄，其上沒有本頁面的其它控件了，如果Toolbar被拉下來了，那Toolbar上面的空白該顯示什么？所以Toolbar的上部邊緣是不可以往下拉的，只有下部邊緣才能往下拉，這樣的視覺效果好比Toolbar如電影幕布一般緩緩向下展開。不過，Android在實現展開效果的時候，并非直接讓Toolbar展開或收縮，而是另外提供了CollapsingToolbarLayout，通過該布局包裹Toolbar，從而控制標題欄的展開和收縮行為。下面是CollapsingToolbarLayout的屬性說明：app:contentScrim : 指定布局內部未展開時的背景顏色。app:collapsedTitleTextAppearance : 指定未展開時的標題文字字體。app:collapsedTitleTextColor : 指定未展開時的標題文字顏色。app:collapsedTitleGravity : 指定未展開時的標題文字對齊方式。app:expandedTitleTextAppearance : 指定展開后的標題文字字體。app:expandedTitleTextColor : 指定展開后的標題文字顏色。app:expandedTitleGravity : 指定展開后的標題文字對齊方式。app:expandedTitleMargin : 指定展開后的標題四周間距。app:expandedTitleMarginStart/app:expandedTitleMarginTop/app:expandedTitleMarginEnd/app:expandedTitleMarginBottom : 指定展開后的標題具體方向的間距。上述屬性在代碼中的設置方法如下所示：setContentScrim/setContentScrimColor/setContentScrimResource : 設置布局內部未展開時的背景顏色。setCollapsedTitleTextAppearance : 設置未展開時的標題文字字體。setCollapsedTitleTextColor : 設置未展開時的標題文字顏色。setCollapsedTitleGravity : 設置未展開時的標題文字對齊方式。setExpandedTitleTextAppearance : 設置展開后的標題文字字體。setExpandedTitleColor : 設置展開后的標題文字顏色。setExpandedTitleGravity : 設置展開后的標題文字對齊方式。setExpandedTitleMargin : 設置展開后的標題四周間距。setExpandedTitleMarginStart/setExpandedTitleMarginTop/setExpandedTitleMarginEnd/setExpandedTitleMarginBottom : 設置展開后的標題具體方向的間距。在工程中使用CollapsingToolbarLayout，則需注意以下幾點：1、添加幾個庫的支持，包括appcompat-v7庫（Toolbar需要）、design庫（CollapsingToolbarLayout需要）、recyclerview庫（主頁面的RecyclerView需要）；2、布局文件的根布局采用android.support.design.widget.CoordinatorLayout，因為design庫的動態效果都依賴于該控件；3、CoordinatorLayout節點要添加命名空間聲明xmlns:app="http://schemas.android.com/apk/res-auto"；4、使用android.support.design.widget.AppBarLayout節點包裹android.support.design.widget.CollapsingToolbarLayout節點，再在CollapsingToolbarLayout節點下添加Toobar；5、Toobar節點添加滾動屬性app:layout_scrollFlags="scroll|enterAlways"，聲明工具欄的滾動行為標志；其實真正運行的時候，Toolbar的高度是固定不變的，變化高度的是CollapsingToolbarLayout。只是許多App把這兩者的背景設為一樣的，所以看起來像是統一的標題欄在收縮和展開。既然二者原本不是一家，那么就得有新的屬性用于區分它們內部的行為，新屬性在CollapsingToolbarLayout的子視圖節點上聲明，說明如下：app:layout_collapseMode : 指定子視圖（通常是Toolbar）的折疊模式。有以下三個取值說明：--pin : 固定模式，當前視圖固定不動，不受CollapsingToolbarLayout的折疊影響。--parallax : 視差模式，隨著CollapsingToolbarLayout的收縮與展開，當前視圖也跟著收縮與展開。折疊系數可通過屬性app:layout_collapseParallaxMultiplier配置，該屬性為1.0時，折疊效果同pin模式即固定不動；該屬性為0.0時，折疊效果等同于none模式，即也跟著移動相同距離。--none : 默認值。CollapsingToolbarLayout折疊多少距離，則當前視圖也移動多少距離，通俗地說，就是夫唱婦隨。app:layout_collapseParallaxMultiplier : 指定視差模式時的折疊距離系數，取值在0.0到1.0之間。如不指定該屬性則默認為0.5為了區分這幾種模式的差異，還是上幾個動圖加以說明。下面是Toolbar采用pin模式時的效果圖，可以看到紅色區域始終不動：

下面是Toolbar采用parallax模式時的效果圖，可以看到紅色區域會隨著滾上去再滾下來。因為折疊系數設置為0.1，所以其效果近似于none模式。

下面是演示折疊模式使用的布局文件例子：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/cl_main"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <android.support.design.widget.AppBarLayout        android:id="@+id/abl_title"        android:layout_width="match_parent"        android:layout_height="160dp"        android:background="@color/blue_light" >        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/ctl_title"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_scrollFlags="scroll|exitUntilCollapsed"            app:contentScrim="?attr/colorPRimary"            app:expandedTitleMarginStart="40dp" >            <android.support.v7.widget.Toolbar                android:id="@+id/tl_title"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="@color/red"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.1" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/rv_main"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior" /></android.support.design.widget.CoordinatorLayout>當然，CollapsingToolbarLayout的折疊效果并不僅限于和Toolbar的互動，還包括標題文字的樣式漸變（文字大小、顏色、間距等等），連背景圖片都可以實現折疊的漸變效果。下面是標題欄在折疊時顯示漸變圖片的效果圖：要實現圖片的折疊漸變，其實很簡單，只需在Toolbar節點前面加個ImageView節點的聲明即可，下面是演示折疊模式使用的布局文件例子：<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/cl_main"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <android.support.design.widget.AppBarLayout        android:id="@+id/abl_title"        android:layout_width="match_parent"        android:layout_height="160dp"        android:background="@color/blue_light" >        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/ctl_title"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_scrollFlags="scroll|exitUntilCollapsed"            app:contentScrim="#aaffaa"            app:expandedTitleMarginStart="100dp" >            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.1"                android:scaleType="centerCrop"                android:src="@drawable/top_pic" />                        <android.support.v7.widget.Toolbar                android:id="@+id/tl_title"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin"                app:layout_scrollFlags="scroll|enterAlways" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/rv_main"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior" /></android.support.design.widget.CoordinatorLayout>與CollapsingToolbarLayout有關的滾動標志
上一篇博文《Android開發筆記（一百三十五）應用欄布局AppBarLayout》說過，AppBarLayout的子控件共有五個滾動標志，同時提到后面三個標志與CollapsingToolbarLayout有關。現在就針對CollapsingToolbarLayout，重新演示看看五種標志分別對應的效果圖。1、scroll : 頭部與主體一起滾動。如果僅僅聲明scroll，沒有聲明其它標志，則滾動效果如下圖所示：2、enterAlways : 頭部與主體先一起滾動，頭部滾到位后，主體繼續向上或者向下滾。同時聲明scroll和enterAlways，滾動效果如下圖所示：3、exitUntilCollapsed : 該標志保證頁面上至少能看到最小化的工具欄，不會完全看不到工具欄。具體的滾動說明如下所示：向上滾動：頭部先往上收縮，一直滾到折疊的最小高度。然后頭部固定不動，主體繼續向上滾動。向下滾動：頭部固定不動，主體先向下滾動，一直滾到主體全部拉出。然后頭部向下展開。同時聲明scroll和exitUntilCollapsed，滾動效果如下圖所示：4、enterAlwaysCollapsed：該標志一般跟enterAlways一起使用，它與enterAlways區別在于有折疊操作，而單獨的enterAlways沒有折疊。具體的滾動說明如下所示：向上滾動：頭部先往上收縮，一直滾到折疊的最小高度。然后頭部與主體先一起滾動，頭部滾到位后，主體繼續向上。向下滾動：頭部與主體先一起滾動，一直滾到頭部折疊的最小高度。然后主體向下滾動，滾到位后頭部繼續向下展開。同時聲明scroll、enterAlways和enterAlwaysCollapsed，滾動效果如下圖所示：5、snap : 在用戶手指松開時，系統自行判斷，接下來是全部向上滾到頂，還是全部向下展開。同時聲明scroll和snap，滾動效果如下圖所示：下面是演示五種標志用到的布局文件例子：<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/cl_main"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <android.support.design.widget.AppBarLayout        android:id="@+id/abl_title"        android:layout_width="match_parent"        android:layout_height="160dp"        android:background="@color/blue_light" >        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/ctl_title"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_scrollFlags="scroll|exitUntilCollapsed"            app:contentScrim="?attr/colorPrimary"            app:expandedTitleMarginStart="40dp" >            <android.support.v7.widget.Toolbar                android:id="@+id/tl_title"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin" >                <Spinner                    android:id="@+id/sp_flag"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_gravity="center"                    android:spinnerMode="dialog" />            </android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/rv_main"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior" /></android.support.design.widget.CoordinatorLayout>點擊下載本文用到的可折疊工具欄布局的工程代碼點此查看Android開發筆記的完整目錄