Material Design 控件知识梳理(2) - AppB

2017-04-10 本文已影响1648人泽毛

Material Design 控件知识梳理(1) - Android Design Support Library 是什么
 Material Design 控件知识梳理(2) - AppBarLayout & CollapsingToolbarLayout
Material Design 控件知识梳理(3) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment
Material Design 控件知识梳理(4) - FloatingActionButton
Material Design 控件知识梳理(5) - DrawerLayout && NavigationView
Material Design 控件知识梳理(6) - Snackbar
Material Design 控件知识梳理(7) - BottomNavigationBar
Material Design 控件知识梳理(8) - TabLayout
Material Design 控件知识梳理(9) - TextInputLayout

一、概述

在某些App当中，我们经常会见到类似于下面的这种设计：

这种设计的目的是为了在初始时刻展示重要的信息，但是当用户需要查看列表的时候，不至于被封面占据过多的可视的区域，Google为这种设计提供了几个类，让我们只用实现很少的代码就能够实现这种效果，避免了我们通过去监听列表的滚动状态来去改变头部区域的显示，这篇文章，我们就一步步来学习如何实现这种效果。
要实现上面这种效果，需要对下面几方面的知识有所了解：

CoordinatorLayout
AppBarLayout
CollapsingToolbarLayout
实现了NestedScrollingChild接口的滚动布局，例如RecyclerView、NestedScrollView等

这四者的关系可以用下面这张图来表示：

其中CollapsingToolbarLayout需要依赖于AppBarLayout，因此我打算把文章的讨论分为两部分：

只采用AppBarLayout实现
采用AppBarLayout + CollapsingToolbarLayout实现

二、只采用`AppBarLayout`实现

当只采用AppBarLayout时，我们的布局层次一般是下面这样：

2.1 `CoordinatorLayout`

CoordinatorLayout是一个重写的ViewGroup，它负责AppBarLayout以及可滚动布局之间的关系，因此，它是作为这两者的直接父控件。

2.2 `AppBarLayout`下的列表

一般是RecyclerView或者ViewPager，为了能让它和AppBarLayout协同工作，需要给列表控件添加下面这个属性，这样列表就会显示在AppBarLayout的下方：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

2.3 `AppBarLayout`的标志位

需要将AppBarLayout作为CoordinatorLayout的直接子View，同时它也是一个LinearLayout，因此它的所有子View都是线性排列的，而它对子View的滚动显示管理是通过子View的app:layout_scrollFlags属性，注意，这个标志位是在AppBarLayout的子View中声明的，而不是AppBarLayout中。

app:layout_scrollFlags的值有下面五种可选：

scroll
exitUntilCollapsed
enterAlways
enterAlwaysCollapsed
snap

2.3.1 `scroll`

使得AppBarLayout的子View伴随着滚动而收起或者展开，有两点需要注意：

这个标志位是其它四个标志位生效的前提
带有scroll标志位的子View必须放在AppBarLayout中的最前面

现在我们给RecyclerView设置了app:layout_behavior，而AppBarLayout中的两个子View都没有设置scroll标志位：

<?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/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
        <TextView
            android:gravity="center"
            android:text="没有设置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

此时AppBarLayout中的子View都一直固定在CoordinatorLayout的顶部：

下面，我们给AppBarLayout中的第一个子View加上app:layout_scrollFlags="scroll|exitUntilCollapsed"标志位：

 <android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:layout_scrollFlags="scroll"/>  //注意看这里!
        <TextView
            android:gravity="center"
            android:text="没有设置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
</android.support.design.widget.AppBarLayout>

那么此时滑动情况为：

设置了scroll的子View可以在滚动后收起，而没有设置的则不可以。
在手指向上移动的时候，优先收起AppBarLayout中的可收起View，当它处于收起状态时，下面的列表内容才开始向尾部滚动。
在手指往下移动的时候，优先让下面的列表内容向顶部滚动，当列表滚动到顶端时，AppBarLayout的可收起View才展开。

2.3.2 `exitUntilCollapsed`

