Androidfloatingactionbutton详解

发布时间：2023-05-18

Android floating action button 是一种圆形带有图标的简易浮动按钮，通过点击它可以执行某些操作。本文将从多个方面介绍 android floating action button 的使用方法，包括布局、样式、监听事件、动画效果等。

一、布局

1、将 android floating action button 添加到布局中：

<android.support.design.widget.FloatingActionButton
   android:id="@+id/fab"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/ic_add"
   app:elevation="6dp"
   app:pressedTranslationZ="12dp"
   app:layout_anchor="@id/bottomNavigationView"
   app:layout_anchorGravity="bottom|end" />

其中，app:elevation 和 app:pressedTranslationZ 是用于设置按钮的阴影效果，在材料设计中，可视阴影是一个很重要的概念。app:layout_anchor 和 app:layout_anchorGravity 是用于设置 floating action button 的位置，可以将它放置在布局的底部中心。 2、使用 CoordinatorLayout 布局：

<android.support.design.widget.CoordinatorLayout
   android:id="@+id/coordinatorLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   <android.support.design.widget.AppBarLayout
       android:id="@+id/appBarLayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:fitsSystemWindows="true"
       app:theme="@style/AppTheme.AppBarOverlay">
       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           android:background="?attr/colorPrimary"
           app:popupTheme="@style/AppTheme.PopupOverlay" />
   </android.support.design.widget.AppBarLayout>
   <include layout="@layout/content_main" />
   <android.support.design.widget.FloatingActionButton
       android:id="@+id/fab"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/ic_add"
       app:layout_anchor="@id/content_main"
       app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>

使用 CoordinatorLayout 让 floating action button 接管了整个页面，它可以让悬浮按钮与界面其它元素进行交互，从而实现一些令人惊讶的效果。

二、样式

1、背景颜色：

<android.support.design.widget.FloatingActionButton
   android:id="@+id/fab"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/ic_add"
   android:backgroundTint="@color/colorPrimary"
   app:elevation="6dp"
   app:pressedTranslationZ="12dp"
   app:layout_anchor="@id/bottomNavigationView"
   app:layout_anchorGravity="bottom|end" />

使用 android:backgroundTint 属性可以设置 floating action button 的背景颜色。 2、图标：

<android.support.design.widget.FloatingActionButton
   android:id="@+id/fab"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/ic_add"
   android:tint="@color/colorIcon"
   app:elevation="6dp"
   app:pressedTranslationZ="12dp"
   app:layout_anchor="@id/bottomNavigationView"
   app:layout_anchorGravity="bottom|end" />

使用 android:tint 属性可以为图标设置颜色。

三、监听事件

1、点击事件：

floatingActionButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       //在按钮被点击时执行的代码
   }
});

2、长按事件：

floatingActionButton.setOnLongClickListener(new View.OnLongClickListener() {
   @Override
   public boolean onLongClick(View view) {
       //在按钮被长按时执行的代码
       return true;
   }
});

3、动态改变按钮图标：

floatingActionButton.setImageResource(R.drawable.ic_alarm);

4、动态改变按钮颜色：

floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.colorAccent)));

四、动画效果

1、隐藏：

floatingActionButton.hide();

2、显示：

floatingActionButton.show();

3、移动：

floatingActionButton.animate().x(100).y(200).setDuration(1000);

4、缩放：

floatingActionButton.animate().scaleX(2).scaleY(2).setDuration(1000);

5、旋转：

floatingActionButton.animate().rotation(360).setDuration(1000);

五、总结

本文详细介绍了 android floating action button 的使用方法，包括布局、样式、监听事件、动画效果等。希望对读者有所帮助。

推荐文章