首發(fā)于我的博客,轉(zhuǎn)載請注明作者和原文鏈接赖歌。
CollapsingToolbarLayout通常用來在布局中包裹一個Toolbar养涮,同時作為AppBarLayout的直接子View芯肤,才可以實現(xiàn)“折疊效果”的標(biāo)題欄逞壁。
CollapsingToolbarLayout屬性說明
app:title
/setTitle()
ToolBar的標(biāo)題毛俏,當(dāng)CollapsingToolbarLayout展開時考余,title顯示的是大字體砂豌,在折疊的過程中,title不斷變小到一定大小的效果光督。app:contentScrim
/setContentScrim()
ToolBar被折疊到頂部固定時候的背景阳距。app:statusBarScrim
/setStatusBarScrim()
折疊后狀態(tài)欄的背景。app:scrimVisibleHeightTrigger
設(shè)置收起多少高度時结借,顯示ContentScrim的內(nèi)容筐摘。app:scrimAnimationDuration
展開狀態(tài)和折疊狀態(tài)之間,內(nèi)容轉(zhuǎn)換的動畫時間船老。
下面兩個屬性是作為CollapsingToolbarLayout的子View才能設(shè)置并生效的:
app:layout_collapseMode
折疊模式
none
跟隨滾動的手勢進(jìn)行折疊咖熟。
parallax
視差滾動,搭配layout_collapseParallaxMultiplier(視差因子)使用柳畔。
pin
固定不動馍管。app:layout_collapseParallaxMultiplier
視差因子,范圍:0-1薪韩,默認(rèn)0.5确沸。
layout布局
<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"
android:fitsSystemWindows="true"
tools:context=".collapsingtoolbarlayout.CollapsingToolbarLayoutActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:id="@+id/app_bar_layout"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/collapsing_toolbar_layout"
app:statusBarScrim="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="CollapsingToolbarLayout">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
android:scaleType="centerCrop"
android:src="@drawable/toolbar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
android:text="pin:固定不動"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="pin:固定不動"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
app:layout_collapseMode="parallax"
android:text="parallax:\n視差滾動默認(rèn)0.5"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_collapseParallaxMultiplier="0.25"
app:layout_collapseMode="parallax"
android:text="parallax:\n視差滾動0.25"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
app:layout_collapseParallaxMultiplier="0.75"
app:layout_collapseMode="parallax"
android:text="parallax:\n視差滾動0.75"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_collapseMode="none"
android:text="none:跟隨滾動"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:text="不設(shè)置:跟隨滾動"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="?homeAsUpIndicator"
app:layout_collapseMode="pin"
app:title="Toolbar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="真正的Toolbar區(qū)域"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AppBarLayout底部固定布局"
android:padding="16dp"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/ipsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
注意
- 最頂層的布局必須是CoordinatorLayout。
- CoordinatorLayout的直接子View必須是一個可滑動的控件俘陷,并且內(nèi)部有內(nèi)容可以滑動罗捎。同時需要設(shè)置
app:layout_behavior
。 - Toolbar的高度必須固定拉盾,不能設(shè)置為"wrap_content"宛逗,否則Toolbar不會滑動,也沒有折疊效果盾剩。
- 需要注意的是這里幾次設(shè)置
android:fitsSystemWindows="true"
,分別在CoordinatorLayout
替蔬、AppBarLayout
告私、ImageView
。這樣之后達(dá)到的效果就是這張圖片的內(nèi)容可以延伸到狀態(tài)欄承桥。