FloatingActionButton的使用

r囧r小猫 2022-06-17 06:07 88阅读 0赞

FloatingActionButton是继承至ImageView，所以FloatingActionButton拥有ImageView的所有属性。CoordinatorLayout可以用来配合FloatingActionButton浮动按钮，设置app：layout\_anchor和app:layout\_anchorGravity构建出特定的位置与效果的FloatingActionButton。

我们来看看怎么使用FloatingActionButton吧：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****android.support.design.widget.FloatingActionButton**  
2.          android:id="@+id/fab"  
3.          android:layout\_width="wrap\_content"  
4.          android:layout\_height="wrap\_content"  
5.          android:layout\_margin="16dp"  
6.          android:src="@mipmap/icon"  
7.          app:backgroundTint="\#30469b"  
8.          app:borderWidth="0dp"  
9.          app:elevation="6dp"  
10.         app:fabSize="normal"  
11.         app:layout\_anchor="@id/coordinator\_layout"  
12.         app:layout\_anchorGravity="bottom|right"  
13.         app:pressedTranslationZ="12dp"  
14.         app:rippleColor="\#a6a6a6" **/>**

各个属性的意思：

*  app:backgroundTint - 设置FAB的背景颜色。
 *  app:rippleColor - 设置FAB点击时的背景颜色。
 *  app:borderWidth - **该属性尤为重要，如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth="0dp"。**
 *  app:elevation - 默认状态下FAB的阴影大小。
 *  app:pressedTranslationZ - 点击时候FAB的阴影大小。
 *  app:fabSize - 设置FAB的大小，该属性有两个值，分别为normal和mini，对应的FAB大小分别为56dp和40dp。
 *  src - 设置FAB的图标，Google建议符合Design设计的该图标大小为24dp。
 *  app:layout\_anchor - 设置FAB的锚点，即以哪个控件为参照点设置位置。
 *  app:layout\_anchorGravity - 设置FAB相对锚点的位置，值有 bottom、center、right、left、top等。

这样设置后，就可以在屏幕右下角创建出一个FloatingActionButton了。如：

![Center][]

一般情况下，FAB与Snackbar配合使用时候会出现Snackbar遮住FAB：如：

![Center 1][]

为了解决这个问题，我们把Snackbar.make(View view,,).show();的第一个参数View设置为CoordinatorLayout，即：

**\[java\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  //把mCoordinatorLayout传给Snackbar  
2.  Snackbar.make(mCoordinatorLayout, "Snackbar", Snackbar.LENGTH\_SHORT).show();

这样CoordinatorLayout就可以协调各个View之间的动画效果，效果就变为了：

![20150719134232098][]

即Snackbar不会遮挡FAB的显示了，当Snackbar出现时FAB会自动上移。

当然FAB的点击事件也是通过setOnClickListener()设置即可。

我们再看一个效果：

![20150719142216855][]

这个效果其实就是通过改变FAB的Layout\_anchor和layout\_anchorGravity来实现的，看看布局就明白了：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****android.support.design.widget.CoordinatorLayout**   
2.      xmlns:android="http://schemas.android.com/apk/res/android"  
3.      xmlns:app="http://schemas.android.com/apk/res-auto"  
4.      xmlns:tools="http://schemas.android.com/tools"  
5.      android:id="@+id/coordinator\_layout"  
6.      android:layout\_width="match\_parent"  
7.      android:layout\_height="match\_parent"  
8.      tools:context=".MainActivity"**>**  
9.    
10.     **<****android.support.design.widget.AppBarLayout**  
11.         android:layout\_width="match\_parent"  
12.         android:layout\_height="256dp"  
13.         android:fitsSystemWindows="true"**>**  
14.   
15.         **<****android.support.design.widget.CollapsingToolbarLayout**  
16.             android:id="@+id/collapsingToolbarLayout"  
17.             android:layout\_width="match\_parent"  
18.             android:layout\_height="match\_parent"  
19.             app:contentScrim="\#30469b"  
20.             app:expandedTitleMarginStart="48dp"  
21.             app:layout\_scrollFlags="scroll|exitUntilCollapsed"**>**  
22.   
23.             **<****ImageView**  
24.                 android:layout\_width="match\_parent"  
25.                 android:layout\_height="match\_parent"  
26.                 android:scaleType="centerCrop"  
27.                 android:src="@mipmap/bg"  
28.                 app:layout\_collapseMode="parallax"  
29.                 app:layout\_collapseParallaxMultiplier="0.7" **/>**  
30.   
31.             **<****android.support.v7.widget.Toolbar**  
32.                 android:id="@+id/toolbar"  
33.                 android:layout\_width="match\_parent"  
34.                 android:layout\_height="?attr/actionBarSize"  
35.                 app:layout\_collapseMode="pin" **/>**  
36.         **</****android.support.design.widget.CollapsingToolbarLayout****>**  
37.     **</****android.support.design.widget.AppBarLayout****>**  
38.     **<****android.support.design.widget.FloatingActionButton**  
39.         android:id="@+id/fab"  
40.         android:layout\_width="wrap\_content"  
41.         android:layout\_height="wrap\_content"  
42.         android:src="@mipmap/icon"  
43.         app:backgroundTint="\#30469b"  
44.         app:borderWidth="0dp"  
45.         app:elevation="6dp"  
46.         app:fabSize="normal"  
47.         app:layout\_anchor="@id/collapsingToolbarLayout"  
48.         app:layout\_anchorGravity="bottom|center"  
49.         app:pressedTranslationZ="12dp"  
50.         app:rippleColor="\#a6a6a6" **/>**  
51.     **<****android.support.v7.widget.RecyclerView**  
52.         android:id="@+id/recyclerView"  
53.         android:layout\_width="match\_parent"  
54.         android:layout\_height="match\_parent"  
55.         android:scrollbars="none"  
56.         app:layout\_behavior="@string/appbar\_scrolling\_view\_behavior" **/>**  
57. **</****android.support.design.widget.CoordinatorLayout****>**

转自：http://blog.csdn.net/u010687392/article/details/46954213      （ Sunzxyong）  
源码地址：http://download.csdn.net/detail/u010687392/8913513

[view plain]: http://blog.csdn.net/u010687392/article/details/46954213#
[Center]: /images/20220617/833811a78be34ff1b1033e97837e74b4.png
[Center 1]: /images/20220617/5a336656424b4976b7f9d78c0770d534.png
[20150719134232098]: /images/20220617/f915929053a147918be2f85e01a2a59c.png
[20150719142216855]: /images/20220617/175a2d5ea66c4d06bf6e54d7f297eb17.png