7、CollapsingToolbarLayout
CollapsingToolbarLayout用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠的AppBar效果。它需要放在AppBarLayout布局里面,并且作为AppBarLayout的直接子View。
1、CollapsingToolbarLayout主要包括几个功能:
(1)折叠Title(Collapsing title):当布局内容全部显示出来时,title是最大的,但是随着View逐步移出屏幕顶部,title变得越来越小。通过调用setTitle函数来设置title。
(2)内容纱布(Content scrim):根据滚动的位置是否到达一个阀值,来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片。
(3)状态栏纱布(Status bar scrim):根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”,你可以通过setStatusBarScrim(Drawable)来设置纱布图片,但是只能在LOLLIPOP设备上面有作用。
(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。将布局参数app:layout_collapseMode设为parallax。
(5)将子View位置固定(Pinned position children):子View可以选择是否在全局空间上固定位置,这对于Toolbar来说非常有用,因为当布局在移动时,可以将Toolbar固定位置而不受移动的影响。将app:layout_collapseMode设为pin。
2、具体使用
1)、布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<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="com.study.androidother.DesignSupportLibrary.CollapsingToolbarLayoutTestActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="@color/colorPrimary">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="@drawable/head"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20sp"
android:text="NestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\nNestedScrollView\n"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
2)、app:layout_scrollFlags="scroll|exitUntilCollapsed" 必须设置成这样才有效果
app:contentScrim="@color/colorPrimary" 完全折叠,即只有ToolBar时ToolBar的背景色
app:layout_collapseMode="parallax" 图片有视差特效
app:layout_collapseMode="pin" 固定ToolBar,CollapsingToolbarLayout折叠时ToolBar位置固定。否则ToolBar也会被移动到屏幕外