对于可收起的子View来说有两种状态：Enter和Collapsed。手指向上移动的时候，会优先收起AppBarLayout中的子View，而收起的最小高度为0，假如希望它在收起时仍然保留部分可见，那么就需要使用exitUntilCollapsed + minHeight属性，minHeight就决定了收起时的最小高度是多少，也就是Collapsed状态。

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
        <TextView
            android:gravity="center"
            android:text="没有设置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
</android.support.design.widget.AppBarLayout>

2.3.3 `enterAlways`

exitUntilCollapsed决定了手指向上移动时AppBarLayout怎么收起它的子View，而enterAlways则决定了手指向下移动时的行为。默认情况下，在手指向下移动时，会优先让列表滚动到顶部，而如果设置了enterAlways，那么会优先让AppBarLayout中的子View滚动到展开。

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- 需要设置属性 -->
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll|enterAlways"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:layout_scrollFlags="scroll|enterAlways"/>
        <TextView
            android:gravity="center"
            android:text="没有设置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
</android.support.design.widget.AppBarLayout>

2.3.4 `enterAlwaysCollapsed`

enterAlwaysCollapsed，enterAlways以及minHeight属性一起配合使用，采用这个标志位，主要是为了使得手指向下移动时出现下面这个效果：

优先滚动AppBarLayout中的子View，但是并不是滚动到全部展开，而是只滚动到minHeight
AppBarLayout中的子View滚动到minHeight之后，开始滚动列表，直到列表滚动到头部
列表滚动到头部之后，开始滚动AppBarLayout中的子View，直到它完全展开

注意和exitUntilCollapsed的minHeight区分开来；

enterAlways|enterAlwaysCollapsed的minHeight，决定的是手指向下移动且列表没有滚动到顶端的最大高度
exitUntilCollapsed的minHeight，决定的是手指向上移动时的最小高度

这两个标志位和minHeight是相互依赖的关系，如果声明对应的标志位，那么minHeight是没有任何意义的；而如果只声明了标志位，没有声明minHeight，那么默认minHeight为0。

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- 需要设置属性 -->
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll|enterAlways|enterAlwaysCollapsed, minHeight=50dp"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>
        <TextView
            android:gravity="center"
            android:text="没有设置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
</android.support.design.widget.AppBarLayout>

2.3.5 `snap`

默认情况下，在手指从屏幕上抬起之后，AppBarLayout中子View的状态就不会变化了，而如果我们设置了snap标志位，那么在手指抬起之后，会根据子View当前的偏移量，决定是让它变为收起还是展开状态。

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- 需要设置属性 -->
        <TextView
            android:gravity="center"
            android:text="layout_scrollFlags=scroll|snap"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_green_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:layout_scrollFlags="scroll|snap"/>
        <TextView
            android:gravity="center"
            android:text="没有设置layout_scrollFlags"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="100dp"/>
</android.support.design.widget.AppBarLayout>

2.4 监听`AppBarLayout`的滚动状态

AppBarLayout提供了监听滚动状态的接口，我们可以根据这个偏移值来改变界面的状态：

private void setAppBar() {
        final TextView moveView = (TextView) findViewById(R.id.iv_move_title);
        AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.al_title);
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                Log.d("AppBarLayout", "offset=" + verticalOffset);
                int height = moveView.getHeight();
                int minHeight = moveView.getMinHeight();
                float fraction = verticalOffset / (float) (minHeight - height);
                moveView.setAlpha(1 - fraction);
            }

        });
}

这里，我们根据offset的值来改变alpha，最终达到下面的效果：

scroll_7.gif
在手指往上移动的过程当中，verticalOffset从0变为负值：

2.6 `AppBarLayout`小结

AppBarLayout主要是掌握两点：

app:layout_scrollFlags几种标志位之前的区别
如何监听AppBarLayout的滚动

掌握完这两点之后，我们就可以自由发挥，做出自己想要的效果了。

三、`AppBarLayout`和`CollapsingToolbarLayout`结合

CollapsingToolbarLayout用于对Toolbar进行包装，因此，它是AppBarLayout的直接子View，同时也是Toolbar的直接父View，当使用CollapsingToolbarLayout时我们的界面布局一般是这样的：

