Androiddevise支持库可展开浮动操作button(FAB)菜单

现在,Androiddevise支持库已经出来了,有没有人知道如何实现扩展的Fab菜单,就像Inbox App上的fab?

应该是这样的:

在这里输入图像说明

目前,在devise库中没有提供小部件。 通过使用第三方库, 快速而轻松地完成此任务的唯一方法就是使用第三方库。

你可以很明显的使用devise库来做到这一点,但是这将是一项巨大的工作,需要大量的时间。 我提到了一些有用的库,可以帮助你实现这一点。

  1. 快速浮动button (wangjiegulu)
  2. 浮动动作button (部族)
  3. 浮动行动button (makovkastar)
  4. Android浮动操作button (futuresimple)

我正在使用第四个。

回答这个问题有点迟,但是我没有使用任何库或者为animation编写巨大的xml代码,我得到了一个更好的方法来实现animationFAB菜单。 希望这将有助于未来的人谁需要一个简单的方法来实现这一点。

因此,使用animate()。translationY()函数非常简单,您可以向上或向下设置FAB的animation效果,就像我在下面的代码中所做的那样, 在github中检查完整的代码 。

首先在同一个地方定义你所有的FAB,这样它们重叠在一起,记住顶部FAB应该是你想点击和显示其他。 例如:

<android.support.design.widget.FloatingActionButton android:id="@+id/fab3" android:layout_width="@dimen/standard_45" android:layout_height="@dimen/standard_45" android:layout_gravity="bottom|end" android:layout_margin="@dimen/standard_21" app:srcCompat="@android:drawable/ic_btn_speak_now" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab2" android:layout_width="@dimen/standard_45" android:layout_height="@dimen/standard_45" android:layout_gravity="bottom|end" android:layout_margin="@dimen/standard_21" app:srcCompat="@android:drawable/ic_menu_camera" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab1" android:layout_width="@dimen/standard_45" android:layout_height="@dimen/standard_45" android:layout_gravity="bottom|end" android:layout_margin="@dimen/standard_21" app:srcCompat="@android:drawable/ic_dialog_map" /> <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" app:srcCompat="@android:drawable/ic_dialog_email" /> 

现在在你的java类中定义所有的FAB并执行如下所示的点击:

  FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab1 = (FloatingActionButton) findViewById(R.id.fab1); fab2 = (FloatingActionButton) findViewById(R.id.fab2); fab3 = (FloatingActionButton) findViewById(R.id.fab3); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if(!isFABOpen){ showFABMenu(); }else{ closeFABMenu(); } } }); 

现在使用animation()。translationY()来animation你的FAB,我更喜欢你在DP中使用这个方法的属性,因为只有使用int才会影响显示器与更高分辨率或更低分辨率的兼容性。 如下所示:

  private void showFABMenu(){ isFABOpen=true; fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55)); fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105)); fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155)); } private void closeFABMenu(){ isFABOpen=false; fab1.animate().translationY(0); fab2.animate().translationY(0); fab3.animate().translationY(0); } 

现在在res-> values-> dimens.xml中定义上面提到的维度,如下所示:

  <dimen name="standard_55">55dp</dimen> <dimen name="standard_105">105dp</dimen> <dimen name="standard_155">155dp</dimen> 

希望这个解决scheme能够帮助未来的人们寻找简单的解决scheme。

EDITED

如果你想在FAB上添加标签,那么只需要一个水平的LinearLayout,并将FAB的textview作为标签,如果发现任何问题,就可以对布局进行animation处理,你可以在github中查看我的示例代码,我有handelled所有的向后兼容性该示例代码中的问题。 检查我的示例代码在Github FABMenu

closuresBackpress上的FAB,重写onBackPress(),如下所示:

  @Override public void onBackPressed() { if(!isFABOpen){ this.super.onBackPressed(); }else{ closeFABMenu(); } } 

截图也有FAB的标题,因为我从我的示例应用程序呈现ingithub

在这里输入图像说明

  • 首先在您的Activity布局xml文件中创build菜单布局。 对于例如具有水平方向的线性布局,并且包括用于标签的TextView然后在TextView旁边的浮动操作button。

  • 根据您的需要和编号创build菜单布局。

  • 创build一个基本浮动操作button,并单击该更改菜单布局的可见性。

