Material Design系列（一）- CollapsingToolbarLayout 和AppBarLayout-阿里云开发者社区

1. 什么是CoordinatorLayout

CoordinatorLayout是Android官方在Design包提供的控件，来自官方的解释是：

CoordinatorLayout is a super-powered FrameLayout

它主要用于两个方面：

当做普通的FrameLayout作为根布局使用
作为一个或者多个子View进行复杂交互的容器

CoordinatorLayout为我们提供了一个叫做Behavior的东西，我们基本上的复杂交互都是使用Behavior来协调完成。

先看看本文的最终成果：

toolbar和header的移动完整例子

2. 如何使用CoordinatorLayout

2.1 添加依赖

这里我选择的是26.0.2版本，至于为什么选择这个，是因为我使用的最多的就是这个版本，暂时没有发现一些其他的什么问题。

dependencies{
    implementation 'com.android.support:design:26.0.2'
}

自从 Android Studio3.0 以后，基本上都是改用了 implementation，而不是使用 compile ,主要原因是使用 implementation 不会产生依赖传递，这对于我们来说，减少了很多麻烦，比方说以前解决的重复依赖版本的问题。

2.2 布局中使用CoordinatorLayout

很简单的写了一下，现在只要是当做简单的FrameLayout来使用，内部只放了一个TextView，详情看以下代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.of.road.com.course1.CreateCoordinatorLayoutActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:text="Hello CoordinatorLayout"
        android:textSize="20sp" />

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

我们可以运行起来看看效果

Hello

CoordinatorLayout的第一点作用就已经展现出来了，在我们要讲解它的第二点功能之前，我们需要准备一些预备知识。

3. 什么是AppBarLayout

AppBarLayout是一个垂直的 LinearLayout, 它实现了很多在material designs设计中提出的概念性交互功能，也就是【滚动手势】。

4. 如何使用AppBarLayout

4.1 例子1

AppBarLayout也是design包中的一个控件，所以在这里就不需要再添加依赖了。我们可以通过给它的子View进行setScrollFlags(int)或者直接在xml中增加属性app:layout_scrollFlags来设置它子View的滚动行为。
需要注意的是，AppBarLayout需要配合CoordinatorLayout进行使用，如果只是放到普通的ViewGroup中使用的话将无法实现它的效果。

<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="android.of.road.com.course1.CreateAppBarLayoutActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:navigationIcon="@drawable/ic_arrow_back_white_24dp" />

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

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

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

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

随着内容的滑动，ToolBar也跟随着滑动，详情看效果图：

CreateCoordinatorLayoutActivity

4.2 app:layout_scrollFlags介绍

enterAlways：向上滚动时视图将变为可见。
enterAlwaysCollapsed：通常，当仅使用enterAlways时，工具栏将在向下滚动时继续扩展。如果声明了enterAlways并指定了minHeight，则还可以指定enterAlwaysCollapsed。使用此设置时，您的视图将仅显示在此最小高度。仅当滚动到达顶部时，视图才会扩展到其完整高度
exitUntilCollapsed：当设置滚动标志时，向下滚动通常会导致整个内容移动。通过指定minHeight和exitUntilCollapsed，将在其余内容开始滚动并退出屏幕之前达到工具栏的最小高度
Snap：使用此选项将确定仅在部分缩小视图时要执行的操作。如果滚动结束并且视图大小已减小到原始视图的小于50％，则此视图将返回其原始大小。尺寸大于其尺寸的50％，它将完全消失。

4.3 Behavior

Behavior这个名词看着陌生，但事实上我们经常简单，如：app:layout_behavior="@string/appbar_scrolling_view_behavior"，这个一般是出现在使用Android Stuido创建Activty的时候自动创建的，他的作用是让使用这个属性的View在appbar下面滚动。而Behavior主要的使用方式其实是通过反射来实现的，我们在layout_behavior中并没有直接进行引用，而是写了包名+类名，所以Behavior是不能够被混淆的。

5. 例子

前面讲了那么都得概念，关于CollapsingToolbarLayout的使用在网络上已经写得烂大街了，所以在这里也就不做太多的概述，关于layout_scrollFlags的使用和介绍也是一样的，所以我们直接上手代码吧。
下面的小例子是为了实现一个简单的透明度渐变的toolbar和header的移动。先看看效果图吧：

