Android设计支持库可扩展的浮动操作按钮（FAB）菜单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android设计支持库可扩展的浮动操作按钮（FAB）菜单相关的知识，希望对你有一定的参考价值。
现在android设计支持库已经发布，没有人知道如何使用它来实现扩展的Fab菜单，例如Inbox App上的fab？
应该看起来像这样：
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9mOUd6Ty5wbmcifQ==” alt =“在此处输入图像描述”>
当前，设计库中没有提供小部件。 快速而轻松地的唯一方法是使用第三方库。
您显然也可以使用设计库来执行此操作，但这将是一项巨大的工作，并且需要很多时间。我已经提到了一些有用的库，可以帮助您实现这一目标。
- [Rapid Floating Button（wangjiegulu）
- [Floating Action Button（氏族）
- Floating Action Button（makovkastar）
- Android Floating Action Button（futuresimple）
我正在使用第四个。
提供了一种更好的方法来实现动画FAB菜单，而无需使用任何库或为动画编写巨大的xml代码。希望这对将来需要一个简单方法来实现此目标的人有所帮助。
因此，仅使用animate().translationY()函数就非常简单，您可以像在下面的代码check complete code in github中那样对任何视图进行上下动画处理。
首先在同一位置定义所有FAB，以便它们彼此重叠，请记住，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();
);
如果您在kotlin中查找相同的代码，则可以从github存储库Animating FAB Menu中签出kotlin代码。
使用animation().translationY()为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>
这都希望该解决方案能够在将来为寻求简单解决方案的人们提供帮助。
编辑
[如果要在FAB上添加标签，然后简单地采用水平LinearLayout并将FAB以textview作为标签，并在布局上设置动画，如果发现这样做有任何问题，您可以在github中检查我的示例代码，我已经处理了所有该示例代码中的向后兼容性问题。 check my sample code for FABMenu in Github
要在Backpress上关闭FAB，请覆盖onBackPress（），如下所示：
@Override
public void onBackPressed()
if(!isFABOpen)
this.super.onBackPressed();
else
closeFABMenu();
该屏幕截图也带有FAB的标题，因为我是从sample app present ingithub中摘录的
首先在您的Activity布局xml文件中创建菜单布局。例如一个水平方向的线性布局，并包含用于标签，然后是TextView旁边的浮动操作按钮。
根据您的需要和编号创建菜单布局。
创建基本浮动操作按钮及其上的单击该按钮可更改菜单布局的可见性。
[请检查以下代码以供参考，有关更多信息，请从github检出我的项目
<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设计支持库可扩展的浮动操作按钮（FAB）菜单的主要内容，如果未能解决你的问题，请参考以下文章
Android 支持设计浮动操作按钮高度对于白色以外的颜色不可见
我正在使用框架布局，在其中我想要一个列表视图和一个浮动操作按钮，但列表视图没有扩展