The function of CollapsingToolbarLayout is to provide a collapsible Toolbar, which inherits from FrameLayout, and sets layout_scrollFlags for it, which can control the controls contained in CollapsingToolbarLayout (such as: ImageView, Toolbar) to make corresponding scrollFlags scrolling events (move) when responding to layout_behavior events. off the screen or pinned to the top of the screen).
Use 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>
app:expandedTitleMarginStart="48dp "//Set the distance to fill the title to the left when expanding (when not shrinking).
app:layout_scrollFlags="scroll|exitUntilCollapsed" //Shrink the View when scrolling up, but you can fix the Toolbar on it all the time.
app:layout_collapseMode="parallax" //When this mode is set, when the content scrolls, the View (such as ImageView) in CollapsingToolbarLayout can also scroll at the same time to achieve a parallax scrolling effect, usually used in conjunction with layout_collapseParallaxMultiplier (set parallax factor).
app:layout_collapseParallaxMultiplier="0.7" //Set the parallax scrolling factor, the value is: 0~1.
app:layout_collapseMode="pin" //When the pin is set to this mode, the Toolbar can remain on the screen after the CollapsingToolbarLayout is fully shrunk.
We set up an ImageView and a Toolbar in a CollapsingToolbarLayout. And put this CollapsingToolbarLayout into AppBarLayout as a whole.
1. In Collapsing Toolbar Layout:
We set up layout_scrollFlags: Let me talk about its value here:
-
scroll - This must be set to scroll.
-
enterAlways - to achieve the quick return effect, when moving down, the View (such as Toolbar) is displayed immediately.
-
exitUntilCollapsed - Shrinks the View when scrolling up, but can fix the Toolbar to always be on top.
-
enterAlwaysCollapsed - When your View has the minHeight property set and this flag is used, your View will only enter at its minimum height, and only expand to its full height when the scroll view reaches the top.
Some properties are also set, briefly explain:
-
contentScrim - Sets the background color when the CollapsingToolbarLayout is fully collapsed (shrunk).
-
expandedTitleMarginStart - Sets the padding distance of the title to the left when it is expanded (not yet shrunk).
2. In the ImageView control:
We set:
-
layout_collapseMode (collapse mode) - has two values:
-
pin - When set to this mode, the Toolbar can remain on the screen when the CollapsingToolbarLayout is fully collapsed.
-
parallax - When this mode is set, when the content scrolls, the View in CollapsingToolbarLayout (such as ImageView) can also scroll at the same time to achieve a parallax scrolling effect. It is usually used in conjunction with layout_collapseParallaxMultiplier (set the parallax factor).
-
-
layout_collapseParallaxMultiplier (parallax factor) - set the parallax scrolling factor, the value is: 0~1.
3. In the Toolbar control:
我们设置了layout_collapseMode(折叠模式)：为pin。
综上分析：当设置了layout_behavior的控件响应起了CollapsingToolbarLayout中的layout_scrollFlags事件时，ImageView会有视差效果的向上滚动移除屏幕，当开始折叠时CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就会变为我们设置好的背景色，Toolbar也一直会固定在最顶端。
效果如图:
【注】：使用CollapsingToolbarLayout时必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上不会显示。即：
mCollapsingToolbarLayout.setTitle(" ");
该变title的字体颜色：
扩张时候的title颜色：mCollapsingToolbarLayout.setExpandedTitleColor();
收缩后在Toolbar上显示时的title的颜色：mCollapsingToolbarLayout.setCollapsedTitleTextColor();
这个颜色的过度变化其实CollapsingToolbarLayout已经帮我们做好，它会自动的过度，比如我们把收缩后的title颜色设为绿色，效果如图：
接下来看看代码怎么实现吧：
布局文件：
<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设置到CollapsingToolbarLayout上，设置到Toolbar上则不会显示
CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");
//通过CollapsingToolbarLayout修改字体颜色
mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色
mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//设置收缩后Toolbar上字体的颜色