带有多个操作的浮动操作按钮

Question

我正在使用设计支持库（com.android.support:design:22.2.0）中的FloatingActionsButton（FAB）。

我的应用程序有两个主要功能，第一个是每隔X分钟同步数据（启动服务并每隔X分钟更新数据），第二个是同步一次（从服务器请求数据并更新UI）。

我想要使用FAB来实现这些主要功能，并想知道如何实现：

第一种方法是使用一个FAB，当单击按钮时，将显示两个新的FAB，每个功能一个。

第二种方法是在UI中始终显示两个FAB，其中同步每X分钟的FAB比更新一次的FAB更大。

我对第一种方法很感兴趣，想知道如何实现这种行为？我找过了，但这个视图很新，我找不到例子。

谢谢。

- galvan

---

根据 Material Design 规范，不能将多个 FAB 并排显示，但是一个具有多个按钮的扩展 FAB 菜单似乎是符合规范的。 - hungryghost

这是如何操作的： https://material-ui.com/components/speed-dial/ - Azmeer

Answer 1

我正在使用这个 GitHub 库，它非常简单并解决了我的问题：

https://github.com/Clans/FloatingActionButton

在 build.gradle 中添加依赖项：

dependencies {
    compile 'com.github.clans:fab:1.6.4'
}

将此添加到您的xml开头：

xmlns:fab="http://schemas.android.com/apk/res-auto"

现在只需要添加您的按钮，例如：

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/floatingMenu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    fab:menu_labels_ellipsize="end"
    fab:menu_labels_singleLine="true"
    fab:menu_fab_label="Cancel"
    fab:menu_backgroundColor="#ccffffff"
    fab:menu_animationDelayPerItem="0"
    fab:menu_colorNormal="#00C29F"
    fab:menu_colorPressed="#00C29F"
    fab:menu_colorRipple="#00C29F"
    android:padding="8dp">

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fabEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_edit_white"
        fab:fab_size="mini"
        fab:fab_label="Edit Category"/>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fabAddProduct"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fab_add"
        fab:fab_size="mini"
        fab:fab_label="Add product"/>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fabAddSubcategory"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fab_add"
        fab:fab_size="mini"
        fab:fab_label="Subcategory"/>

</com.github.clans.fab.FloatingActionMenu>

- Duan Bressan

---

该项目目前似乎已被放弃。 - alexandre-rousseau

Answer 2

答案的项目已被弃用，不再维护。在这种情况下，本文中的实现可能会有所帮助 - 如何在Android中添加扩展浮动操作按钮|Android Studio|Java

步骤1

将此实现添加到您的app/build.gradle中：

implementation 'com.google.android.material:material:1.4.0';

步骤二

在您的布局xml中定义主要FAB和操作：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/purple_200"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        android:layout_marginBottom="16dp"
        android:contentDescription="@string/actions"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/purple_500"
        android:layout_marginBottom="8dp"
        app:fabSize="mini"
        app:tint="@color/white"
        app:layout_constraintBottom_toTopOf="@id/fab"
        app:layout_constraintEnd_toEndOf="@id/fab"
        app:srcCompat="@drawable/ic_add"
        android:contentDescription="@string/app_name" />

    <TextView
        android:id="@+id/add_fab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="@string/draw_image"
        app:layout_constraintBottom_toBottomOf="@id/add_fab"
        app:layout_constraintEnd_toStartOf="@id/add_fab"
        app:layout_constraintTop_toTopOf="@id/add_fab" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/select_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/purple_500"
        app:fabSize="mini"
        app:tint="@color/white"
        app:layout_constraintBottom_toTopOf="@id/add_fab"
        app:layout_constraintEnd_toEndOf="@id/add_fab"
        app:layout_constraintStart_toStartOf="@id/add_fab"
        app:srcCompat="@drawable/ic_select"
        android:contentDescription="@string/app_name" />

    <TextView
        android:id="@+id/select_fab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="@string/select_items"
        app:layout_constraintBottom_toBottomOf="@id/select_fab"
        app:layout_constraintEnd_toStartOf="@id/select_fab"
        app:layout_constraintTop_toTopOf="@id/select_fab" />

</androidx.constraintlayout.widget.ConstraintLayout>

步骤三

添加一些代码来控制按钮的状态：

package com.my.app.activities;

import android.os.Bundle;

import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.paint.app.R;

import android.view.View;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton menuFab;
    FloatingActionButton addFab;
    FloatingActionButton selectFab;
    FloatingActionButton policyFab;
    FloatingActionButton shareFab;

    TextView addText;
    TextView selectText;
    TextView policyText;
    TextView shareText;

    boolean isOpen = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        menuFab = findViewById(R.id.fab);

        addFab = findViewById(R.id.add_fab);
        addText = findViewById(R.id.add_fab_text);

        selectFab = findViewById(R.id.select_fab);
        selectText = findViewById(R.id.select_fab_text);

        hideActions();

        menuFab.setOnClickListener(view -> {
            if (!isOpen) {
                showActions();
            } else {
                hideActions();
            }
            isOpen = !isOpen;
        });

        addFab.setOnClickListener(onAddClickListener);
        selectFab.setOnClickListener(onSelectClickListener);
    }

    private void showActions() {
        addFab.show();
        selectFab.show();
        addText.setVisibility(View.VISIBLE);
        selectText.setVisibility(View.VISIBLE);
    }

    private void hideActions() {
        addFab.hide();
        selectFab.hide();
        addText.setVisibility(View.GONE);
        selectText.setVisibility(View.GONE);
    }


}

- wowandy