Android Material Design Library系列教程（三）

尊重劳动成果，转载请注明出处：http://blog.csdn.net/growth58/article/details/48438657
关注新浪微博：@于卫国
邮箱：yuweiguocn@gmail.com

Google在2015 I/O大会上公布了Material Design Support Library，使用它可以创建materail应用在API 19以下突然变得很容易。在这个系列中，我们将使用RSS阅读器应用，我们用于Material系列的基础应用，重写让它完全使用新的Design Support Library。前面我们已经学习了基本的tab bar，在这篇文章中我们将学习滚动时toolbar 隐藏和显示。

在开始之前我认为值得注意的是改写现有代码实现一些非常好的特性将完全不需要JAVA代码。请再次阅读前面的句子！NO JAVA。

这是一些内置到design support library中真正强大的地方使其很突出，我们将获取很多特性构建到新的控件——我们只需要关联它可以关联的，在许多情况下，在我们布局中就可以完全完成。

因此第一件事情就是看看我们的主布局文件我们将再次修改它：

res/layout/include_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:id="@+id/main_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
      android:id="@+id/tab_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:clipToPadding="false"
      android:paddingLeft="@dimen/home_offset"
      app:tabMode="scrollable" />

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

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

我们已经添加了几个新的布局类型。最外层是CoordinatorLayout。这是主要的主力已经为我们做了大量的工作还需要我们进行简单的配置。它本质上是一个信号员应用外部定义的CoordinatorLayout行为到子Views上。这是一个抽象的概念，让我们实际尝试一下并且通过检查这个布局的其余部分来更好地说明它。

第二个新布局是AppBarLayout 包裹着Toolbar 和TabLayout。AppBarLayout 定义了一些公用的滚动行为公用于app bars 和定义滚动行为我们希望实现它。如果我们看看我们添加到Toolbar 上额外的布局参数，我们可以看到已经指定了两个scroll flags是将会应用到具体的控制行为。scroll 意味着toolbar 的滚动直接关系到别的滚动事件，enterAlways 意味着它将会在滚动在任何向下滚动事件上。换句话说scroll就是这个view将随着我们的滚动而移动，enterAlways 将会提供一个快速返回当我们向下滚动时。

我们已经说了关于滚动事件，但是还没讨论这些滚动事件从哪来，如果我们想一下应该是相当明显的：当用户作出滚动当前ViewPager 页的内容的行为后应该隐藏toolbar 。因此我们需要toolbar 关联到ViewPager原始的滚动事件。我们可以看一下我们已经添加到ViewPager 上的布局参数（这意味着它将被它的父布局控制——CoordinatorLayout 定义了我们希望实现的行为）。

这个行为是截然不同的Views和CoordinatorLayout 之间的合同负责两个Views 连接在一起。在我们例子中AppBarLayout定义了一个名为ScrollingViewBehavior的行为，它获取从View上收集到的滚动事件回传给AppBarLayout。AppBarLayout然后应用这些滚动事件到它的子Views上依据每个子View声明的滚动flags。

因此当ViewPager内发生滚动事件，通过AppBarLayout获取然后应用它们到Toolbar 并且我们也获得我们需要的滚动行为。

然而，如果我们尝试它是不会起作用的。这让我很头痛因为一切看起来都是正常的。我参考了下Chris Banes’优秀的Cheesesquare代码确认这个应该怎样工作并且在代码里我没有看出有任何的不同。我注意到的唯一的不同是在每个ViewPager fragment 里面Chris用了一个RecyclerView而我用了一个WebView。它是我在看了RecyclerView v22.2.0的源码后注意到的，它实现了一个名为NestedScrollingChild的接口，它是v4 support library中的一部分。

然后我又看了下这个并且尝试在我的WebView的子类实现NestedScrollingChild 并使用NestedScrollingChildHelper 实现它的方法按照
javadocs 所建议的。然而，我还是没能让它工作。

然后我看了一个实现NestedScrollingChild 的其它类并在v4 support library发一个名为NestedScrollView 的View，它的行为很像ScrollView并实现了NestedScrollingChild。

我尝试使用它包裹WebView：

res/layout/fragment_item.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:id="@+id/main_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
      android:id="@+id/tab_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:clipToPadding="false"
      android:paddingLeft="@dimen/home_offset"
      app:tabMode="scrollable" />

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

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

这个现在开始生成需要的滚动事件并且我获取到行为之后：

尽管这有很多新信息，但实际上我们需要得到一些很好的行为的变化还是非常小的。我们得到了很多小改变因为CoordinatorLayout 和AppBarLayout（它定义的行为）。

在下一篇文章中我们将学习Floating Action Button。

源代码可以从这下载。

请我喝杯咖啡，请使用支付宝扫描下方二维码：

原文地址：https://blog.stylingandroid.com/design-library-part-3/