目录

• 前言
• 1. Floating Action Button
• 2. 制作浮动操作按钮的菜单
• • 2.1 显示浮动操作按钮菜单
  • 2.2 隐藏浮动操作按钮菜单
• 3. 一个新的圆形动画
• • 3.1 创建一个Activity
  • 3.2 构建UI

前言

浮动动作按钮(FAB)已经成为最简单的组件之一，成为设计师和开发人员快速和必不可少的最爱。

家人们，这篇文章将向您展示如何使您的应用程序FAB交互式，以及如何制作自己的动画。但是让我们从简单的开始，将浮动操作按钮添加到一个Android项目中。

浮动动作按钮看起来像这样的布局文件，如果创建一个空白活动的Android Studio项目，将自动生成；

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_menu_help"
    />

1. Floating Action Button

浮动操作按钮可以是两种尺寸之一。默认为56dp, mini为40dp。要进一步讨论使用FAB的设计原则；在最近的Android应用程序中，FAB会对元素列表的滚动做出反应，在我看来，它应该在滚动时隐藏起来。

为了显示这个动画，我创建了一个recyclerView，这样FAB就可以对滚动做出反应；

public class FAB_Hide_on_Scroll extends FloatingActionButton.Behavior {

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

    @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);

        //child -> Floating Action Button
        if (child.getVisibility() == View.VISIBLE && dyConsumed > 0) {
            child.hide();
        } else if (child.getVisibility() == View.GONE && dyConsumed < 0) {
            child.show();
        }
    }

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

我正在使用FloatingActionButton. behavior()类，根据官方文档，它的主要功能是移动FloatingActionButton视图，以便任何显示的零食条不覆盖它们。但在我们的例子中，这个类是扩展的，所以我们可以实现我们自己的行为。

让我们更详细地了解一下这个行为类。它的目的是，无论何时启动滚动，如果滚动是垂直的，onStartNestedScroll()方法将返回true, onNestedScroll()方法将从那里隐藏或显示浮动操作按钮，这取决于其当前的可见性状态。

这个类的构造函数是这个视图行为的重要组成部分，它使这个视图可以从XML文件中膨胀；

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

要使用此行为，请向浮动操作按钮添加layout_behavior属性。该属性包含包名，加上末尾的类名，或者换句话说，这个类在项目中的确切位置。在我的例子中，它是这样的 ；

app:layout_behavior="com.valdio.valdioveliu.floatingactionbuttonproject.Scrolling_Floating_Action_Button.FAB_Hide_on_Scroll"

这个动画看起来很酷，但它可以更好。我个人更喜欢在滚动应用程序内容时将FAB移出屏幕，这样更真实。我的意思是:

应用与前面相同的逻辑，只是FAB隐藏的方式发生了变化。

动画很简单。FAB使用线性插值器垂直地浮在屏幕上。FAB向下浮动一段距离，根据其高度加上底部边界计算，将其完全从屏幕中移除，并在向上滚动时浮动回其原始位置。

如果仔细查看代码，就会发现我删除了View。可见和视图。GONE检查if语句，因为在这种情况下视图没有隐藏，只是浮出屏幕。

public class FAB_Float_on_Scroll extends FloatingActionButton.Behavior {

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

    @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);

        //child -> Floating Action Button
        if (dyConsumed > 0) {
            CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
            int fab_bottomMargin = layoutParams.bottomMargin;
            child.animate().translationY(child.getHeight() + fab_bottomMargin).setInterpolator(new LinearInterpolator()).start();
        } else if (dyConsumed < 0) {
            child.animate().translationY(0).setInterpolator(new LinearInterpolator()).start();
        }
    }

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

2. 制作浮动操作按钮的菜单

我看到许多Android应用程序制作了令人印象深刻的浮动操作按钮菜单，看起来和工作得都很好。下面是一个例子:

现在你已经知道我们在做什么了，让我们开始建造吧。

创建此菜单的第一步是包含3个小按钮的布局。

所有的小按钮都是不可见的，位于布局的底部，在主FAB下面。

内部 fab_layout.xml：

<FrameLayout 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.FloatingActionButton
        android:id="@+id/fab_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_menu_compass"
        android:visibility="invisible"
        app:backgroundTint="@color/colorFAB"
        app:fabSize="mini" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_menu_myplaces"
        android:visibility="invisible"
        app:backgroundTint="@color/colorFAB"
        app:fabSize="mini" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_menu_share"
        android:visibility="invisible"
        app:backgroundTint="@color/colorFAB"
        app:fabSize="mini" />
</FrameLayout>

将此布局包含在主要FAB下的活动布局中。

<include layout="@layout/fab_layout" />

现在布局已经设置好了，下一步是制作动画来显示和隐藏每个小型fab。

注意：在创建这些动画时，我遇到了触摸事件和小型fab的问题。当动画完成时，小fab的实际位置没有改变，只有视图出现在新的位置，所以你不能在正确的位置上实际执行触摸事件。我解决这个问题的方法是设置每个FAB的布局参数到它的新位置，然后执行将视图拉到新位置的动画。

其余部分，我将展示一个小型fab的动画制作过程。这个过程与其他的相同，只是重定位参数不同。

2.1 显示浮动操作按钮菜单

  FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) fab1.getLayoutParams();
  layoutParams.rightMargin += (int) (fab1.getWidth() * 1.7);
  layoutParams.bottomMargin += (int) (fab1.getHeight() * 0.25);
  fab1.setLayoutParams(layoutParams);
  fab1.startAnimation(show_fab_1);
  fab1.setClickable(true);

在这里，我重新定位fab1，通过添加右边缘和底部边缘到它的layoutParams和开始动画。

2.2 隐藏浮动操作按钮菜单

FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) fab1.getLayoutParams();
  layoutParams.rightMargin -= (int) (fab1.getWidth() * 1.7);
  layoutParams.bottomMargin -= (int) (fab1.getHeight() * 0.25);
  fab1.setLayoutParams(layoutParams);
  fab1.startAnimation(hide_fab_1);
  fab1.setClickable(false);

隐藏的过程与前面的动画相反。

在这个FAB上使用的动画是:

  //Animations
  Animation show_fab_1 = AnimationUtils.loadAnimation(getApplication(), R.anim.fab1_show);
  Animation hide_fab_1 = AnimationUtils.loadAnimation(getApplication(), R.anim.fab1_hide);

现在剩下的就是动画了。在res/anim/文件夹中，我创建了所有动画文件。这些内容并不多，但是如果您需要帮助来理解每个标签或属性的作用；

内部 ab1_show.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <!-- Rotate -->
    <rotate
        android:duration="500"
        android:fromDegrees="30"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="4"
        android:repeatMode="reverse"
        android:toDegrees="0"></rotate>

    <!--Move-->
    <translate
        android:duration="1000"
        android:fromXDelta="170%"
        android:fromYDelta="25%"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXDelta="0%"
        android:toYDelta="0%"></translate>

    <!--Fade In-->
    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="1.0"></alpha>

</set>

内部 fab1_hide.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <!--Move-->
    <translate
        android:duration="1000"
        android:fromXDelta="-170%"
        android:fromYDelta="-25%"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXDelta="0%"
        android:toYDelta="0%"></translate>

    <!--Fade Out-->
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0"></alpha>

</set>

最后，如果您查看负责移动视图的translate标记，那么在java代码中添加和减去的用于重新定位FAB的因子(170%和25%)对应于具有边距的因子。

同样的过程也适用于其他两个fab2，但迁移因子为(150%和150%)fab2和(25%和170%)fab3。

3. 一个新的圆形动画

如果你想用fab制作一些特殊的动画，你可以使用ViewAnimationUtils类在视图上制作显示动画。

本文的其余部分将特别关注这个类以及如何使用它构建揭示动画。不幸的是，这个类只适用于API版本21 (LOLLIPOP)或更高版本。

3.1 创建一个Activity

由于本文的其余代码示例与前面的示例解耦，我使用了一个新的Activity。如果您决定继续，创建一个名为RevealActivity的新空白活动。确保这个活动的布局文件有一个浮动操作按钮，因为我们将利用它来启动我们的动画。在我的例子中，这个FAB有android:id=“@+id/ FAB”

3.2 构建UI

要在视图上制作一个显示动画，你需要在动画执行后显示一个布局。

布局取决于你想在应用中显示的视图，但为了保持简单，我构建了一个示例布局“animation -show”。

在layouts文件夹中创建一个新文件fab_reveal_layout.xml，并插入以下代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/fabContainerLayout"
    android:layout_gravity="center_vertical|center_horizontal"
    android:background="@color/colorPrimary"
    android:gravity="center"
    android:visibility="gone"
    android:orientation="horizontal">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/f2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_email"
            app:backgroundTint="@color/colorFAB" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:elevation="8dp"
            android:text="Fab2"
            android:textColor="#fff" />
    </FrameLayout>

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

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginTop="@dimen/fab_margin">

            <android.support.design.widget.FloatingActionButton xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/f1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/fab_margin"
                android:layout_marginRight="@dimen/fab_margin"
                android:elevation="0dp"
                android:src="@android:drawable/ic_dialog_map"
                app:backgroundTint="@color/colorFAB"
                app:borderWidth="0dp"
                app:fabSize="normal" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:elevation="8dp"
                android:text="Fab1"
                android:textColor="#fff" />
        </FrameLayout>

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginTop="@dimen/fab_margin">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/f4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/fab_margin"
                android:layout_marginRight="@dimen/fab_margin"
                android:src="@android:drawable/ic_dialog_alert"
                app:backgroundTint="@color/colorFAB" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:elevation="8dp"
                android:text="Fab4"
                android:textColor="#fff" />
        </FrameLayout>
    </LinearLayout>


    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/f3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_dialer"
            app:backgroundTint="@color/colorFAB" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:elevation="8dp"
            android:text="Fab3"
            android:textColor="#fff" />
    </FrameLayout>
</LinearLayout>

实际上，这个文件中的容器LinearLayout有一个可见属性visibility="gone"，所以当你在文件中插入这段代码时，什么都不可见。要检查这个布局，从LinearLayout删除可见性属性或看一下下面的图片。

创建此文件后，将其包含在活动的布局文件中

activity_reveal.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    //...>

    //...
    <include layout="@layout/content_reveal" />

    <include layout="@layout/fab_reveal_layout" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add" />

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