前言

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

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

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

<android.support.design.widget.FloatingActionButtonandroid: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();}@Overridepublic 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 Buttonif (child.getVisibility() == View.VISIBLE && dyConsumed > 0) {child.hide();} else if (child.getVisibility() == View.GONE && dyConsumed < 0) {child.show();}}@Overridepublic 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();}@Overridepublic 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 Buttonif (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();}}@Overridepublic 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.FloatingActionButtonandroid: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.FloatingActionButtonandroid: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.FloatingActionButtonandroid: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上使用的动画是:

  //AnimationsAnimation 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 --><rotateandroid: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--><translateandroid:duration="1000"android:fromXDelta="170%"android:fromYDelta="25%"android:interpolator="@android:anim/linear_interpolator"android:toXDelta="0%"android:toYDelta="0%"></translate><!--Fade In--><alphaandroid: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--><translateandroid:duration="1000"android:fromXDelta="-170%"android:fromYDelta="-25%"android:interpolator="@android:anim/linear_interpolator"android:toXDelta="0%"android:toYDelta="0%"></translate><!--Fade Out--><alphaandroid: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"><FrameLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"><android.support.design.widget.FloatingActionButtonandroid: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" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:elevation="8dp"android:text="Fab2"android:textColor="#fff" /></FrameLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"><FrameLayoutandroid: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" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:elevation="8dp"android:text="Fab1"android:textColor="#fff" /></FrameLayout><FrameLayoutandroid: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.FloatingActionButtonandroid: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" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:elevation="8dp"android:text="Fab4"android:textColor="#fff" /></FrameLayout></LinearLayout><FrameLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"><android.support.design.widget.FloatingActionButtonandroid: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" /><TextViewandroid: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.FloatingActionButtonandroid: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>

Android FloatingActionButton（浮动动作按钮的动画）使用详情相关推荐

android 浮动小图标,android - 调整浮动动作按钮的图标大小（fab）
android - 调整浮动动作按钮的图标大小(fab) 新的浮动操作按钮应为56dp x 56dp,其中的图标应为24dp x 24dp. 所以图标和按钮之间的空间应该是16dp. android: ...
Android 加入一个动作按钮
在XML中声明一个动作按钮所有的动作按钮和其他的可以利用的items都定义在menu资源文件夹中的XML文件中.为了增加一个动作按钮到工具栏,需要在工程 /res/menu/ 目录下面创建一个新的X ...
计算机教案动作按钮,自定义动画及动作设置》教学设计
自定义动画及动作设置>教学设计发布时间:2017-04-16 [教材分析] powerpointxx是officexx中的一个重要软件,它可以将文字.图像.声音.动画等多种媒体编辑在一个作品中 ...
android 按键上浮动画_android – 浮动动作按钮动画
从@Zielony的回答中,我确切地说到了我想要的地方. 下面是正确应用效果的代码. scale_fab_in.xml android:duration="500" android ...
Android更改浮动操作按钮颜色
本文翻译自:Android changing Floating Action Button color Been trying for hours to change Material's Float ...
Android 相机拍照按钮缩放动画
Android 相机拍照按钮缩放动画前言之前一直想做一个关于相机按钮的动态缩放动画,正好最近有时间整理了以下演示正文 round_border.xml 首先,第一步,我们完成其外部的圆形线,使 ...
Android 5.0新控件——FloatingActionButton（悬浮按钮）
Android 5.0新控件--FloatingActionButton(悬浮按钮) FloatingActionButton是5.0以后的新控件,一个悬浮按钮,之所以叫做悬浮按钮,主要是因为自带阴影 ...
android 实现浮动窗口,Android_圣诞节，写个程序练练手————Android 全界面悬浮按钮实现，开始我以为悬浮窗口，可以用A - phpStudy...
圣诞节,写个程序练练手----Android 全界面悬浮按钮实现开始我以为悬浮窗口,可以用Android中得PopupWindow 来实现,虽然也实现了,但局限性非常大.比如PopupWindow必 ...
android FloatingActionButton
FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的所有属性.CoordinatorLayout可以用来配合Floa ...

Android FloatingActionButton（浮动动作按钮的动画）使用详情

目录

前言

1. Floating Action Button

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

2.1 显示浮动操作按钮菜单

2.2 隐藏浮动操作按钮菜单

3. 一个新的圆形动画

3.1 创建一个Activity

3.2 构建UI

Android FloatingActionButton（浮动动作按钮的动画）使用详情相关推荐

最新文章

热门文章

Android FloatingActionButton（浮动动作按钮的动画 ） 使用详情

目录

前言

1. Floating Action Button

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

2.1 显示浮动操作按钮菜单

2.2 隐藏浮动操作按钮菜单

3. 一个新的圆形动画

3.1 创建一个Activity

3.2 构建UI

Android FloatingActionButton（浮动动作按钮的动画 ） 使用详情相关推荐

最新文章

热门文章

Android FloatingActionButton（浮动动作按钮的动画）使用详情

Android FloatingActionButton（浮动动作按钮的动画）使用详情相关推荐