Android Design Support Library全解：Part 1 Floating Action Button 悬浮按钮
Android Design Support Library系列第一弹，悬浮按钮 悬浮按钮(Floating action button ，FAB) 简单来说是一种圆形按钮，其悬浮于UI之上，四周有阴影环绕，可以用于实现一些高级操作，比如添加新的条目，或是为邮件添加附件等等。 FAB1 FAB2 就本质而言，FAB其实就是继承于ImageView的控件，其支持所有ImageView和ImageButton的属性。 FAB继承自ImageView 要使用FAB，首先要添加依赖包： //本文撰写时，最新版本是25.3.1 compile 'com.android.support:design:25.3.1' 第一步： 在layout文件中加入FAB，我们假设已经声明了命名空间xmlns:app=”http://schemas.android.com/apk/res-auto。 <FrameLayout android:id="@+id/layoutInner" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android:id="@+id/btnFloatingAction" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" /> </FrameLayout> 需要说明的是，因为经常需要FAB悬浮于整个UI界面，所以一般将其单独放入一个FrameLayout中，FrameLayout会覆盖下面的UI界面，这样便于FAB位置的设置。 FAB属性介绍 背景填充色： 默认情况下，FAB的填充色为style.xml中colorAccent定义的颜色，如有需要可以设置属性**app:backgroundTint **来自定义背景填充色； 尺寸大小：FAB设有三种尺寸，标准尺寸（Normal 56dp）,迷你尺寸（Mini 40dp）,以及自适应尺寸（基于屏幕大小而变化），用户通过app:fabSize来设定； fabSize 波纹颜色：app:rippleColor属性用来控制当FAB按下后，产生波纹效果的颜色； 阴影尺寸：app:elevation属性用来控制FAB在正常状态下阴影的尺寸，默认6dp; 按下阴影：app:pressedTranslationZ属性用来控制FAB在按下时阴影的打下，默认12dp; 第二步 根据属性的介绍，完善FAB的设置： android:id="@+id/btnFloatingAction" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:src="@drawable/ic_plus" app:fabSize="normal" app:rippleColor="@android:color/background_dark"/> 第三步 在Activity中设置点击事件： FloatingActionButton btnFab = (FloatingActionButton) findViewById(R.id.btnFloatingAction); btnFab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "Hello FAB!", Toast.LENGTH_SHORT).show(); } }); 和一般的Button的设置点击事件是一样的，使用起来很方面。 需要注意问题 FAB的呈现的效果在Android 4.4 和4.4以上的设备并不相同： Android 5 Android 4.4 通过上面的对比图可以看出来效果的差异，Android 4.4上 FAB会有边距，而起有默认的阴影，但是4.4+设备没有边框和设备。 解决边距 为了结局边框的问题，可以为4.4+设备设置边框距离，而4.4及之前的设备，边距设为0。 values/dimens.xml <dimen name="fab_margin_right">0dp</dimen> <dimen name="fab_margin_bottom">0dp</dimen> values-v21/dimens.xml <dimen name="fab_margin_right">16dp</dimen> <dimen name="fab_margin_bottom">16dp</dimen> 在布局文件中就可以这样设置FAB的边距 <android.support.design.widget.FloatingActionButton ...... ...... android:layout_marginBottom="@dimen/fab_margin_bottom" android:layout_marginRight="@dimen/fab_margin_right"/> 这样设备就会选取符合系统版本的边距值来设置。 解决阴影 为了统一阴影的大小，可以在布局文件中利用app:borderWidth属性，统一设置阴影大小。 <android.support.design.widget.FloatingActionButton ...... ...... app:fabSize="normal" app:borderWidth="0dp" android:layout_marginBottom="@dimen/fab_margin_bottom" android:layout_marginRight="@dimen/fab_margin_right"/> 动画问题 在最初，旋转动画RotateAnimation无法应用在FAB上，但是属性动画出现之后解决了这个问题。 btnFab = (FloatingActionButton) findViewById(R.id.btnFloatingAction); btnFab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(FloatingActionButtonActivity.this, "Hello FAB!", Toast.LENGTH_SHORT).show(); //设置属性动画，旋转 ObjectAnimator animator = ObjectAnimator.ofFloat(btnFab,"rotation",0f,360f); animator.setInterpolator(new FastOutLinearInInterpolator()); animator.setDuration(1000).start(); } }); 更多关于属性动画对内容，请阅读这里 相关参考 https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html
