Question

我需要一个带有水平方向的浮动操作菜单，我发现这个library 但是它与listview有关，而不是我想要的，我测试了'com.github.clans：fab：1.6.4'它真的很好，但总是没有水平方向。

有任何想法要找出来吗？

Answer 1

感谢@Mayank的代码和想法，对于每个有相同问题的人，这个代码：

     <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipChildren="false"
            android:clipToPadding="false"
            android:gravity="center"
            android:padding="6dp"

            >
            <android.support.design.widget.CoordinatorLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/parentlayout"

                android:layout_gravity="left"
                android:fitsSystemWindows="true"
                android:clipChildren="false"
                android:clipToPadding="false"
                >
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left"
                    android:layout_marginRight="120dp"

                    app:backgroundTint="@color/TealDark"
                    app:elevation="6dp"
                    app:fabSize="mini"
                    app:pressedTranslationZ="-12dp"
                    android:src="@drawable/fab_add"
                    />
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginRight="90dp"
                    android:visibility="invisible"

                    app:elevation="6dp"
                    app:fabSize="mini"
                    app:backgroundTint="@color/TealDark"
                    app:pressedTranslationZ="-12dp"
                    android:src="@drawable/file_image" />
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="8dp"
                    android:layout_gravity="bottom"
                    android:visibility="invisible"
                    app:elevation="6dp"
                    app:fabSize="mini"
                    app:backgroundTint="@color/TealDark"
                    app:pressedTranslationZ="-12dp"

                    android:src="@drawable/filevideo" />
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="-75dp"
                    android:layout_gravity="bottom"
                    android:visibility="invisible"
                    app:elevation="6dp"
                    app:fabSize="mini"
                    app:backgroundTint="@color/TealDark"
                    app:pressedTranslationZ="-12dp"

                    android:src="@drawable/audiobook" />
                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="-158dp"
                    android:layout_gravity="bottom"
                    android:visibility="invisible"
                    app:elevation="6dp"
                    app:fabSize="mini"
                    app:backgroundTint="@color/TealDark"
                    app:pressedTranslationZ="-12dp"

                    android:src="@drawable/file" />
            </android.support.design.widget.CoordinatorLayout>
        </LinearLayout>

代码java我使用上面相同的代码：

final FloatingActionButton fab,fab1,fab2, fab3, fab4;
                fab = (FloatingActionButton)conformity_child.findViewById(R.id.fab);
                fab1 = (FloatingActionButton)conformity_child.findViewById(R.id.fab1);
                fab2 = (FloatingActionButton)conformity_child.findViewById(R.id.fab2);
                fab3 = (FloatingActionButton)conformity_child.findViewById(R.id.fab3);
                fab4 = (FloatingActionButton)conformity_child.findViewById(R.id.fab4);
                fab.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if(isFabOpen){
                            fab.startAnimation(rotate_backward);
                            fab1.startAnimation(fab_close);
                            fab2.startAnimation(fab_close);
                            fab3.startAnimation(fab_close);
                            fab4.startAnimation(fab_close);
                            fab1.setClickable(false);
                            fab2.setClickable(false);
                            fab3.setClickable(false);
                            fab4.setClickable(false);
                            isFabOpen = false;

                        } else {
                            fab.startAnimation(rotate_forward);
                            fab1.startAnimation(fab_open);
                            fab2.startAnimation(fab_open);
                            fab3.startAnimation(fab_open);
                            fab4.startAnimation(fab_open);
                            fab1.setClickable(true);
                            fab2.setClickable(true);
                            fab3.setClickable(true);
                            fab4.setClickable(true);
                            isFabOpen = true;
                        }
                    }
                });

动画：fab_close

<?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:toXScale="0.8"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="0.8" />
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.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.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>

Answer 2

没有任何库的最简单方法是设置一个FAB可见，另外两个不可见，并在第一个FAB点击时使两个可见。添加一些代码片段，因为我使用了这种类型的FAB样式，而且你可以将动画添加到图标中，这样可以让它感觉效果很好。

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/parentlayout"
android:background="#2a2a2a"
android:fitsSystemWindows="true"
tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:theme="@style/AppTheme.AppBarOverlay">

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_marginRight="160dp"
    android:visibility="invisible"
    android:layout_marginBottom="16dp"
    app:backgroundTint="@color/colorPrimary"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    android:src="@android:drawable/ic_menu_share" />
<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_marginRight="90dp"
    android:visibility="invisible"
    android:layout_marginBottom="16dp"
    app:elevation="6dp"
    app:backgroundTint="@color/colorPrimary"
    app:pressedTranslationZ="12dp"
    android:src="@android:drawable/ic_menu_search" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:elevation="6dp"
    app:backgroundTint="@color/colorPrimary"
    app:pressedTranslationZ="12dp"
    android:layout_margin="16dp"
    android:src="@android:drawable/ic_input_add" />

活动中的用法将是这样的。

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Boolean isFabOpen = false;
private FloatingActionButton fab,fab1,fab2;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    fab = (FloatingActionButton)findViewById(R.id.fab);
    fab1 = (FloatingActionButton)findViewById(R.id.fab1);
    fab2 = (FloatingActionButton)findViewById(R.id.fab2);
    fab.setOnClickListener(this);
    fab1.setOnClickListener(this);
    fab2.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    int id = v.getId();
    switch (id){
        case R.id.fab:

            animateFAB();
            break;
        case R.id.fab1:
            break;
        case R.id.fab2:


            break;
    }
}
public void animateFAB(){

    if(isFabOpen){
       /* fab.startAnimation(rotate_backward);
        fab1.startAnimation(fab_close);
        fab2.startAnimation(fab_close);*/
        fab1.setClickable(false);
        fab2.setClickable(false);
        isFabOpen = false;

    } else {
       /* fab.startAnimation(rotate_forward);
        fab1.startAnimation(fab_open);
        fab2.startAnimation(fab_open);*/
        fab1.setClickable(true);
        fab2.setClickable(true);
        isFabOpen = true;
    }
}}

浮动操作菜单的水平方向

2 个答案: