Question

我想在另一个浮动操作菜单中添加一个浮动操作菜单。我希望我的父浮动操作菜单从下到上，子浮动操作菜单从右到左。我尝试使用库但没有库支持支持这个功能。任何人都可以帮助我。

下面是我想要获得的图像

Answer 1

没有库支持此功能，因为它违反了Material Design Guidelines。

不要在浮动操作按钮操作中放置溢出菜单。从初始屏幕最多应该有两次点击才能到达预定目的地。

我建议您重新考虑设计，请记住浮动操作按钮必须转换为相关操作。您可以移动它，以便有两个浮动操作按钮，或将辅助菜单移动到溢出菜单。

Answer 2

如果您不想使用库，则可以使用自定义尝试此操作布局和

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="90dp"
    android:layout_marginEnd="8dp"
    android:orientation="horizontal">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/white"
        app:cardCornerRadius="@dimen/cardCornerRadius"
        app:cardElevation="@dimen/cardElevation"
        app:cardUseCompatPadding="true" >
        <TextView
            android:id="@+id/fab1_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Bookmark category"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textStyle="bold"
            android:textColor="@color/black_dark"
            android:paddingRight="@dimen/cardview_horizontal_padding"
            android:paddingLeft="@dimen/cardview_horizontal_padding"
            android:paddingBottom="@dimen/cardview_vertical_padding"
            android:paddingTop="@dimen/cardview_vertical_padding" />
    </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        app:srcCompat="@drawable/ic_star_border_black_24dp"
        app:backgroundTint="@color/colorPrimaryDark"
        app:fabSize="mini" />

</LinearLayout>

<LinearLayout
    android:id="@+id/fab2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="140dp"
    android:orientation="horizontal">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/white"
        app:cardCornerRadius="@dimen/cardCornerRadius"
        app:cardElevation="@dimen/cardElevation"
        app:cardUseCompatPadding="true" >

        <TextView
            android:id="@+id/fab2_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Add post "
            android:textColor="@color/black_dark"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textStyle="bold"
            android:paddingRight="@dimen/cardview_horizontal_padding"
            android:paddingLeft="@dimen/cardview_horizontal_padding"
            android:paddingBottom="@dimen/cardview_vertical_padding"
            android:paddingTop="@dimen/cardview_vertical_padding" />

    </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        app:srcCompat="@drawable/ic_add_white_24dp"
        app:backgroundTint="@color/blue"
        app:fabSize="mini" />

</LinearLayout>



<LinearLayout
    android:id="@+id/layoutFabSettings"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:layout_gravity="bottom|end"
    android:layout_marginBottom="16dp"
    android:orientation="horizontal">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabSetting"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:elevation="0dp"
        app:srcCompat="@drawable/ic_close_black_24dp"
        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal" />

</LinearLayout>

在您的班级文件中，您可以使用

     private FloatingActionButton fabSettings;
        private LinearLayout fab1;
        private LinearLayout fab2;

 fabSettings = this.findViewById(R.id.fabSetting);
    fab1 = this.findViewById(R.id.fab1);
    fab2 = this.findViewById(R.id.fab2);

    fab1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    });

    fab2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    });

    //When main Fab (Settings) is clicked, it expands if not expanded already.
    //Collapses if main FAB was open already.
    //This gives FAB (Settings) open/close behavior
    fabSettings.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (fabExpanded == true){
                closeSubMenusFab();
            } else {
                openSubMenusFab();
            }
        }
    });

    //Only main FAB is visible in the beginning
    closeSubMenusFab();

 //closes FAB submenus
    private void closeSubMenusFab(){
        fab1.setVisibility(View.INVISIBLE);
        fab2.setVisibility(View.INVISIBLE);

        fabSettings.setImageResource(R.drawable.ic_star_border_black_24dp);
        fabExpanded = false;
    }

    //Opens FAB submenus
    private void openSubMenusFab(){
        fab1.setVisibility(View.VISIBLE);
        fab2.setVisibility(View.VISIBLE);

        //Change settings icon to 'X' icon
        fabSettings.setImageResource(R.drawable.ic_close_black_24dp);
        fabExpanded = true;
    }

看起来像这样

Answer 3

Tha布局文件是

<android.support.design.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".FloatingActivity">




<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginBottom="90dp"
    android:layout_marginRight="70dp"
    android:visibility="invisible"
    app:backgroundTint="@color/colorAccent"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:srcCompat="@android:drawable/ic_menu_camera" />


<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginBottom="90dp"
    android:layout_marginRight="@dimen/fab_margin"
    android:visibility="invisible"
    app:backgroundTint="@color/colorAccent"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"

    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:src="@android:drawable/ic_dialog_email"
    app:backgroundTint="@color/colorAccent"
    app:elevation="6dp"
    android:layout_margin="@dimen/fab_margin"
    app:pressedTranslationZ="12dp" />
 </android.support.design.widget.CoordinatorLayout>

在您的活动中，

  private FloatingActionButton fab, fab1,  fab3;
private boolean isFABOpen = false;
private Animation fab_open, fab_close, rotate_forward, rotate_backward;
private boolean isfab3Open = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_floating);
    fab = findViewById(R.id.fab);
    fab1 = findViewById(R.id.fab1);
    fab3 = findViewById(R.id.fab3);
    fab_open = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_open);
    fab_close = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_close);
    rotate_forward = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate_forward);
    rotate_backward = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate_backward);

    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            animateFAB();
        }
       });
       fab1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            animateFab3();
        }
    });
   }

     private void animateFab3() {
       if (isfab3Open) {
        //  fab1.startAnimation(rotate_backward);
        fab3.startAnimation(fab_close);
        fab3.setClickable(false);
        isfab3Open = false;
      } else {
     //   fab1.startAnimation(rotate_forward);
        fab3.startAnimation(fab_open);
        fab3.setClickable(true);
        isfab3Open = true;
    }
   }

     public void animateFAB() {

    if (isFABOpen) {

        fab.startAnimation(rotate_backward);
        fab1.startAnimation(fab_close);
        fab1.setClickable(false);
        isFABOpen = false;

    } else {

        fab.startAnimation(rotate_forward);
        fab1.startAnimation(fab_open);
        fab1.setClickable(true);
        isFABOpen = true;

    }    }   }

动画是， fab_close.xml

 <?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.8"
    android:fromYScale="0.8"
    android:interpolator="@android:anim/linear_interpolator"
    android:toXScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toYScale="0.0" />
<alpha android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="300"/>
  </set>

fab_open

 <?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.0"
    android:fromYScale="0.0"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0.8"
    android:toYScale="0.8" />
<alpha
    android:duration="300"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" />
 </set>

rotate_backward

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<rotate android:fromDegrees="45"
    android:toDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="300"
    android:interpolator="@android:anim/linear_interpolator"/>
</set>

rotate_forward

  <?xml version="1.0" encoding="utf-8"?>
  <set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<rotate android:fromDegrees="0"
    android:toDegrees="45"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="300"
    android:interpolator="@android:anim/linear_interpolator"/>
    </set>

另一个浮动操作菜单中的浮动操作菜单

3 个答案: