Android高级进阶（二十一）AppBarLayout与CollapsingToolbarLayout一分钟组合出视差效果

今天继续看AppBarLayout的一个强大功能，那就是它结合CollapsingToolbarLayout可以1分钟作出我们常用的滑动视差效果，效果图如下：

1. 布局activity_main.xml

其实实现这个效果我们只需要配置布局文件即可，不需要写复杂的程序代码。接下来我们就来看一下这个神奇的布局文件，我们仍以MainActivity的activity_main.xml布局为例：

<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.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp" >

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/image2" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp" >

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/image2" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp" >

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/image2" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp" >

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/image2" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp" >

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/image2" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp" >

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/image2" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:layout_margin="0dp"
                app:cardCornerRadius="20dp"
                app:cardElevation="10dp"
                app:contentPadding="5dp" >

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/image" />
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
    <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:expandedTitleMarginBottom="100dp"
            app:expandedTitleMarginStart="100dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/image"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"  />

            <android.support.v7.widget.Toolbar
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                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>


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

 实现了这个效果的过程是这样的：当我们上滑NestedScrollView的时候，AppBarLayout会控制CollapsingToolbarLayout不断让Imageview折叠，直到Toolbar的底部停止。在折叠的时候滑动界面往上移动的速度>Imageview折叠的速度，从而形成了视差效果。我们要为这些控件配置一些属性才能使它们相互配合起来。

1.1  NestedScrollView控件配置： 

      滑动部分，里面内嵌了足够长的控件（Cardview），与Scrollview一样可以滑动；

（1）app:layout_behavior="@string/appbar_scrolling_view_behavior属性：

        配置了app:layout_behavior="@string/appbar_scrolling_view_behavior属性，也就是指定了behavior，behavior用来捕获  NestedScrollView的滑动事件，并处理一些动画效果。这个behavior我们从名字来看它的来头不小，它正是AppbarLayout的一个内部类behavior.所以推测它可以处理appBarLayout内部包含的控件的动画效果，即我们的折叠视差效果。NestedScrollView控件所配置的behavior就是用来控制AppBarLayout内嵌的这个CollapsingToolbarLayout控件的行为，即让CollapsingToolbarLayout内嵌的折叠布局，这里是一张图片与NestedScrollView的滚动形成视差效果。

1.2 CollapsingToolbarLayout（折叠控件）控件配置：

    它里面嵌套了视差图片Imageview与Toolbar控件。它控制内嵌的Imageview的滑动视差效果。在这个例子中配置了如下属性：

 （1）app:contentScrim="#30469b"

        这个用以表示当滑动快到Toolbar的底部边缘时，正在滑动的imageview消失变成了一个色块布局，同时Toolbar的颜色也会            变成相同的颜色，这里是蓝色。

（2）app:expandedTitleMarginBottom="100dp"，app:expandedTitleMarginStart="100dp"

       CollapsingToolbarLayout处于展开状态时，CollapsingToolbarLayout布局中的title的位置，距离CollapsingToolbarLayout的左边距是100dp，底部边距也是100dp。关于这个title的文本我们用程序代码去设置，见后面的MainActivity分析，当然我们也可以在CollapsingToolbarLayout XML标签里配置title文本.

扫描二维码关注公众号，回复： 8682276 查看本文章

（3）app:layout_scrollFlags="scroll|exitUntilCollapsed"

       这个属性决定了折叠动作。让内嵌的折叠布局（Imageivew）可以滑动，直到折叠效果完成(滑动到Toolbar的底边缘)隐藏Imageview. 在这里我们只看到了滑动，和什么时候隐藏，我们并没有看到任何关于视差效果的配置。视差效果的配置是在折叠布局里设置的，在这个例子中是一个Imageview。接下来我们就来看一下Imageview（折叠布局）是如何配置的。

1.3  折叠内容配置（这里是一个Imageview图片）：

（1）app:layout_collapseMode="parallax" 这个用于配置折叠隐藏的速度。

      app:layout_collapseParallaxMultiplier="0.7" 这个是视差系数，就是折叠的速度。值越大Imagview折叠的速度越快，例如配置成2的效果是：当NestedScrollView还没有滑动到Toolbar附近，离Toolbar还有好长一段距离时，这时Imageview已经往下移动了好大一截，快要完全隐藏折叠的节奏。这里我们解释了Imageview如何配置成视差效果，我们再看看Toolbar配置了什么。

1.4  Toolbar的配置：

app:layout_collapseMode="pin" 
        表示当完全折叠时，Toolbar保持在顶端不动。

1. 5  总结

好了我们来总结一下这些配置，以便我们在后面修改这些配置来演示其它效果:

NestedScrollView: 

      app:layout_behavior="@string/appbar_scrolling_view_behavior  //behavior

CollapsingToolbarLayout:

      app:contentScrim="#30469b"        //Toolbar及底部附近的颜色。

      app:expandedTitleMarginBottom="100dp",      app:expandedTitleMarginStart="100dp" //下边距，左边距。

      app:layout_scrollFlags="scroll|exitUntilCollapsed"  //滚动且折叠完后整个折叠布局才隐藏。

Imageview:

  app:layout_collapseMode="parallax"     //这个就是视差效果。 app:layout_collapseParallaxMultiplier="0.7" 折叠布局折叠的速度。

2. MainActivity.java

第1节中activity_main.xml对应的程序代码

package com.example.administrator.collapsingtoolbarlayout;
import android.graphics.Color;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

        //Toolbar
        Toolbar toolbar;
        toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });

        /*
        CollapsingToolbarLayout
            使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上
            扩展title与折叠title会从白色随着滑动折叠自然过渡到绿色
         */

        CollapsingToolbarLayout mCollapsingToolbarLayout = 
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
        mCollapsingToolbarLayout.setTitle("周星驰");

        //通过CollapsingToolbarLayout修改字体颜色
        mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色
        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//设置收缩后Toolbar上字体的颜色
    }
}

再上述代码里我们用代码 

mCollapsingToolbarLayout.setTitle("Colla");设置了CollapsingToolbarLayout布局在展开时的标题文本。

setExpandedTitleColor与setCollapsedTitleTextColor分别设置了展开时与折叠时标题颜色的变化。
这里它不会突然从白色变成绿色，而是有一个渐变的过程。在此你可能会想到是不是title也被分为展开时标题和折叠时文本，
两个文本可以设置不同的内容，关于这些尝试性的改动及运行效果我们将在第3节中展示，第3节也会让您加深对各属性的理解。
关于本文的第3节今日恐怕是没有时间了,以后再完善之。

依照惯例，还是给出当前阶段的源码下载地址：https://download.csdn.net/download/gaoxiaoweiandy/10973541