toolbar和header的移动完整例子

5.1 分析

从图中可以看到，我们的标题栏是随着上下滑动而透明度渐变，头像在展开状态下处于居中状态，随着慢慢的滑动合上，头像会改变X轴和Y轴的坐标，最终移动到返回键的旁边。

5.2 开始编码

我们采用的做法是用AppBarLayout包裹一个CollapsingToolbarLayout，CollapsingToolbarLayout中放我们的背景图片，随着滑动收缩和关闭图片，下面是一个NestedScrollView，里面放LinearLayout和一大堆的CardView。

activity_transfer_header中的布局

<?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=".TransferHeaderActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/mCollapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv"
                android:layout_width="match_parent"
                android:layout_height="240dp"
                android:scaleType="fitXY"
                android:src="@mipmap/design"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9" />
                
        </android.support.design.widget.CollapsingToolbarLayout>
        
    </android.support.design.widget.AppBarLayout>
    
    <include layout="@layout/layout_tr_content" />
    
</android.support.design.widget.CoordinatorLayout>

其中我们CollapsingToolbarLayout的layout_scrollFlags使用的是scroll和exitUntilCollapsed，scroll是必需要设置的，不设置将无法滑动，exitUntilCollapsed可以让CollapsingToolbarLayout退出关闭。

ImageView的layout_collapseMode为parallax，代表ImageView滑动会有一个视差滚动的效果，而视差滚动的比值(layout_collapseParallaxMultiplier)是0.9。需要注意的是CollapsingToolbarLayout内部必需有一个铺满高度的VIew来做参考坐标，自定义Behavior才能够起作用。

layout_tr_content中的内容

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
    android:scrollbars="none"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_translucent_behavior">

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

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginBottom="40dp"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            app:cardElevation="3dp" />

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginBottom="40dp"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            app:cardElevation="3dp" />
    </LinearLayout>

</android.support.v4.widget.NestedScrollView>

好了，我们运行起来看看效果吧：

效果1

诶？有没有发现效果不一样？我们运行起来的是这样：

效果一

而我们效果图中的是这样：

效果二

其实只需要在NestedScrollView中加上一个属性behavior_overlapTop，它会向上缩进赋值的高度：

加上behavior_overlapTop

5.3 实现透明Toolbar

创建TranslucentBehavior继承至CoordinatorLayout.Behavior。我们在Behavior中计算移动的Y轴和总高度的比例，然后计算alpha通道的值，设置Toolbar的背景颜色。

具体代码实现

public class TranslucentBehavior extends CoordinatorLayout.Behavior<Toolbar> {

    /**标题栏的高度*/
    private int mToolbarHeight = 0;

    public TranslucentBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, Toolbar child, View dependency) {
        return dependency instanceof TextView;
    }

    /**
     * 必须要加上  layout_anchor，对方也要layout_collapseMode才能使用
     */
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, Toolbar child, View dependency) {

        // 初始化高度
        if (mToolbarHeight == 0) {
            mToolbarHeight = child.getBottom() * 2;//为了更慢的
        }
        //
        //计算toolbar从开始移动到最后的百分比
        float percent = dependency.getY() / mToolbarHeight;

        //百分大于1，直接赋值为1
        if (percent >= 1) {
            percent = 1f;
        }

        // 计算alpha通道值
        float alpha = percent * 255;


        //设置背景颜色
        child.setBackgroundColor(Color.argb((int) alpha, 63, 81, 181));

        return true;
    }
}

在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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TransferHeaderActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/mCollapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv"
                android:layout_width="match_parent"
                android:layout_height="240dp"
                android:scaleType="fitXY"
                android:src="@mipmap/design"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9" />

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

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

    <include layout="@layout/layout_tr_content" />
   <!--layout_anchor iv 才起作用-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/iv"
        app:layout_behavior="android.of.road.com.behavior.TranslucentBehavior"
        app:navigationIcon="@drawable/ic_arrow_back_white_24dp" />

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

需要注意的是：

layout_behavior中放的的是全路径，错一个都不能正常工作
Toolbar需要放在content之后

