android浮动按钮
Extended Floating Action Button is the newly introduced class with Material Components library in Android.
Material Components is introduced with SDK 28 or Android P. It’s a superset of Support Design Library with lots of new additions and improvements. In this tutorial, we’ll be focusing on Extended FAB an extension of Floating Action Button.
Extended Floating Action Button是Android中新引入的带有Material Components库的类。
材料组件随SDK 28或Android P引入。它是支持设计库的超集，其中包含许多新增功能和改进功能。 在本教程中，我们将集中于Extended FAB，它是Floating Action Button的扩展。
扩展的浮动动作按钮 (Extended Floating Action Button)
Much like its name, it extends the floating action button.
Talking about functionality, Extended FAB contains a text alongside the icon to provide more info.
就像它的名字一样，它扩展了浮动动作按钮。
关于功能，扩展FAB在图标旁边包含一个文本，以提供更多信息。
This class is extended from the MaterialButton class and not the FloatingActionButton.
此类是从MaterialButton类而不是FloatingActionButton扩展的。
An extended fab is wider in width than a FAB. Though it can be shrunk to show icon only depending on the behavior you choose.
扩展晶圆厂的宽度比FAB宽。 尽管仅根据您选择的行为可以缩小显示图标。
To use an Extended FAB we need to import the google material components dependency as shown below (the version number might be higher than the one below when you are reading this):
要使用扩展FAB，我们需要导入google材质组件依赖项，如下所示（当您阅读此版本时，其版本号可能高于以下版本）：
implementation 'com.google.android.material:material:1.1.0-alpha09'
Note: Material components require the activity to have a Theme.MaterialComponents or descendants dependency.
注意：材质组件要求活动具有Theme.MaterialComponents或后代依赖项。
Here’s how we define an extended FAB in our layout:
这是我们在布局中定义扩展FAB的方法：
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButtonandroid: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之间的区别 (Difference between FAB and Extended FAB)
An extended FAB contains text alongside the icon.扩展的FAB在图标旁边包含文本。 To set an icon in the extended fab we use theapp:iconattribute.要在扩展fab中设置图标，我们使用app:icon属性。 To set an icon in the fab widget we use theapp:srcCompatattribute.要在fab小部件中设置图标，我们使用app:srcCompat属性。Following are some of the attributes and methods used in Extended FAB:
以下是扩展FAB中使用的一些属性和方法：
app:iconapp:iconapp:iconSizeapp:iconSizeapp:iconPaddingapp:iconPaddingapp:iconTintapp:iconTintapp:iconTintModeapp:iconTintModeapp:strokeColorapp:strokeColorapp:strokeWidthapp:strokeWidthapp:rippleColorapp:rippleColor
To show or hide the extended FAB, we useshow()andhide()methods.setVisibilitydoes not work with Material Components.
为了显示或隐藏扩展的FAB，我们使用show()和hide()方法。setVisibility不适用于材料组件。
To shrink or grow the extended FAB,shrink()andextend()methods can be used. In order to apply animation we can pass a boolean inside the methods.
要缩小或扩展扩展的FAB，可以使用shrink()和extend()方法。 为了应用动画，我们可以在方法内部传递一个布尔值。
Shrink mode resembles FAB with the text label hidden.
收缩模式类似于FAB，其中文本标签处于隐藏状态。
addOnShrinkAnimationListeneris used to listen to the callbacks when the shrinking begins on an Extended FAB.
在扩展FAB上开始缩小时，使用addOnShrinkAnimationListener来侦听回调。
Now let’s implement extended FAB in an Android Studio project.
现在，让我们在Android Studio项目中实现扩展FAB。
项目结构 (Project Structure)
Android Extended Fab Project Structure
Android扩展Fab项目结构
码 (Code)
The code for activity_main.xml layout is given below:
下面给出了activity_main.xml布局的代码：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"tools:context=".MainActivity"><TextViewandroid:text="Default"android:layout_width="wrap_content"android:layout_height="wrap_content" /><com.google.android.material.floatingactionbutton.ExtendedFloatingActionButtonandroid: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"/><TextViewandroid:text="With Padding.."android:layout_width="wrap_content"android:layout_height="wrap_content" /><com.google.android.material.floatingactionbutton.ExtendedFloatingActionButtonandroid: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"/><TextViewandroid:text="Without Icon"android:layout_width="wrap_content"android:layout_height="wrap_content" /><com.google.android.material.floatingactionbutton.ExtendedFloatingActionButtonandroid:id="@+id/extFab3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:text="CLEAR" /><TextViewandroid:text="Without Icon, With Text Style"android:layout_width="wrap_content"android:layout_height="wrap_content" /><com.google.android.material.floatingactionbutton.ExtendedFloatingActionButtonandroid: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" /><TextViewandroid:text="Ripple, Icon Tint, Background Tint, Text Color"android:layout_width="wrap_content"android:layout_height="wrap_content" /><com.google.android.material.floatingactionbutton.ExtendedFloatingActionButtonandroid: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" /><TextViewandroid:text="Strokes, Icon Size"android:layout_width="wrap_content"android:layout_height="wrap_content" /><com.google.android.material.floatingactionbutton.ExtendedFloatingActionButtonandroid: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>
We’ve covered the different attributes that can be used in Extended FAB.
Two primary styles available:
我们已经介绍了可在扩展FAB中使用的不同属性。
提供两种主要样式：
Widget.MaterialComponents.ExtendedFloatingActionButton– Should be used when extended FAB contains text only in order for them to behave like a text buttonWidget.MaterialComponents.ExtendedFloatingActionButton–应在扩展FAB仅包含文本时使用，以使其表现得像文本按钮 Widget.MaterialComponents.ExtendedFloatingActionButton.IconWidget.MaterialComponents.ExtendedFloatingActionButton.Icon
The code for the MainActivity.java class is given below:
MainActivity.java类的代码如下：
package com.journaldev.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;@Overrideprotected 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);}@Overridepublic 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;}}}
The output of the above application in action is given below:
上面应用程序的输出如下：
Android Extended Fab Output
Android扩展Fab输出
That brings an end to this tutorial. You can download the project from the link below:
这样就结束了本教程。 您可以从下面的链接下载项目：
AndroidExtendedFABAndroidExtendedFAB Github Project LinkGithub项目链接
翻译自: /31942/android-extended-floating-action-button
android浮动按钮
