（译）FloatingActionButton的使用

本文介绍了FloatingActionButton的使用。

原文链接：Floating Action Buttons

概述

Floating action buttons (or FAB)是：“一个提升动作的特例。通过一个悬浮在UI之上的圆形图标并且有指定的动作行为，与变形，启动，锚点转换相关进行区分。”

例如，如果你使用一个邮箱应用，列出了收件箱文件夹，那么提升动作可能是写一封新邮件。

FAB代表一个屏幕中的 主要动作。更多信息和FAB按钮的用例可以从Google官方设计规范找到。

用法

Google在I/O 2015大会上发布了可以创建FAB的支持库。在过去，使用第三方类库例如makovkastar/FloatingActionButton 和 futuresimple/android-floating-action-button 。

悬浮动作图标

FAB使用和屏幕顶部的App Bar 相同的菜单图标。这意味着图片应该是单一颜色并且符合材料设计规范。可以从material design icons site 或官方的 google material icons找到这些图标:

如果选择好了需要的图标，可以通过选择图标然后”Icon Package”然后选择”Android”包。注意Mac用户可能需要使用Unarchiver进行解压。在Android应用中把不同的图片放到对应 drawable 文件夹。

Design Support Library

确保首先进行了Design Support Library的配置。 然后需要在build.gradle 文件中添加依赖 compile 'com.android.support:design:X.X.X'，X代表支持库的版本。

现在就可以在布局中添加android.support.design.widget.FloatingActionButton View。src属性用于指定显示的图标。

1
2
3
4
5
<android.support.design.widget.FloatingActionButton
   android:src="@drawable/ic_done"
   app:fabSize="normal"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

除此之外，假设你在布局顶部声明了xmlns:app="http://schemas.android.com/apk/res-auto命名空间，你也可以定义自定义属性fabSize 可以指定按钮normal 或 mini。

为了放置FAB，我们需要使用CoordinatorLayout。CoordinatorLayout可以帮助子View进行交互，用于描述滚动改变时按钮怎样动画。现在我们可以利用CoordinatorLayout的特性把一个元素放到另一个之上。我们只需要在 CoordinatorLayout 中包含ListView和FloatingActionButton并且使用layout_anchor和 layout_anchorGravity属性.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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">

          <ListView
              android:id="@+id/lvToDoList"
              android:layout_width="match_parent"
              android:layout_height="match_parent"></ListView>

          <android.support.design.widget.FloatingActionButton
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="bottom|right"
              android:layout_margin="16dp"
              android:src="@drawable/ic_done"
              app:layout_anchor="@id/lvToDoList"
              app:layout_anchorGravity="bottom|right|end" />

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

按钮应该放在屏幕的右下角。推荐的底部margin为 手机为16d，平板为24dp。上面的例子，使用了16dp。
根据Google设计规范实际图片大小应该是 24dp。

FAB

FAB的动画

当用户向下滚动，FAB应该消失。当滚动到顶部，它应该重新出现。

为了使FAB产生动画，需要利用CoordinatorLayout，可以帮助子View编排动画。

替换ListView 为 RecyclerView

目前，你需要替换ListView使用RecyclerView它是ListView的继承者并且在这部分中描述过。根据this Google post CoordinatorLayout不支持ListView内置其中。你可以再看看RecyclerView的使用帮助你过渡。

1
2
3
4
5
<android.support.v7.widget.RecyclerView
         android:id="@+id/lvToDoList"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

你必须升级到RecyclerView v22版本。CoordinatorLayout不支持之前的v21版本。确保在build.gradle 文件中添加依赖：

1
compile 'com.android.support:recyclerview-v7:22.2.1'

使用CoordinatorLayout

然后，你需要为FAB实现一个CoordinatorLayout Behavior。这个类定义了按钮应该怎样响应包含在同一CoordinatorLayout中的其它View。

创建一个继承自FloatingActionButton.Behavior名为ScrollAwareFABBehavior.java的文件。目前FAB的默认行为用于为Snackbar而移动正如this video所显示的。我们想继承这个行为用于处理垂直方向的滚动事件。

1
2
3
4
5
6
7
8
9
10
11
public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
            FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
            super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target,
            nestedScrollAxes);
    }

}

因为通过这个类处理滚动，onNestedScroll())方法会被调用。我们可以检查Y的位置决定是否淡入淡出按钮。

多亏support v4 library 最近的更新 ，show() 和 hide()方法可以为FAB执行淡入淡出动画。之前，很多动画代码已经被实现动画代码已经被实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    // ...

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
            View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed,
                dyUnconsumed);

        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            child.show();
        }
    }

    // ...
}

最后一步是关联CoordinatorLayout行为到FAB上。我们可以在XML中定义声明它作为app:layout_behavior自定义属性：

1
2
<android.support.design.widget.FloatingActionButton    
    app:layout_behavior="com.codepath.floatingactionbuttontest.ScrollAwareFABBehavior" />

使用Coordinator Layout替换布局文件的根元素。这可以确保我们的ScrollAwareFABBehavior类中的onNestedScroll()方法被调用。

1
2
3
4
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    ...

因为我们在XML中静态定义了这个行为，我们也必须实现可以让布局填充正确工作的构造方法。

1
2
3
4
5
6
7
8
9
public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    // ...

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

   // ...
}

如果你忘了做最后一步，你会看到Could not inflate Behavior subclass错误信息。所有修改请查看示例代码。

注意：正常情况下实现CoordinatorLayout的行为，我们需要实现layoutDependsOn()) 和 onDependentViewChanged())，用于追踪CoordinatorLayout中其它View的改变。因为我们只需要监听滚动事件，我们使用了已有的FAB的行为，在blog post讨论了实现追踪Snackbars 和 AppBarLayout的改变。

在Header中嵌入FAB

一个常见的效果是在header旁边嵌入FAB就像这样：

这可以通过使用CoordinatorLayout作为根元素实现。我们需要为FAB指定layout_anchor到顶部View和layout_anchorGravity为bottom|right|end就像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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">

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

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.6"
            android:background="@android:color/holo_purple"
            android:orientation="horizontal"/>

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:background="@android:color/holo_orange_light"
            android:orientation="horizontal"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_done"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom|right|end"/>

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

更多细节请查看this stackoverflow post。关于那个布局的更多细节请查看使用CoordinatorLayout处理滚动。

参考

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Android开发工程师