Android5.0+ CollapsingToolbarLayout使用詳解
CollapsingToolbarLayout作用是提供了一個(gè)可以折疊的Toolbar,它繼承至FrameLayout,給它設(shè)置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在響應(yīng)layout_behavior事件時(shí)作出相應(yīng)的scrollFlags滾動(dòng)事件(移除屏幕或固定在屏幕頂端)。
使用CollapsingToolbarLayout:
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="#30469b" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/bg" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>
我們?cè)贑ollapsingToolbarLayout中設(shè)置了一個(gè)ImageView和一個(gè)Toolbar。并把這個(gè)CollapsingToolbarLayout放到AppBarLayout中作為一個(gè)整體。
1、在CollapsingToolbarLayout中:
我們?cè)O(shè)置了layout_scrollFlags:關(guān)于它的值我這里再說(shuō)一下:
scroll - 想滾動(dòng)就必須設(shè)置這個(gè)。
enterAlways - 實(shí)現(xiàn)quick return效果, 當(dāng)向下移動(dòng)時(shí),立即顯示View(比如Toolbar)。
exitUntilCollapsed - 向上滾動(dòng)時(shí)收縮View,但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 當(dāng)你的View已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí),你的View只能以最小高度進(jìn)入,只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度。
其中還設(shè)置了一些屬性,簡(jiǎn)要說(shuō)明一下:
contentScrim - 設(shè)置當(dāng)完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。
expandedTitleMarginStart - 設(shè)置擴(kuò)張時(shí)候(還沒(méi)有收縮時(shí))title向左填充的距離。
沒(méi)擴(kuò)張時(shí)候如圖:
2、在ImageView控件中:
我們?cè)O(shè)置了:
layout_collapseMode (折疊模式) - 有兩個(gè)值:
pin - 設(shè)置為這個(gè)模式時(shí),當(dāng)CollapsingToolbarLayout完全收縮后,Toolbar還可以保留在屏幕上。
parallax - 設(shè)置為這個(gè)模式時(shí),在內(nèi)容滾動(dòng)時(shí),CollapsingToolbarLayout中的View(比如ImageView)也可以同時(shí)滾動(dòng),實(shí)現(xiàn)視差滾動(dòng)效果,通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用。
layout_collapseParallaxMultiplier(視差因子) - 設(shè)置視差滾動(dòng)因子,值為:0~1。
3、在Toolbar控件中:
我們?cè)O(shè)置了layout_collapseMode(折疊模式):為pin。
綜上分析:當(dāng)設(shè)置了layout_behavior的控件響應(yīng)起了CollapsingToolbarLayout中的layout_scrollFlags事件時(shí),ImageView會(huì)有視差效果的向上滾動(dòng)移除屏幕,當(dāng)開(kāi)始折疊時(shí)CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會(huì)變?yōu)槲覀冊(cè)O(shè)置好的背景色,Toolbar也一直會(huì)固定在最頂端。
效果如圖:
【注】:使用CollapsingToolbarLayout時(shí)必須把title設(shè)置到CollapsingToolbarLayout上,設(shè)置到Toolbar上不會(huì)顯示。即:
mCollapsingToolbarLayout.setTitle(" ");
該變title的字體顏色:
擴(kuò)張時(shí)候的title顏色:mCollapsingToolbarLayout.setExpandedTitleColor();
收縮后在Toolbar上顯示時(shí)的title的顏色:mCollapsingToolbarLayout.setCollapsedTitleTextColor();
這個(gè)顏色的過(guò)度變化其實(shí)CollapsingToolbarLayout已經(jīng)幫我們做好,它會(huì)自動(dòng)的過(guò)度,比如我們把收縮后的title顏色設(shè)為綠色,效果如圖:
沒(méi)錄好,反正效果出來(lái)了。
接下來(lái)看看代碼怎么實(shí)現(xiàn)吧:
布局文件:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="#30469b" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/bg" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none" /> </LinearLayout> </android.support.design.widget.CoordinatorLayout>
代碼文件:
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(mToolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); mToolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { onBackPressed(); } }); //使用CollapsingToolbarLayout必須把title設(shè)置到CollapsingToolbarLayout上,設(shè)置到Toolbar上則不會(huì)顯示 CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout); mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout"); //通過(guò)CollapsingToolbarLayout修改字體顏色 mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設(shè)置還沒(méi)收縮時(shí)狀態(tài)下字體顏色 mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//設(shè)置收縮后Toolbar上字體的顏色
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android動(dòng)態(tài)修改ToolBar的Menu菜單示例
- Android中Toolbar隨著ScrollView滑動(dòng)透明度漸變效果實(shí)現(xiàn)
- Android折疊式Toolbar使用完全解析(CollapsingToolbarLayout)
- Android自定義Toolbar使用方法詳解
- Android ToolBar控件詳解及實(shí)例
- Android自定義ActionProvider ToolBar實(shí)現(xiàn)Menu小紅點(diǎn)
- 解決Android V7后自定義Toolbar、ActionBar左側(cè)有空白問(wèn)題
- Android ToolBar整合實(shí)例使用方法詳解
- Android中ActionBar和ToolBar添加返回箭頭的實(shí)例代碼
- android ToolBar的簡(jiǎn)單使用
相關(guān)文章
Android 退出應(yīng)用程序的實(shí)現(xiàn)方法
這篇文章主要介紹了Android 退出應(yīng)用程序的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-04-04Android Handler移除Message詳解及實(shí)例代碼
這篇文章主要介紹了Android Handler移除Message詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02Android實(shí)現(xiàn)定時(shí)任務(wù)及鬧鐘
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)定時(shí)任務(wù)及鬧鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06Android實(shí)現(xiàn)購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)購(gòu)物車(chē)功能的具體方法 ,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02Android中通過(guò)MediaStore獲取音樂(lè)文件信息方法
這篇文章主要介紹了Android中通過(guò)MediaStore獲取音樂(lè)文件信息方法,本文講解了獲取歌曲的名稱(chēng)、歌曲的專(zhuān)輯名、歌曲的歌手名、歌曲文件的全路徑、歌曲文件的名稱(chēng)、歌曲文件的發(fā)行日期等音樂(lè)文件信息的方法,需要的朋友可以參考下2015-04-04Android Studio搜索功能(查找功能)及快捷鍵圖文詳解
這篇文章主要介紹了Android Studio搜索功能(查找功能)及快捷鍵圖文詳解,本文圖文并茂給大家介紹的非常詳細(xì),需要的朋友可以參考下2017-12-12Android 中Fragment與Activity通訊的詳解
這篇文章主要介紹了Android 中Fragment與Activity通訊的詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家,讓大家理解掌握如何通信的,需要的朋友可以參考下2017-10-10Android控件RadioButton實(shí)現(xiàn)多選一功能
這篇文章主要為大家詳細(xì)介紹了Android控件RadioButton實(shí)現(xiàn)多選一功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08