获得了一种更好的方法来实现动画 FAB 菜单,而无需使用任何库或为动画编写大量 xml 代码。希望这对将来需要简单方法来实现这一点的人有所帮助。
只是使用animate().translationY()
函数,您可以向上或向下对任何视图进行动画处理,就像我在下面的代码中所做的那样,检查github上的完整代码 https://github.com/ajaydewari/FloatingActionButtonMenu。如果您正在 kotlin 中寻找相同的代码,您可以查看 kotlin 代码存储库动画 FAB 菜单 https://github.com/ajaydewari/Animating-FAB-Menu.
首先将所有 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();
}
}
});
Use the 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>
希望这个解决方案能够帮助那些正在寻找简单解决方案的人们。
EDITED
如果你想在 FAB 上添加标签,那么只需采用水平 LinearLayout 并将带有 textview 的 FAB 作为标签,并为布局设置动画(如果发现这样做有任何问题),你可以在 github 中查看我的示例代码,我已经处理了所有向后兼容性该示例代码中存在问题。检查我在 Github 中的 FABMenu 示例代码 https://github.com/ajaydewari/FloatingActionButtonMenu
要在按下 Back Press 时关闭风扇,请重写 onBackPressed() ,如下所示:
@Override
public void onBackPressed() {
if(!isFABOpen){
this.super.onBackPressed();
}else{
closeFABMenu();
}
}
屏幕截图的标题也带有 FAB,因为我取自我的github 中存在示例应用程序 https://github.com/ajaydewari/FloatingActionButtonMenu