带有示例的Android中的浮动操作按钮(FAB)

浮动动作按钮与普通按钮有些不同。浮动操作按钮是在应用程序的用户界面中实现的，用于用户的主要操作(升级操作)，而浮动操作按钮下的操作则由开发人员确定优先级。例如，在现有列表中添加项目之类的操作。因此，在本文中，已经展示了如何实现“浮动操作按钮”(FAB)，并且还通过一条简单的Toast消息来处理FAB下的按钮。请注意，我们将使用Java语言来实现该项目。

浮动按钮的类型

Android上主要有四种类型的浮动操作按钮。

• 常规/常规浮动操作按钮
• 迷你浮动动作按钮
• 扩展的浮动动作按钮
• 主题浮动动作按钮

在本文中，我们将以Android中的示例示例讨论“普通/常规浮动动作按钮”和“迷你浮动动作按钮” 。

常规/常规浮动操作按钮

常规FAB是未扩展且具有常规大小的FAB。下面的示例显示带有加号图标的常规FAB。

创建常规/常规FAB的步骤

步骤1：创建一个新项目

要在Android Studio中创建新项目，请参阅如何在Android Studio中创建/启动新项目。请注意，选择Java作为编程语言。

步骤2：在应用程序级别Gradle文件上添加依赖项。

• 在这里，我们使用由Google Material Design Team设计和开发的Floating action按钮。
• 将依赖项添加到build.gradle(app)文件中，如下所示：

implementation ‘com.google.android.material:material:1.3.0-alpha02’

• 确保将依赖项添加到应用程序级别的Gradle文件中。添加依赖项后，您需要单击Android Studio IDE右上角显示的“立即同步”按钮。
• 当用户单击立即同步按钮时，请确保您已连接到网络，以便它可以下载所需的文件。
• 如果您无法获得上述步骤，请参考下图：

步骤3：将FAB图标添加到Drawble文件

• 为了演示起见，将在Drawable文件夹中导入3个图标，一个可以导入他/她选择的图标。可以通过右键单击drawable文件夹-> New-> Vector Asset来做到这一点。请参考下图导入矢量图标。

• 现在选择您的矢量图标：

• 现在打开activity_main.xml并添加浮动操作按钮。

步骤4：使用activity_main.xml文件

• 在activity_main.xml文件中，添加浮动操作按钮并调用以下代码。现在，调用普通的FAB按钮。半径为56dp。
• 我们已将子FAB按钮链接到父FAB按钮，以便它们位于单键行中。在代码内部添加了注释，以更详细地了解代码。

输出UI生成为：

步骤5：使用MainActivity。 Java文件

• 现在，使用setOnClickListener()方法处理所有这些FAB按钮，您可能会在Button |安卓。
• 现在在MainActivity中。 Java调用以下代码来处理它们。阅读代码下的注释以更好地理解。在此代码中，显示了使用onClickListener可以看到子FAB的情况。在代码内部添加了注释，以更详细地了解代码。

Java

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
  
public class MainActivity extends AppCompatActivity {
  
    // Make sure to use the FloatingActionButton
    // for all the FABs
    FloatingActionButton mAddFab, mAddAlarmFab, mAddPersonFab;
  
    // These are taken to make visible and invisible along
    // with FABs
    TextView addAlarmActionText, addPersonActionText;
  
    // to check whether sub FAB buttons are visible or not.
    Boolean isAllFabsVisible;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Register all the FABs with their IDs
        // This FAB button is the Parent
        mAddFab = findViewById(R.id.add_fab);
        // FAB button
        mAddAlarmFab = findViewById(R.id.add_alarm_fab);
        mAddPersonFab = findViewById(R.id.add_person_fab);
  
        // Also register the action name text, of all the FABs.
        addAlarmActionText = findViewById(R.id.add_alarm_action_text);
        addPersonActionText = findViewById(R.id.add_person_action_text);
  
        // Now set all the FABs and all the action name
        // texts as GONE
        mAddAlarmFab.setVisibility(View.GONE);
        mAddPersonFab.setVisibility(View.GONE);
        addAlarmActionText.setVisibility(View.GONE);
        addPersonActionText.setVisibility(View.GONE);
  
        // make the boolean variable as false, as all the
        // action name texts and all the sub FABs are invisible
        isAllFabsVisible = false;
  
        // We will make all the FABs and action name texts
        // visible only when Parent FAB button is clicked So
        // we have to handle the Parent FAB button first, by
        // using setOnClickListener you can see below
        mAddFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        if (!isAllFabsVisible) {
  
                            // when isAllFabsVisible becomes
                            // true make all the action name
                            // texts and FABs VISIBLE.
                            mAddAlarmFab.show();
                            mAddPersonFab.show();
                            addAlarmActionText.setVisibility(View.VISIBLE);
                            addPersonActionText.setVisibility(View.VISIBLE);
  
                            // make the boolean variable true as
                            // we have set the sub FABs
                            // visibility to GONE
                            isAllFabsVisible = true;
                        } else {
  
                            // when isAllFabsVisible becomes
                            // true make all the action name
                            // texts and FABs GONE.
                            mAddAlarmFab.hide();
                            mAddPersonFab.hide();
                            addAlarmActionText.setVisibility(View.GONE);
                            addPersonActionText.setVisibility(View.GONE);
  
                            // make the boolean variable false
                            // as we have set the sub FABs
                            // visibility to GONE
                            isAllFabsVisible = false;
                        }
                    }
                });
  
        // below is the sample action to handle add person
        // FAB. Here it shows simple Toast msg. The Toast
        // will be shown only when they are visible and only
        // when user clicks on them
        mAddPersonFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Person Added", Toast.LENGTH_SHORT).show();
                    }
                });
  
        // below is the sample action to handle add alarm
        // FAB. Here it shows simple Toast msg The Toast
        // will be shown only when they are visible and only
        // when user clicks on them
        mAddAlarmFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Alarm Added", Toast.LENGTH_SHORT).show();
                    }
                });
    }
}

输出：在模拟器上运行

迷你浮动动作按钮

微型FAB用于较小的屏幕。迷你FAB还可用于创建与其他屏幕元素的视觉连续性。以下示例显示带有加号图标的迷你FAB。

创建一个迷你FAB

现在调用迷你FAB按钮。半径为40dp。其他所有东西都重命名相同。只需更改一个属性即可：

app:fabSize=”mini”

进行更改后，输出UI如下所示：

Note: The FAB button can also be made auto resizable by changing the fabSize attribute to auto. This will make FAB size automatically mini and normal according to the window size.

app:fabsize=”auto”