CollapsingToolbarLayout使用简介

效果如图所示：上图所示就是Android Material Design 中引入的CollapsingToolbarLayout要实现的效果。先给出实现上图效果的XML布局文件activity_main.xml代码然后再对照说明：

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="300dip"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:collapsedTitleGravity="left"
app:contentScrim="#ff5252"
app:expandedTitleGravity="left|bottom"
app:title="zhangphil" >

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1"
android:scaleType="centerCrop"
android:src="@drawable/ic_launcher" />

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:minHeight="?attr/actionBarSize" >
</android.support.v7.widget.Toolbar>
</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" >

<android.support.v7.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dip"
app:divider="?android:attr/listDivider"
app:dividerPadding="5dp"
app:showDividers="beginning|middle|end" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="0" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="1" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="2" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="3" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="4" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="5" />
</android.support.v7.widget.LinearLayoutCompat>
</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end|right"
android:src="@drawable/ic_launcher"
app:backgroundTint="#64b5f6"
app:backgroundTintMode="multiply"
app:borderWidth="0dp"
app:elevation="10dp"
app:fabSize="normal"
app:pressedTranslationZ="20dp"
app:rippleColor="#1976d2" >
</android.support.design.widget.FloatingActionButton>

</android.support.design.widget.CoordinatorLayout>

可以观察到，当整个页面由NestedScrollView触发向上滚动时候，android id为imageView的ImageView渐渐消失，当整个页面由NestedScrollView向下滚动时候，android id为imageView的ImageView渐渐出现。而整个过程中的Toolbar则固定（pin）在界面中。对CollapsingToolbarLayout涉及到的几个关键属性加以说明。（1） app:collapsedTitleGravity="left"。在本例中就是那个title字段“zhangphil”，这个title值也可以由Toolbar的setTitle()完成，两者之间效果相同。app:collapsedTitleGravity="left"表示当头部的衬图ImageView消失后，此title（zhangphil）将回归到Toolbar的位置（left，right等位置），默认是left。（2）app:contentScrim="#ff5252"。app:contentScrim设置颜色值。是CollapsingToolbarLayout收缩后最顶部的颜色，就是图中顶部的红色。（3）app:expandedTitleGravity="left|bottom"app:expandedTitleGravity表示将此CollapsingToolbarLayout完全展开后，title（“zhangphil”）所处的位置，默认是left + bottom。（4）app:layout_collapseMode=" "此属性有两个值parallax和pin。Pin表示固定。parallax 则有一定的缩放效果。缩放效果和速率则可由app:layout_collapseParallaxMultiplier控制（值从0.0到1.0）。测试的主Activity，MainActivity.java：

package zhangphil.materialdesign;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setLogo(R.drawable.ic_launcher);
mToolbar.setNavigationIcon(android.R.drawable.ic_menu_delete);
mToolbar.setTitle("zhangphil");
//mToolbar.setSubtitle("zhangphil副标题");
//mToolbar.setSubtitleTextColor(Color.RED);
}
}

原文地址  <span style="color: rgb(102, 102, 102); font-family: Arial, Console, Verdana, 'Courier New'; font-size: 14px; line-height: 14px;">http://blog.csdn.net/zhangphil</span>