请检查下面的代码的参考和更多的信息从github我的项目结帐

来自Github的Checkout项目

 <android.support.constraint.ConstraintLayout android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.app.fabmenu.MainActivity"> <android.support.design.widget.FloatingActionButton android:id="@+id/baseFloatingActionButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:clickable="true" android:onClick="@{FabHandler::onBaseFabClick}" android:tint="@android:color/white" app:fabSize="normal" app:layout_constraintBottom_toBottomOf="@+id/activity_main" app:layout_constraintRight_toRightOf="@+id/activity_main" app:srcCompat="@drawable/ic_add_black_24dp" /> <LinearLayout android:id="@+id/shareLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="12dp" android:layout_marginEnd="24dp" android:layout_marginRight="24dp" android:gravity="center_vertical" android:orientation="horizontal" android:visibility="invisible" app:layout_constraintBottom_toTopOf="@+id/createLayout" app:layout_constraintLeft_toLeftOf="@+id/createLayout" app:layout_constraintRight_toRightOf="@+id/activity_main"> <TextView android:id="@+id/shareLabelTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginRight="8dp" android:background="@drawable/shape_fab_label" android:elevation="2dp" android:fontFamily="sans-serif" android:padding="5dip" android:text="Share" android:textColor="@android:color/white" android:typeface="normal" /> <android.support.design.widget.FloatingActionButton android:id="@+id/shareFab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:onClick="@{FabHandler::onShareFabClick}" android:tint="@android:color/white" app:fabSize="mini" app:srcCompat="@drawable/ic_share_black_24dp" /> </LinearLayout> <LinearLayout android:id="@+id/createLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="24dp" android:layout_marginEnd="24dp" android:layout_marginRight="24dp" android:gravity="center_vertical" android:orientation="horizontal" android:visibility="invisible" app:layout_constraintBottom_toTopOf="@+id/baseFloatingActionButton" app:layout_constraintRight_toRightOf="@+id/activity_main"> <TextView android:id="@+id/createLabelTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginRight="8dp" android:background="@drawable/shape_fab_label" android:elevation="2dp" android:fontFamily="sans-serif" android:padding="5dip" android:text="Create" android:textColor="@android:color/white" android:typeface="normal" /> <android.support.design.widget.FloatingActionButton android:id="@+id/createFab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:onClick="@{FabHandler::onCreateFabClick}" android:tint="@android:color/white" app:fabSize="mini" app:srcCompat="@drawable/ic_create_black_24dp" /> </LinearLayout> </android.support.constraint.ConstraintLayout> 

这些是animation –

打开FAB菜单的animation:

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true"> <scale android:duration="300" android:fromXScale="0" android:fromYScale="0" android:interpolator="@android:anim/linear_interpolator" android:pivotX="50%" android:pivotY="50%" android:toXScale="1" android:toYScale="1" /> <alpha android:duration="300" android:fromAlpha="0.0" android:interpolator="@android:anim/accelerate_interpolator" android:toAlpha="1.0" /> </set> 

closuresFAB菜单的animation:

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true"> <scale android:duration="300" android:fromXScale="1" android:fromYScale="1" android:interpolator="@android:anim/linear_interpolator" android:pivotX="50%" android:pivotY="50%" android:toXScale="0.0" android:toYScale="0.0" /> <alpha android:duration="300" android:fromAlpha="1.0" android:interpolator="@android:anim/accelerate_interpolator" android:toAlpha="0.0" /> </set> 

然后在我的活动中,我只是使用上面的animation来显示和隐藏FAB菜单:

