Material Design-Surface平面第二篇

知识点

1. 使用动效，完成循环视图，响应点击新条目的过渡
2. 在平面间，根据滚动相应的平面，使它们之间产生动态效果

参考资料

udacity-在 Android 应用中使用材料设计

概述

---

继续上一篇 Material Design-Surface平面第一篇

Material Design 中材料属性（动效的使用）能够帮助我们创建沉浸式的应用程序，赋予材料平面生命的独特属性。用来响应交互操作，而非跳转到新的状态。这使得它们更容易被人理解。

循环视图（circular review）

---

它是一个简单、有意义的动效。

使用场景：点击 RecyclerView 的其中一个条目，将开启循环视图向新条目文本过渡。

如何实现循环显示效果？

将要进行操作的视图，中心点 X 和 Y 用来执行过渡动画，还有 startRadius 动画开始半径和 endRadius 动画结束半径。

这是个视图组，包含了我们将要更改的文本。首先，我们需要找到显示效果的中心点，我们可以采用条目的半宽和半高。显示效果应该是从无到有，所以我们的起始半径为 0，结束半径可以是半宽高的斜边大小。

 boolean isVeggie = ((ColorDrawable)view.getBackground()) != null && ((ColorDrawable)view.getBackground()).getColor() == green;

            int finalRadius = (int)Math.hypot(view.getWidth()/2, view.getHeight()/2);

            if (isVeggie) {
                text1.setText(baconTitle);
                text2.setText(baconText);
                view.setBackgroundColor(white);
            } else {
                // 动效
                Animator anim = ViewAnimationUtils.createCircularReveal(view, (int) view.getWidth()/2, (int) view.getHeight()/2, 0, finalRadius);
                text1.setText(veggieTitle);
                text2.setText(veggieText);
                view.setBackgroundColor(green);
                anim.start();
            }

响应滚动事件

---

就像材料可以改变宽度和高度，它们也可以改变平面高度。我们看到，当手指触碰到按钮时，这些按钮像是被磁铁吸引而悬浮起来一样，而这一效果也可以发生在滚动交互上。

想象两个平面，它们在相同的水平面上，共同移动且步调一致。在特定的一个点上，我们的平面可能需要固定住并向上抬升，使得另一个平面可以从下方通过。我们称之为“缝到阶过渡”（a seam to step transition）。两个相邻的平面先是形成一条缝，当较低位置的平面从另一个平面下方滑过的时候，它们形成了一个阶梯。

例如，使用经过扩展的应用栏，在用户滚动时，应用栏缩小自身的标准高度，并将其固定在屏幕上方，在用户滚动时，应用栏缩小了自身的标准高度，并将其固定在屏幕上方。

我们可以通过新的应用栏布局和收缩的工具栏布局，构建这一效果。

CoordinatorLayout 是一个 FrameLayout， 该控件帮助协调视图之间的行为，在这个例子中，他将协调列表滚动和应用栏滚动两个行为。

AppBarLayout：是一个竖直方向（vertical）布局的 LinearLayout，实现了 Material Design 应用栏的许多功能，也可以说是滚动手势。该容器的子 View 应该通过 app:layout_scrollFlags 属性，规定它们的滚动行为。它必须是 CoordinatorLayout 的直接子 View，如果它的父类容器是其它 ViewGroup，它的大多数功能将不会起作用。

AppBarLayout 也需要一个单独的可滑动的成员，为了知道什么时候滚动。这个约束条件通过设置 app:layout_behavior="@string/appbar_scrolling_view_behavior" 属性来完成。

CollapsingToolbarLayout 包裹 Toolbar 的直接父类容器，实现应用栏的折叠效果。当应用栏展开或收缩时，通过 app:collapsedTitleTextAppearance 和 app:expandedTitleTextAppearance 属性来设置标题样式。app:contentScrim="?attr/colorPrimary" 属性用来设置收缩后的应用栏背景样式。

通过使用这些技术，我们可以将 UI 划分成，传递关系的多个平面，也可以提供交互操作的暗示。界面应该动态响应用户的交互操作。当我们视图表达 UI 元素之间的关系的时候，使用这些技术，容易被人理解，又能使应用更加直观。

制作可滚动的动态平面

---

大多数的逻辑代码都在布局文件中。

当我们向上滚动时，图片消失。这个图片有趣的是，在应用栏进行收缩的时候有一种视差效果。“不对称滚动”，也就是前景比背景移动更快，使用户有一种深度感。

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_height="168dp"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimaryDark"
            app:title="@string/action_settings"
            app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:contentInsetStart="72dp"
                app:theme="@style/AppTheme.PopupOverlay"
                 />
        </android.support.design.widget.CollapsingToolbarLayout>

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

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

AppBarLayout 希望 CoordinatorLayout 中有一个支持嵌套滚动的同级控件。我们可以通过 NestedScrollView 或设置 ScrollView 的 android:nestedScrollingEnabled 属性为 true 或其它可滚动控件（如 RecyclerView）。设备滚动视图中，嵌套滚动和 CoordinatorLayout 协同工作。在应用栏滚动、嵌套视图滚动、两者同时滚动或两者均不滚动的时，发出通知并进行管理。