CollapsingToolbarLayout的标志比较多，而且需要和Toolbar相结合，下面，我们就以一种比较常见的例子，来讲解几个比较重要的标志位，先看效果：

AppBarLayout的布局如下：

<android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/colorPrimaryDark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/iv_title"
                android:src="@drawable/ic_bg"
                android:layout_width="match_parent"
                android:scaleType="centerCrop"
                android:layout_height="150dp"
                app:layout_collapseParallaxMultiplier="0.5"
                app:layout_collapseMode="parallax"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:title="@string/app_name"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:title="Collapse"
                app:navigationIcon="@android:drawable/ic_media_play"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

下面，我们就来介绍上面这个布局中比较重要的标志位：

app:contentScrim
设置收起之后CollapsingToolbarLayout的颜色，正如例子中的那样，在收起之后，ImageView的背景被我们设置的contentScrim所覆盖。
app:layout_scrollFlags="scroll|exitUntilCollapsed"
scroll标志位是必须设置的，exitUntilCollapsed保证了我们在手指上移的时候，CollapsingToolbarLayout最多收起到Toolbar的高度，使得它始终保持可见。
app:layout_collapseMode="parallax"和app:layout_collapseParallaxMultiplier="0.5"
layout_collapseMode有两种模式，parallax表示视差效果，简单地说，就是当CollapsingToolbarLayout滑动的距离不等于背景滑动的距离，从而产生一种视差效果，而视差效果的大小由app:layout_collapseParallaxMultiplier决定。
app:layout_collapseMode="pin"
layout_collapseMode的另一种模式，它使得Toolbar一直固定在顶端。

除了上面这几个重要的标志位之外，相信大家还发现了CollapsingToolbar在全部展开的时候会把标题设置为比较大，而当上移时，标题慢慢缩小为Toolbar的标题大小，并移动到Toolbar的标题所在位置。

四、总结

以上就是对于使用CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout实现标题跟随列表滚动的简要介绍，最主要的是掌握layout_scrollFlags几种标志之间的区别。

五、参考文献

Material Design之 AppbarLayout 开发实践总结

Material Design 控件知识梳理(2) - AppB

一、概述

二、只采用`AppBarLayout`实现

2.1 `CoordinatorLayout`

2.2 `AppBarLayout`下的列表

2.3 `AppBarLayout`的标志位

2.3.1 `scroll`

2.3.2 `exitUntilCollapsed`

2.3.3 `enterAlways`

2.3.4 `enterAlwaysCollapsed`

2.3.5 `snap`

2.4 监听`AppBarLayout`的滚动状态

2.6 `AppBarLayout`小结

三、`AppBarLayout`和`CollapsingToolbarLayout`结合

四、总结

五、参考文献

更多文章，欢迎访问我的 Android 知识梳理系列：

猜你喜欢

热点阅读

Material Design 控件知识梳理(2) - AppB

一、概述

二、只采用AppBarLayout实现

2.1 CoordinatorLayout

2.2 AppBarLayout下的列表

2.3 AppBarLayout的标志位

2.3.1 scroll

2.3.2 exitUntilCollapsed

2.3.3 enterAlways

2.3.4 enterAlwaysCollapsed

2.3.5 snap

2.4 监听AppBarLayout的滚动状态

2.6 AppBarLayout小结

三、AppBarLayout和CollapsingToolbarLayout结合

四、总结

五、参考文献

更多文章，欢迎访问我的 Android 知识梳理系列：

猜你喜欢

热点阅读

二、只采用`AppBarLayout`实现

2.1 `CoordinatorLayout`

2.2 `AppBarLayout`下的列表

2.3 `AppBarLayout`的标志位

2.3.1 `scroll`

2.3.2 `exitUntilCollapsed`

2.3.3 `enterAlways`

2.3.4 `enterAlwaysCollapsed`

2.3.5 `snap`

2.4 监听`AppBarLayout`的滚动状态

2.6 `AppBarLayout`小结

三、`AppBarLayout`和`CollapsingToolbarLayout`结合