Extended Floating Action Button是Android中新引入的带有Material Components库的类。
材料组件随SDK 28或者Android P引入。
它是支持设计库的超集，具有许多新增功能和改进功能。
在本教程中，我们将专注于扩展FAB(浮动操作按钮的扩展)。

扩展的浮动动作按钮

就像它的名字一样，它扩展了浮动动作按钮。
关于功能，扩展FAB在图标旁边包含一个文本，以提供更多信息。

此类是从MaterialButton类而不是FloatingActionButton扩展的。

扩展晶圆厂的宽度比FAB宽。
虽然仅根据您选择的行为可以缩小显示图标。

要使用扩展FAB，我们需要导入google材质组件依赖项，如下所示(在您阅读此版本时，其版本号可能高于以下版本)：

implementation 'com.google.android.material:material:1.1.0-alpha09'

注意：材质组件要求活动具有Theme.MaterialComponents或者子代依赖项。

我们在布局中定义扩展FAB的方法如下：

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:id="@+id/extFab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      android:text="CLEAR"
      app:icon="@android:drawable/ic_delete"

FAB和扩展FAB之间的区别

• 扩展的FAB在图标旁边包含文本。

• 要在扩展工厂中设置图标，我们使用app：icon属性。

• 要在fab小部件中设置图标，我们使用app：srcCompat属性。

以下是扩展FAB中使用的一些属性和方法：

• app：icon
• app：iconSize
• app：iconPadding
• app：iconTint
• app：iconTintMode
• app：strokeColor
• app：strokeWidth
• app：rippleColor

为了显示或者隐藏扩展的FAB，我们使用show()和hide()方法。
setVisibility不适用于Material Components。

为了缩小或者增长扩展的FAB，可以使用shrink()和extend()方法。
为了应用动画，我们可以在方法内部传递一个布尔值。

收缩模式类似于FAB，其中文本标签处于隐藏状态。

当扩展在扩展FAB上开始时，addOnShrinkAnimationListener用于侦听回调。

现在，我们在Android Studio项目中实现扩展的FAB。

代码

下面给出了activity_main.xml布局的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:gravity="center"
  tools:context=".MainActivity">

  <TextView
      android:text="Default"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:id="@+id/extFab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      android:text="CLEAR"
      app:icon="@android:drawable/ic_delete"

  <TextView
      android:text="With Padding.."
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:id="@+id/extFab2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      android:text="CLEAR"
      app:iconPadding="40dp"
      app:icon="@android:drawable/ic_delete"

  <TextView
      android:text="Without Icon"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:id="@+id/extFab3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      android:text="CLEAR" 

  <TextView
      android:text="Without Icon, With Text Style"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:id="@+id/extFab4"
      style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      android:text="CLEAR" 

  <TextView
      android:text="Ripple, Icon Tint, Background Tint, Text Color"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:id="@+id/extFab6"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      app:icon="@android:drawable/ic_delete"
      app:iconTint="@android:color/holo_red_dark"
      app:rippleColor="@android:color/holo_red_light"
      android:textColor="@android:color/holo_red_dark"
      app:backgroundTint="@android:color/holo_orange_light"
      android:text="CLEAR" 

  <TextView
      android:text="Strokes, Icon Size"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" 

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:id="@+id/extFab7"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      app:icon="@android:drawable/ic_delete"
      app:iconTint="@android:color/holo_red_dark"
      app:rippleColor="@android:color/holo_red_light"
      android:textColor="@android:color/holo_red_dark"
      app:strokeColor="@android:color/holo_red_dark"
      app:iconSize="32dp"
      app:strokeWidth="4dp"
      app:backgroundTint="@android:color/white"
      android:text="CLEAR" 

</LinearLayout>

我们介绍了扩展FAB中可以使用的不同属性。
提供两种主要样式：

• Widget.MaterialComponents.ExtendedFloatingActionButton-扩展FAB仅包含文本时应使用，以使其表现得像文本按钮
• Widget.MaterialComponents.ExtendedFloatingActionButton.Icon

MainActivity.java类的代码如下：

package com.theitroad.androidextendedfab;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

  ExtendedFloatingActionButton extendedFAB;
  ExtendedFloatingActionButton extendedFAB2;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      extendedFAB = findViewById(R.id.extFab);
      extendedFAB2 = findViewById(R.id.extFab2);

      extendedFAB2.setOnClickListener(this);
      extendedFAB.setOnClickListener(this);
  }

  @Override
  public void onClick(View view) {

      switch (view.getId())
      {
          case R.id.extFab:
              if(extendedFAB.isExtended())
              {
                  extendedFAB.shrink(true);
              }
              else{
                  extendedFAB.extend(true);
              }
              break;
          case R.id.extFab2:
              if(extendedFAB.isShown())
              extendedFAB.hide(true);
              else {
                  extendedFAB.show(true);
              }
              break;
      }

  }
}