android - FloatingActionButton 子菜单

Question

我想实现类似 pushbullet 的 FAB 子菜单。但我不知道如何在片段和活动中点击 FAB。

这是 pushbullet FAB 的样子：

现在我正在做的是将 FAB 菜单布局视为一个片段。当我点击工厂时，只需启动片段。但是，FAB 菜单片段膨胀后，我无法单击 FAB。因为 FAB 菜单片段会覆盖 FAB 按钮。

任何人都知道 pushbullet 是如何制作它的 FAB 菜单的？？？

Answer 1

首先将此添加到您的依赖项编译中'com.getbase:floatingactionbutton:1.10.1'

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:25.3.1'

    compile 'com.getbase:floatingactionbutton:1.10.1'

}

然后将以下代码粘贴到您的Fragment：

public class YourFragment extends BaseFragment  {

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View v = inflater.inflate(R.layout.fragment_home, null, false);
        getActivity().setTitle(getResources().getString(R.string.app_name));

        v.findViewById(R.id.pink_icon).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            }
        });

        FloatingActionButton button = (FloatingActionButton) v.findViewById(R.id.setter);
        button.setSize(FloatingActionButton.SIZE_MINI);
        button.setColorNormalResId(R.color.pink);
        button.setColorPressedResId(R.color.pink_pressed);
        button.setIcon(R.drawable.bubble_in);
        button.setStrokeVisible(false);

        final View actionB = v.findViewById(R.id.action_b);

        FloatingActionButton actionC = new FloatingActionButton(baseActivity);
        actionC.setTitle("Hide/Show Action above");
        actionC.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                actionB.setVisibility(actionB.getVisibility() == View.GONE ? View.VISIBLE : View.GONE);
            }
        });

        final FloatingActionsMenu menuMultipleActions = (FloatingActionsMenu) v.findViewById(R.id.multiple_actions);
        menuMultipleActions.addButton(actionC);

        final FloatingActionButton removeAction = (FloatingActionButton) v.findViewById(R.id.button_remove);
        removeAction.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ((FloatingActionsMenu) v.findViewById(R.id.multiple_actions_down)).removeButton(removeAction);
            }
        });

        ShapeDrawable drawable = new ShapeDrawable(new OvalShape());
        drawable.getPaint().setColor(getResources().getColor(R.color.white));
        ((FloatingActionButton) v.findViewById(R.id.setter_drawable)).setIconDrawable(drawable);

        final FloatingActionButton actionA = (FloatingActionButton) v.findViewById(R.id.action_a);
        actionA.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                actionA.setTitle("Action A clicked");
            }
        });

        // Test that FAMs containing FABs with visibility GONE do not cause crashes
        v.findViewById(R.id.button_gone).setVisibility(View.GONE);

        final FloatingActionButton actionEnable = (FloatingActionButton) v.findViewById(R.id.action_enable);
        actionEnable.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                menuMultipleActions.setEnabled(!menuMultipleActions.isEnabled());
            }
        });

        FloatingActionsMenu rightLabels = (FloatingActionsMenu) v.findViewById(R.id.right_labels);
        FloatingActionButton addedOnce = new FloatingActionButton(baseActivity);
        addedOnce.setTitle("Added once");
        rightLabels.addButton(addedOnce);

        FloatingActionButton addedTwice = new FloatingActionButton(baseActivity);
        addedTwice.setTitle("Added twice");
        rightLabels.addButton(addedTwice);
        rightLabels.removeButton(addedTwice);
        rightLabels.addButton(addedTwice);


        return v;

    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }

}

BaseFragment应该是：

public class BaseFragment extends Fragment implements View.OnClickListener  {
    protected BaseActivity baseActivity;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        baseActivity = (BaseActivity) context;
baseActivity.getApplication();

    }

    @Override
    public void onDetach() {
        baseActivity = null;

        super.onDetach();
    }

your_layout.xml 的一个例子是：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:background="@color/background"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/pink_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_icon="@drawable/facebook"
        fab:fab_colorNormal="@color/colorPrimaryDark"
        fab:fab_colorPressed="@color/colorPrimary"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/pink_icon"
        android:text="Text below button"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="48dp"/>

    <com.getbase.floatingactionbutton.AddFloatingActionButton
        android:id="@+id/semi_transparent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/pink_icon"
        fab:fab_plusIconColor="@color/white"
        fab:fab_colorNormal="@color/blue_semi_transparent"
        fab:fab_colorPressed="@color/blue_semi_transparent_pressed"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"/>

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/setter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/semi_transparent"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"/>

    <com.getbase.floatingactionbutton.AddFloatingActionButton
        android:id="@+id/normal_plus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        fab:fab_plusIconColor="@color/half_black"
        fab:fab_colorNormal="@color/white"
        fab:fab_colorPressed="@color/white_pressed"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"/>

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/right_labels"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_above="@id/normal_plus"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_addButtonSize="mini"
        fab:fab_labelsPosition="right">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Label on the right"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_size="mini"
            fab:fab_title="Another one on the right"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action with a very long name that won\'t fit on the screen"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonSize="mini"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_expandDirection="down"
        android:layout_marginTop="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_size="mini"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/button_remove"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_title="Click to remove"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/button_gone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_enable"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Set bottom menu enabled/disabled"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/multiple_actions_down"
        android:layout_toStartOf="@+id/multiple_actions_down"
        android:layout_alignParentTop="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonSize="mini"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_addButtonStrokeVisible="false"
        fab:fab_expandDirection="left"
        android:layout_marginTop="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_size="mini"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            fab:fab_colorNormal="@color/white"
            fab:fab_colorPressed="@color/white_pressed"
            fab:fab_size="mini"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/setter_drawable"
        android:layout_above="@id/setter"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>