1.属性
android:src: FAB中显示的图标,最好是24dp的
app:backgroundTint: 正常的背景颜色,颜色不透明度要为FF,即完全不透明
app:rippleColor: 按下时的背景颜色
app:elevation: 正常的阴影大小
app:pressedTranslationZ: 按下时的阴影大小
app:layout_anchor: 设置FAB的锚点,即以哪个控件为参照设置位置
app:layout_anchorGravity: FAB相对于锚点的位置
app:fabSize: FAB的大小,normal或mini(对应56dp和40dp)
app:fabCustomSize="10dp" 用户自定义FAB的大小
注意:要想让FAB显示点击后的颜色和阴影变化效果,必须设置onClick事件
2.布局文件举例
<android.support.design.widget.FloatingActionButton android:id="@+id/design_rl_fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_margin="15dp" android:elevation="10dp" android:src="@drawable/design_fab" app:backgroundTint="#ffcc00"/>
3.点击事件
FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.design_rl_fab); floatingActionButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(DesignActivity.this,"Fab",Toast.LENGTH_SHORT).show(); } });效果:
4.Snackbar是Toast的升级版,将提示加入了一个可交互的提示按钮
重写点击事件:加入Snackbar
FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.design_rl_fab); floatingActionButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,"我是Snackbar",Snackbar.LENGTH_SHORT) .setAction("取消", new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(DesignActivity.this,"Fab2",Toast.LENGTH_SHORT).show(); } }).show(); } });
效果如下:
这是你会发现悬浮按钮被盖住了,没关系,可以借助CoordinatorLayout
5.CoordinatorLayout是一个加强版的FrameLayout,它可以自动监听所有子控件的事件,然后自动为我们做出合理的响应,比如刚才的Snackbar把悬浮按钮遮挡住了,而CoordinatorLayout能监听的此事件,并将悬浮按钮自动向上移动
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/design_tb_toolbar" android:layout_width="match_parent" android:layout_height="55dp" android:background="@color/colorPrimary" app:title="Design" android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/AlertDialog.AppCompat.Light"> </android.support.v7.widget.Toolbar> <android.support.design.widget.FloatingActionButton android:id="@+id/design_rl_fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:layout_margin="15dp" android:elevation="10dp" android:src="@drawable/design_fab" app:backgroundTint="#ffcc00"/> </android.support.design.widget.CoordinatorLayout>
效果: