Android设计支持库可扩展浮动操作按钮菜单吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (14)

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

应该看起来像这样:

提问于
用户回答回答于

目前,设计库中没有提供小部件。通过使用第三方库,快速简便地完成此操作的唯一方法就是使用第三方库。

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

  1. Rapid Floating Button (wangjiegulu)
  2. 浮动动作按钮(部族)
  3. 浮动动作按钮(makovkastar)
  4. Android浮动操作按钮(futuresimple)
用户回答回答于

你可以使用animate()。translationY()函数非常简单,你还可以向上或向下动画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();
            }
        }
    });

你只有使用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>

希望这个解决方案能够帮助未来的人们,他们正在寻找简单的解决方案:

EDITED

要关闭Backpress上的FAB,请覆盖onBackPress(),如下所示:

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

你还可以从我的示例应用程序呈现的ingithub中获取它:

扫码关注云+社区