显示Fab菜单:

  private void expandFabMenu() { ViewCompat.animate(binding.baseFloatingActionButton).rotation(45.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start(); binding.createLayout.startAnimation(fabOpenAnimation); binding.shareLayout.startAnimation(fabOpenAnimation); binding.createFab.setClickable(true); binding.shareFab.setClickable(true); isFabMenuOpen = true; } 

closuresFab菜单:

 private void collapseFabMenu() { ViewCompat.animate(binding.baseFloatingActionButton).rotation(0.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start(); binding.createLayout.startAnimation(fabCloseAnimation); binding.shareLayout.startAnimation(fabCloseAnimation); binding.createFab.setClickable(false); binding.shareFab.setClickable(false); isFabMenuOpen = false; } 

这里是Activity类 –

 package com.app.fabmenu; import android.databinding.DataBindingUtil; import android.os.Bundle; import android.support.design.widget.Snackbar; import android.support.v4.view.ViewCompat; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.view.animation.OvershootInterpolator; import com.app.fabmenu.databinding.ActivityMainBinding; public class MainActivity extends AppCompatActivity { private ActivityMainBinding binding; private Animation fabOpenAnimation; private Animation fabCloseAnimation; private boolean isFabMenuOpen = false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); binding = DataBindingUtil.setContentView(this, R.layout.activity_main); binding.setFabHandler(new FabHandler()); getAnimations(); } private void getAnimations() { fabOpenAnimation = AnimationUtils.loadAnimation(this, R.anim.fab_open); fabCloseAnimation = AnimationUtils.loadAnimation(this, R.anim.fab_close); } private void expandFabMenu() { ViewCompat.animate(binding.baseFloatingActionButton).rotation(45.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start(); binding.createLayout.startAnimation(fabOpenAnimation); binding.shareLayout.startAnimation(fabOpenAnimation); binding.createFab.setClickable(true); binding.shareFab.setClickable(true); isFabMenuOpen = true; } private void collapseFabMenu() { ViewCompat.animate(binding.baseFloatingActionButton).rotation(0.0F).withLayer().setDuration(300).setInterpolator(new OvershootInterpolator(10.0F)).start(); binding.createLayout.startAnimation(fabCloseAnimation); binding.shareLayout.startAnimation(fabCloseAnimation); binding.createFab.setClickable(false); binding.shareFab.setClickable(false); isFabMenuOpen = false; } public class FabHandler { public void onBaseFabClick(View view) { if (isFabMenuOpen) collapseFabMenu(); else expandFabMenu(); } public void onCreateFabClick(View view) { Snackbar.make(binding.coordinatorLayout, "Create FAB tapped", Snackbar.LENGTH_SHORT).show(); } public void onShareFabClick(View view) { Snackbar.make(binding.coordinatorLayout, "Share FAB tapped", Snackbar.LENGTH_SHORT).show(); } } @Override public void onBackPressed() { if (isFabMenuOpen) collapseFabMenu(); else super.onBackPressed(); } } 

这里是截图

在新的草书字体家庭Android中的浮动操作菜单与标签Textview

在Android的新的Roboto字体系列中带有标签Textview的浮动操作菜单

当我试图创build一个simlet的收件箱浮动行动button我想创build自己的自定义组件。

这将是简单的框架布局与固定的高度(包含扩展菜单)包含FABbutton和3个以上放在FAB下。 当你点击FAB时,只需简单地animation其他button就可以从FAB下翻译出来。

有一些这样做的库(例如https://github.com/futuresimple/android-floating-action-button ),但它总是更有趣,如果你自己创build它:)

您可以使用FloatingActionMenu库或点击这里一步一步的教程。 教程的输出:

在这里输入图像说明

我使用这个库来做到这一点: https : //github.com/futuresimple/android-floating-action-button

很简单,使用;)

在这里输入图像说明

实施Android材料表FAB

Android材料表FAB库,实现浮动操作button,以便从Google的材料devise文档中进行表单转换。 它可以与Android 4.0+(API级别> = 14)上的任何FAB库一起使用。

tellmehow

摇篮

将依赖项(从mavenCentral和jcenter可用)添加到您的build.gradle:

 compile 'com.gordonwong:material-sheet-fab:1.2.1' 

实施FAB:

只要实现了AnimatedFab接口,就可以使用任何FAB库。

 public class Fab extends FloatingActionButton implements AnimatedFab 

初始化MaterialSheetFab:

这可以在你的Activity或Fragment中。

 Fab fab = (Fab) findViewById(R.id.fab); View sheetView = findViewById(R.id.fab_sheet); View overlay = findViewById(R.id.dim_overlay); int sheetColor = getResources().getColor(R.color.fab_sheet_color); int fabColor = getResources().getColor(R.color.fab_color); // Initialize material sheet FAB materialSheetFab = new MaterialSheetFab<>(fab, sheetView, overlay, sheetColor, fabColor); 

TellMeHow.Co上查看完整的这个库教程