原文：Codelab for Android Design Support Library used in I/O Rewind Bangkok session----Make your app fancy with few lines of code

原文项目 demo: Lab-Android-DesignLibrary

双语对照地址: 【翻-双语】Android Design Support Library 的代码实验——几行代码，让你的 APP 变得花俏

翻译: MrFu

校验: MrFu

能去小小的 star 一下吗？非常感谢！Codelab

目前，我相信，没有任何 Android 开发者不知道材料设计的，因为它的设计在过去的一年震惊了世界，正式的变成了一个设计理念。

令人惊讶的是，在 Android 应用中材料设计是不容易实现的，因为材料设计的 UI 组件如: Floating Action Button (FAB) 在低于 Android L 系统上是不可用的。我们只能选择使用由独立开发者公布出来的第三方库。

来了一个好消息，上周(2015.5.29)在谷歌2015 I/O 大会时，谷歌宣布了一个今年最让人兴奋的支持库，名叫 Android Design Support Library，在这个单独的 library 里提供了一堆有用的材料设计 UI 组件。通过这篇文章，让我用这个机会向你一个一个描述如何来使用他们。

请查看下面这个视频作为本教程最终的结果。

从这里开始，空白 Activity 里面有一个 DrawerLayout 。

Activity 已经调整为材料设计风格的主题。

<item name="colorPrimary">#2196F3</item>
<item name="colorPrimaryDark">#1565C0</item>
<item name="colorAccent">#E91E63</item>

好了，让我们开始吧！

##步骤一：从 Github 上拷贝源码

我已经为这个 codelab 准备了源码，你可以从 GitHub 轻松的 clone 它。MainActivity 是上面所示的最终结果。请在这个 project 的 CodeLabActivity 中做我们的代码实验。

你一定要自己做的一个任务是... 成功的运行它，它应该是通过简单的点击“运行”按钮来完成。

##步骤二：添加 Android Design Support Library 依赖

第一件要做的事是在我们的项目中添加 Android Design Support Library，在 app 的 build.gradle 文件下添加一行依赖代码。

compile 'com.android.support:design:22.2.0'

