FloatingActionButton FAB 悬浮按钮

中文翻译： http://wiki.jikexueyuan.com/project/material-design/components/buttons-floating-action-button.html

概述

浮动操作按钮 (简称 FAB) 是一个特殊的promoted（进阶）操作案例，因为一个浮动在UI之上的圆形图标而显得格外突出，同时它还具有动态的效果，比如变形、弹出、位移等。

• 不是每个屏幕都需要浮动操作按钮，一个屏幕只推荐使用一个浮动操作按钮来增加其显著性，它应该只代表最常见的操作。
  
• 用浮动操作按钮进行积极的操作，如创建、收藏、分享、浏览和探索。避免用浮动操作按钮进行轻微破坏性操作。
  
• 浮动操作按钮不包含 app 图标或状态栏通知。不要把证章或者其他元素层叠在浮动操作按钮上。
  
• APP 主要操作的图案强制使用圆形图标。
  
• 不要给浮动操作按钮额外的维度。
• 在默认情况下，浮动操作按钮就像一块扩展的物体在屏幕上活动。在它里面的图标可能是活动的。

……里面列出了几十种使用规范，但是却没有一行代码

基本使用

继承关系

1. public class FloatingActionButton extends VisibilityAwareImageButton
2. class VisibilityAwareImageButton extends ImageButton

放置浮动操作按钮需要使用CoordinatorLayout。 CoordinatorLayout可以让一个元素浮动在另一个元素之上，还 帮助我们协调它所包含的子view之间的交互，比如当用户往下滚动一个页面，浮动操作按钮应该消失，一旦向上滚动，则重现。

另外，由于CoordinatorLayout 不支持 和ListView一起 工作 ，所以 需要用RecyclerView来替换ListViews。同时你还必须把RecyclerView升级到v22版本，之前的v21同样不支持与CoordinatorLayout一起工作。

案例：

1. <android.support.design.widget.FloatingActionButton
2. android:layout_width="wrap_content"
3. android:layout_height="wrap_content"
4. android:layout_margin="16dp"
5. app:backgroundTint="#00f"
6. app:layout_anchor="@id/app_bar"
7. app:layout_anchorGravity="bottom|end"
8. app:layout_behavior="com.example.administrator.myapplication.ScrollAwareFABBehavior"
9. app:srcCompat="@android:drawable/ic_dialog_email"/>

其中：

• app:backgroundTint：按钮的背景颜色，默认使用theme中colorAccent的颜色
  
• app:layout_anchor：指定参照物
  
• app:layout_anchorGravity：指定相对于参照物的位置
• app:layout_behavior：设置FAB自定义显示隐藏动画效果
  
• app:srcCompat或android:src：设置浮动按钮的图标

其他相关属性：

• app:fabSize：按钮是正常大小还是小号 Size for the FAB. 
  
• app:rippleColor：点击的边缘阴影颜色，默认取的是theme中的colorControlHighlight
  
• app:useCompatPadding：是否启用 Enable compat padding. 
• app:borderWidth：边框宽度。通常设置为0，同时设置一个合理的margin(16dp)，可以解决Android 5.X设备上阴影无法正常显示的问题
• app:elevation：和立体感相关的属性，设置边缘阴影的宽度 Elevation value for the FAB
• app:pressedTranslationZ：和立体感相关的属性，设置点击按钮时，按钮边缘阴影的宽度，通常设置比elevation的数值大
  

根据谷歌的设计规范，drawable的尺寸应该是24dp， 按钮应该处于屏幕的右下角，margin设置为16dp。

FAB与Snackbar

当Snackbar在显示的时候，往往出现在屏幕的底部。为了给Snackbar留出空间，浮动操作按钮需要向上移动。

只要使用 CoordinatorLayout作为基本布局，将自动产生向上移动的动画。 浮动操作按钮有一个 默认的 behavior 来检测Snackbar的添加并让按钮在Snackbar之上呈现上移与Snackbar等高的动画。