来看看效果吧：

toolbar和header的移动-透明标题

完美达成！！

5.4 头像移动

创建TransferHeaderBehavior继承CoordinatorLayout.Behavior，传入泛型是ImageView，这个ImageView就是我们的参考坐标View。
实现原理是：

先计算出header的X轴位置：父View的宽度/2 - header的宽度/2
Y轴为父View的高度 - header的高度
不断使用滑动的父Y轴的距离来计算算header的X轴百分比和Y轴百分比
不断的更改X轴的距离即可

具体实现看代码：

public class TransferHeaderBehavior extends CoordinatorLayout.Behavior<ImageView> {

    /**
     * 处于中心时候原始X轴
     */
    private int mOriginalHeaderX = 0;
    /**
     * 处于中心时候原始Y轴
     */
    private int mOriginalHeaderY = 0;


    public TransferHeaderBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, ImageView child, View dependency) {
        return dependency instanceof Toolbar;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, ImageView child, View dependency) {
        // 计算X轴坐标
        if (mOriginalHeaderX == 0) {
            this.mOriginalHeaderX = dependency.getWidth() / 2 - child.getWidth() / 2;
        }
        // 计算Y轴坐标
        if (mOriginalHeaderY == 0) {
            mOriginalHeaderY = dependency.getHeight() - child.getHeight();
        }
        //X轴百分比
        float mPercentX = dependency.getY() / mOriginalHeaderX;
        if (mPercentX >= 1) {
            mPercentX = 1;
        }
        //Y轴百分比
        float mPercentY = dependency.getY() / mOriginalHeaderY;
        if (mPercentY >= 1) {
            mPercentY = 1;
        }

        float x = mOriginalHeaderX - mOriginalHeaderX * mPercentX;
        if (x <= child.getWidth()) {
            x = child.getWidth();
        }
        // TODO 头像的放大和缩小没做

        child.setX(x);
        child.setY(mOriginalHeaderY - mOriginalHeaderY * mPercentY);
        return true;
    }
}

在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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TransferHeaderActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/mCollapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv"
                android:layout_width="match_parent"
                android:layout_height="240dp"
                android:scaleType="fitXY"
                android:src="@mipmap/design"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9" />

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

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

    <include layout="@layout/layout_tr_content" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/iv"
        app:layout_behavior="android.of.road.com.behavior.TranslucentBehavior"
        app:navigationIcon="@drawable/ic_arrow_back_white_24dp" />
    <!--layout_anchor iv 才起作用-->

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center_horizontal"
        android:elevation="5dp"
        android:src="@mipmap/default_header"
        app:layout_anchor="@id/iv"
        app:layout_behavior="android.of.road.com.behavior.TransferHeaderBehavior" />

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

运行查看效果：

toolbar和header的移动完整例子

完美达成！！

6. 最后

TransferHeaderBehavior中遗留了一个todo：头像的缩小，这个留着下一章实现。

未完待续、敬请期待！
免为其难的关注一下公众号吧！！

img_b246dc41a34e6fdd3598d113e0f65194.jpe

FullScreenDeveloper

Material Design系列（一）- CollapsingToolbarLayout 和AppBarLayout

1. 什么是CoordinatorLayout

2. 如何使用CoordinatorLayout

2.1 添加依赖

2.2 布局中使用CoordinatorLayout

3. 什么是AppBarLayout

4. 如何使用AppBarLayout

4.1 例子1

4.2 app:layout_scrollFlags介绍

4.3 Behavior

5. 例子

5.1 分析

5.2 开始编码

5.3 实现透明Toolbar

5.4 头像移动

6. 最后

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Material Design系列（一）- CollapsingToolbarLayout 和AppBarLayout

1. 什么是CoordinatorLayout

2. 如何使用CoordinatorLayout

2.1 添加依赖

2.2 布局中使用CoordinatorLayout

3. 什么是AppBarLayout

4. 如何使用AppBarLayout

4.1 例子1

4.2 app:layout_scrollFlags介绍

4.3 Behavior

5. 例子

5.1 分析

5.2 开始编码

5.3 实现透明Toolbar

5.4 头像移动

6. 最后

热门文章

最新文章

相关电子书