` 请注意 Design Support Library 依赖于 Support v4 和 AppCompat v7。一旦你在你的项目中添加这个 library，你也将获得一个这些 libraries 的组件的入口。（译者注：就是说 Design Support Library 中就已经包含了 Support v4 和 AppCompat v7）

顺便说一下，从 Github 克隆的源码已经添加了上面这行代码。但是如果你创建了你自己的项目，你需要自己添加它。

##步骤三：添加 FAB

Floating Action Button (FAB) 是一个有一些阴影的圆形按钮，这个令人难以置信的，可以改变世界的设计。毫不奇怪它为什么会变成材料设计的标志。因此我们从这开始。添加一个 FAB 在布局文件，因为它需要一些父类来使它在屏幕的右下方位置对齐，所以用 FrameLayout 来包裹 FloatingActionButton。请做这样的事情作为 DrawerLayout 的内容：更换 activity_code_lab.xml 中已经存在的 TextView ，像下面的代码这样。

<android.support.v4.widget.DrawerLayout ...
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ....>
    <FrameLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:src="@drawable/ic_plus"
            app:fabSize="normal" />
    </FrameLayout>
    ...
</android.support.v4.widget.DrawerLayout>

android:src 是用来定义你想要的资源文件 ID（推荐 40dp 的清晰的 png 文件），而 app:fabSize="normal" 是用来定义 FAB 的大小的，normal 的意思是在大多数情况下标准尺寸为 56dp 的按钮，但是万一你想使用较小的一个， mini 是另一个选择，它的大小将变成 40dp。

就这样，FAB 现在准备使用！下面是当我在 Android 4.4 上运行这段代码的结果。

但是当我们运行在 Android 5.0 上时，结果变成了这样...

这不是特效，只是一个 bug。幸运的是 design library 的开发者团队已经知道这个问题并在不久的将来会发布一个修复的版本。但是如果你现在想要使用它，我们可以做一些事情：通过设置 FAB 的 margin right 和 margin bottom 为 16dp 在 API Level 21+ 上面并在低于 Android L 的版本上设置为 0dp。感谢配置资源可以让我们非常容易的做到这一点。

res/values/dimens.xml

<dimen name="codelab_fab_margin_right">0dp</dimen>
<dimen name="codelab_fab_margin_bottom">0dp</dimen>

res/values-v21/dimens.xml

<dimen name="codelab_fab_margin_right">16dp</dimen>
<dimen name="codelab_fab_margin_bottom">16dp</dimen>

res/layout/activity_code_lab.xml

<android.support.design.widget.FloatingActionButton
    ...
    android:layout_marginBottom="@dimen/codelab_fab_margin_bottom"
    android:layout_marginRight="@dimen/codelab_fab_margin_right"
    .../>

好了！

这里有另一个 bug。阴影，你在哪里？这个 bug 和先前的那个是有关联的。你可以通过定义 app:borderWidth="0" 作为 FAB 的属性作为一个快速的解决方案。

欢迎回来，阴影！其深度是自动设置的最佳实践之一：6dp 在空闲状态，12dp 是按下状态。反正你可以通过定义重写这些值，app:elevation 为空闲状态下的阴影深度，andapp:pressedTranslationZ 为按下状态的。

关于按钮的颜色，FAB 基本上使用强调色，但是你可以重写 app:backgroundTint 属性来修改。

就像传统的按钮，你可以通过 setOnClickListener() 处理点击，在 CodeLabActivity.java 文件的 initInstances 方法中添加下面的代码。

FloatingActionButton fabBtn;
...
private void initInstances() {
    ...
    fabBtn = (FloatingActionButton) findViewById(R.id.fabBtn);
    fabBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
        }
    });
}

完成！

##步骤四：使用 Snackbar

Snackbar，在屏幕的地步一个微小的黑色条显示着一条简短的消息，在这个 library 中也是可用的。Snackbar 和 Toast 有着相同的概念，但是不同于 Toast，它的表现是作为 UI 的一部分而不是覆盖在屏幕上。

不只是概念相同，编码风格也是由 Toast 所启发，你可以通过下面的代码唤起 Snackbar。

Snackbar.make(someView, "Hello. I am Snackbar!", Snackbar.LENGTH_SHORT)
        .setAction("Undo", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            }
        })
        .show();

make() 的第一个参数是一个 View 或者 Layout，你想在它的底部位置显示一个 Snackbar。在这个例子中，一个 FrameLayout 包裹着一个 FAB 就是其中一个例子。setAction() 方法是用在设置动作显示在 Snackbar 的右侧并有对应的监听。这个方法不是必需的，可以移除。

现在，让我们通过添加下面的代码去试试。

FrameLayout rootLayout;
...
private void initInstances() {
    ...
    rootLayout = (FrameLayout) findViewById(R.id.rootLayout);
    fabBtn = (FloatingActionButton) findViewById(R.id.fabBtn);
    fabBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Snackbar.make(rootLayout, "Hello. I am Snackbar!", Snackbar.LENGTH_SHORT)
                    .setAction("Undo", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                        }
                    })
                    .show();
        }
    });
}

点击 FAB 以及看到的结果。

有用！但是... 还不是很完美。它是出现在放置 Snackbar 顶部的位置，长期的用户体验是很差的。不管怎么样，这个行为已经是正确的，因为这里没有为 Snackbar 和 FAB 定义任何关联。

为了这个目的专门发明了一个特殊的布局，使子 Views 协调工作。这就不用奇怪为什么它的名字是 CoordinatorLayout 了。

##步骤五：使他们和 CoordinatorLayout 协作

CoordinatorLayout 是一个让子 Views 协调工作的布局。这里没有任何魔法。每个 View 中肯定是设计和实现了和 CoordinatorLayout 协同工作的。FAB 和 Snackbar 就是这两个view。

所以... 现在让我们将 FrameLayout 改成 CoordinatorLayout 包裹一个FAB。

res/layout/activity_code_lab.xml

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.FloatingActionButton
        ... />
</android.support.design.widget.CoordinatorLayout>

而且，不要忘了在 CodeLabActivity.java 改变 rootLayout 的变量类型为 CoordinatorLayout，否则就会崩溃。

//FrameLayout rootLayout;
CoordinatorLayout rootLayout;
//rootLayout = (FrameLayout) findViewById(R.id.rootLayout);
rootLayout = (CoordinatorLayout) findViewById(R.id.rootLayout);

结果：现在 FAB 随着 Snackbar 的出现和消失而移动。还增加了一些功能。Snackbar 现在能够滑动消失了！请试一试。

但是 bug 到处都是… bug 出现在低于 Android L 的系统上，当 Snackbar 滑动消失的时候，FAB 忘记了移动下来。

这显然是一个 bug，但是我不知道确切的原因。感谢天主，这里有一些解决方法。从我的实验中，我发现当我们设置 FAB 的 margin bottom 和 margin right 为一些非零的正数值时，它将会奇迹般的正常工作，所以..就只需要为低于 Android L 的系统改变 margin 的值为 0.1dp就行。

res/values/dimens.xml

<dimen name="codelab_fab_margin_right">0.1dp</dimen>
<dimen name="codelab_fab_margin_bottom">0.1dp</dimen>

完成。下面是结果。

从现在起，如果你计划使用 Android Design Support Library。请首先考虑 CoordinatorLayout，因为它就像是这个 library 的核心。

##步骤六：再见 ActionBar，你好，Toolbar

Toolbar 不是 Android Design Support Library 的一部分，而是在这个库中需要与其他组件一起使用。

Toolbar 是一个替代传统的 Action Bar 具有更灵活的行为。我鼓励你们从现在开始隐藏 Action Bar 并且切换到 Toolbar。因为这些有奇妙功能的新库，包括 Design Support Library 的组件中，都被设计为和 Toolbar 协同工作而不是 Action Bar。

很容易切换到 Toolbar。只需要从 Activity 定义的 AppTheme 的 style 属性隐藏掉 Action Bar 开始。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

然后在 CoordinatorLayout 里面的 FAB 之前正确的放一个 Toolbar 组件。

<android.support.design.widget.CoordinatorLayout
    ...>
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
    <android.support.design.widget.FloatingActionButton
        ...>
    </android.support.design.widget.FloatingActionButton>
</android.support.design.widget.CoordinatorLayout>

现在写代码来告诉系统，我们将使用 Toolbar 作为一个 Action Bar，更换下面的 Java 代码。

Toolbar toolbar;
private void initInstances() {
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    ...
}

虽然它现在可以运行成功，但是根据我之前说的，放在 CoordinatorLayout 的东西必须被设计和实现成与它一起合作的，否则将不与任何其他兄弟 views(sibling views) 协作。但是... Toolbar是不合适的。别担心，这里没有任何新的特殊 Toolbar。只是一个组件是为了准备让 Toolbar 与 CoordinatorLayout 一起工作的更加完美。这是简单的任务，只是简单的用 AppBarLayout 包裹 Toolbar，就这样！

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

Codelab

Install / Use

README

Related Skills