1. <?xml version="1.0" encoding="utf-8"?>
2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app="http://schemas.android.com/apk/res-auto"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:fitsSystemWindows="true">
9. <android.support.v4.widget.NestedScrollView
10. android:id="@+id/nsv"
11. android:layout_width="match_parent"
12. android:layout_height="match_parent"
13. app:layout_behavior="@string/appbar_scrolling_view_behavior">
16. <TextView
17. android:layout_width="match_parent"
18. android:layout_height="wrap_content"
19. android:text="CoordinatorLayout \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n NestedScrollView"
20. android:textSize="30sp"/>
22. </android.support.v4.widget.NestedScrollView>
25. <android.support.design.widget.FloatingActionButton
26. android:id="@+id/fab"
27. android:layout_width="wrap_content"
28. android:layout_height="wrap_content"
29. android:layout_margin="16dp"
30. app:backgroundTint="#00f"
31. app:layout_anchor="@id/nsv"
32. app:layout_anchorGravity="bottom|right|end"
33. app:srcCompat="@android:drawable/ic_dialog_email"/>
34. </android.support.design.widget.CoordinatorLayout>

显示与隐藏动画

FloatingActionButton的显示和隐藏有点让人困惑，可以找到多种实现方式，而且兼容包里的FloatingActionButton还不断的变化。

基本来说，如果是使用官方的FloatingActionButton，列表滚动时的显示与隐藏都是使用自定义 FloatingActionButton.Behavior来实现的。

NestedScrollView默认 的 app:layout_behavior为：

1. app:layout_behavior="@string/appbar_scrolling_view_behavior"

1. <string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

动画模板

1. /**
2. * Fab在滚动时候的显示与隐藏，直接借用了FloatingActionButton内置的动画效果，仅仅是在条件恰当的时候调用hide()和show()方法
3. */
4. public class ScrollAwareFABBehaviorDefault extends FloatingActionButton.Behavior {
6. public ScrollAwareFABBehaviorDefault(Context context, AttributeSet attrs) {
7. super();
8. }
10. @Override
11. public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
12. View directTargetChild, View target, int nestedScrollAxes) {
13. // Ensure we react to vertical scrolling
14. return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
15. || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
16. }
18. @Override
19. public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target,
20. int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
21. super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
22. if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {// User scrolled down and the FAB is currently visible
23. child.hide();//如果要自定义动画效果，就在这里重新定义隐藏时的动画
24. Snackbar.make(coordinatorLayout, "隐藏", Snackbar.LENGTH_SHORT).show();
25. } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {// User scrolled up and the FAB is currently not visible
26. child.show();
27. Snackbar.make(coordinatorLayout, "显示", Snackbar.LENGTH_SHORT).show();
28. }
29. }
30. }

自定义动画效果1

1. /**
2. * Fab在滚动时候的显示与隐藏，自定义上下滑动的动画
3. */
4. public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
5. private boolean mIsAnimatingOut = false;
7. public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
8. super();
9. }
11. @Override
12. public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
13. View directTargetChild, View target, int nestedScrollAxes) {
14. // Ensure we react to vertical scrolling
15. return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
16. || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
17. }
19. @Override
20. public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target,
21. int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
22. super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
23. if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
24. child.animate().scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setDuration(1500).start();
25. } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
26. child.animate().scaleX(1.0F).scaleY(1.0F).alpha(1.0F).setDuration(1500).start();
27. }
28. }
29. }

自定义动画效果2

1. /**
2. * Fab在滚动时候的显示与隐藏，自定义上下滑动的动画
3. */
4. public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
5. private int toolbarHeight;
7. public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
8. super();
9. this.toolbarHeight = getToolbarHeight(context);
10. }
12. @Override
13. public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton fab, View dependency) {
14. return super.layoutDependsOn(parent, fab, dependency) || (dependency instanceof AppBarLayout);
15. }
17. @Override
18. public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton fab, View dependency) {
19. boolean returnValue = super.onDependentViewChanged(parent, fab, dependency);
20. if (dependency instanceof AppBarLayout) {
21. CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
22. int fabBottomMargin = lp.bottomMargin;
23. int distanceToScroll = fab.getHeight() + fabBottomMargin;
24. float ratio = dependency.getY() / toolbarHeight;
25. fab.setTranslationY(-distanceToScroll * ratio);
26. }
27. return returnValue;
28. }
30. public static int getToolbarHeight(Context context) {
31. TypedArray styledAttributes = context.getTheme().obtainStyledAttributes(new int[]{R.attr.actionBarSize});
32. int toolbarHeight = (int) styledAttributes.getDimension(0, 0);
33. styledAttributes.recycle();
34. return toolbarHeight;
35. }
36. }

2017-5-23

null