1. CollapsingToolbarLayout
CollapsingToolbarLayout
是5.0版本出现的控件,可以实现Toolbar
的折叠效果。
CollapsingToolbarLayout
的属性
属性 | 说明 |
---|---|
app:contentScrim | 指定布局内部未展开时的背景颜色 |
app:collapsedTitleTextAppearance | 指定未展开时的标题文字字体 |
app:collapsedTitleTextColor | 指定未展开时的标题文字颜色 |
app:collapsedTitleGravity | 指定未展开时的标题文字对齐方式 |
app:expandedTitleTextAppearance | 指定展开后的标题文字字体 |
app:expandedTitleTextColor | 指定展开后的标题文字颜色 |
app:expandedTitleGravity | 指定展开后的标题文字对齐方式 |
app:expandedTitleMargin | 指定展开后的标题四周间距 |
我们设置Toolbar
的背景为红色,可以看到Toolbar
实际是在最上面的,但Toolbar
的标题文字被移植到中间位置。
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="240dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/colorAccent"
app:collapsedTitleGravity="left"
app:collapsedTitleTextAppearance="@style/collapsedTitleTextAppearance"
app:expandedTitleGravity="center"
app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/nav_back"
app:title="标题"
android:background="@color/red"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
效果如下
2. layout_scrollFlags配置
在CollapsingToolbarLayout
中配置不同layout_scrollFlags
属性,会产生不同的效果。
- 设置为
scroll
CollapsingToolbarLayout
随着手势一起滑动。
- 设置为
enterAlways
下滑时CollapsingToolbarLayout
先进入。
- 设置为
enterAlwaysCollapsed
下滑时CollapsingToolbarLayout
先进入但只显示Toolbar
。
- 设置为
exitUntilCollapsed
CollapsingToolbarLayout
随着手势一起滑动到只显示Toolbar
。
- 设置为
snap
CollapsingToolbarLayout
会根据手势自动滑入滑出。
3. 设置图片背景
在CollapsingToolbarLayout
内定义一个图片,并设置layout_collapseMode
,
pin
,当CollapsingToolbarLayout
完全收缩后,View
还可以保留在屏幕上parallax
,当CollapsingToolbarLayout
收缩时,View
也同时收缩,实现视差滚动效果。通常和layout_collapseParallaxMultiplier
(0.0~1.0)搭配使用。
在CollapsingToolbarLayout
内,添加ImageView
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="@color/colorAccent"
app:collapsedTitleGravity="left"
app:collapsedTitleTextAppearance="@style/collapsedTitleTextAppearance"
app:expandedTitleGravity="center"
app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/anim"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.4" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/nav_back"
app:title="标题"/>
</android.support.design.widget.CollapsingToolbarLayout>
效果如下
4. FloatingActionButton
FloatingActionButton
可以设置layout_anchor
属性,自动根据CollapsingToolbarLayout
的滚动来设置自己的状态。
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_qq"
app:rippleColor="#ffe5e5e5"
app:backgroundTint="#ffffffff"
app:elevation="6dp"
app:pressedTranslationZ="6dp"
app:fabSize="mini"
app:borderWidth="0dp"
app:layout_anchor="@id/app_bar_layout"
app:layout_anchorGravity="bottom|right"
android:layout_margin="20dp" />
效果如下