【Android

来源：互联网发布：视差js原理编辑：程序博客网时间：2024/06/03 21:20

FloatingActionButton（FAB）是 Android 5.0 新特性——Material Design 中的一个控件，是一种悬浮的按钮。

FloatingActionButton 是 ImageView 的子类，因此它具备ImageView的全部属性。

FloatingActionButton 结合 CoordinatorLayout 使用，即可实现悬浮在任意控件的任意位置。

使用 FloatingActionButton 的难点主要是布局，其在JAVA代码中的用法和普通的 ImageView 基本相同。

跟所有MD控件一样，要使用FAB，需要在gradle文件中先注册依赖：

compile 'com.android.support:design:25.0.0'

1、FAB 基本属性：

        android:src：FAB中显示的图标，最好是24dp的        app:backgroundTint：正常的背景颜色        app:rippleColor：按下时的背景颜色        app:elevation：正常的阴影大小        app:pressedTranslationZ：按下时的阴影大小        app:layout_anchor：设置FAB的锚点，即以哪个控件为参照设置位置        app:layout_anchorGravity：FAB相对于锚点的位置        app:fabSize：FAB的大小，normal或mini（对应56dp和40dp）        注意：要想让FAB显示点击后的颜色和阴影变化效果，必须设置onClick事件

实例布局代码：

<android.support.design.widget.CoordinatorLayout    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="20.0dip"        android:onClick="click"        android:src="@mipmap/ic_launcher"        app:backgroundTint="#30469b"        app:borderWidth="0.0dip"        app:elevation="5.0dip"        app:fabSize="normal"        app:layout_anchor="@id/container"        app:layout_anchorGravity="right|bottom"        app:pressedTranslationZ="10.0dip"        app:rippleColor="#a6a6a6" /></android.support.design.widget.CoordinatorLayout>

运行结果图：

2、交互事件：

FloatingActionButton 的用法和ImageView基本相同，要想设置FloatingActionButton的点击事件，直接调用setOnClickListener()方法即可。

值得一提的是，当FloatingActionButton与Snackbar一起使用的时候，有时候会发生“Snackbar将FloatingActionButton覆盖”的问题，即FloatingActionButton不会因为Snackbar的弹出而上移，这是因为Snackbar的make()方法第一个参数没有与FloatingActionButton绑定，只要Snackbar的make()方法第一个参数是FloatingActionButton对象，就不会出现上述问题，实例代码如下：

        fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                // 第一个参数设置为FAB就可以使FAB跟随Snackbar移动                Snackbar.make(v, "去下一页？", Snackbar.LENGTH_LONG).setAction("确定", new View.OnClickListener() {                    @Override                    public void onClick(View v) {                        startActivity(new Intent(MainActivity.this, NextActivity.class));                    }                }).show();            }        });

运行结果如下图：

3、FAB 滑动隐藏/显示：

很多应用中都有这种界面：界面中有一个FAB和一个RecyclerView，当RecyclerView向下滑动时，FAB消失；当RecyclerView向上滑动时，FAB又显示出来。这是FAB与RecyclerView、CoordinatorLayout结合使用的结果。通过设置FAB在CoordinatorLayout中的Behavior来实现这种效果。下面贴代码：

布局代码：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/activity_next"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v7.widget.RecyclerView        android:id="@+id/next_rv"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <android.support.design.widget.FloatingActionButton        android:id="@+id/next_fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="20.0dip"        android:onClick="click"        android:src="@mipmap/ic_launcher"        app:backgroundTint="@color/colorPrimaryDark"        app:elevation="5.0dip"        app:fabSize="normal"        app:layout_anchor="@id/next_rv"        app:layout_anchorGravity="bottom|right"        app:layout_behavior="com.example.testfloatingactionbutton.ScrollAwareFABBehavior"        app:pressedTranslationZ="10.0dip"        app:rippleColor="@color/colorPrimary" /></android.support.design.widget.CoordinatorLayout>

ScrollAwareFABBehavior类中的代码：

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {    // 动画插值器，可以控制动画的变化率    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();    // 是否正在执行隐藏的动画    private boolean mIsAnimatingOut = false;    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {        super();    }    @Override    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,                                       final View directTargetChild, final View target, final int nestedScrollAxes) {        // 如果是上下滑动的，则返回true        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);    }    @Override    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,                               final View target, final int dxConsumed, final int dyConsumed,                               final int dxUnconsumed, final int dyUnconsumed) {        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);        if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {            // 用户向下滑动时判断是否正在执行隐藏动画，如果不是，而且FAB当前是可见的，则执行隐藏动画隐藏FAB            animateOut(child);        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {            // 用户向上滑动时判断FAB是否可见，如果不可见则执行显示动画显示FAB            animateIn(child);        }    }    // Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exits    // 执行隐藏动画隐藏FAB    private void animateOut(final FloatingActionButton button) {        if (Build.VERSION.SDK_INT >= 14) {            ViewCompat.animate(button).scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer()                    .setListener(new ViewPropertyAnimatorListener() {                        public void onAnimationStart(View view) {                            ScrollAwareFABBehavior.this.mIsAnimatingOut = true;                        }                        public void onAnimationCancel(View view) {                            ScrollAwareFABBehavior.this.mIsAnimatingOut = false;                        }                        public void onAnimationEnd(View view) {                            ScrollAwareFABBehavior.this.mIsAnimatingOut = false;                            view.setVisibility(View.GONE);                        }                    }).start();        } else {            Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_out);            anim.setInterpolator(INTERPOLATOR);            anim.setDuration(200L);            anim.setAnimationListener(new Animation.AnimationListener() {                public void onAnimationStart(Animation animation) {                    ScrollAwareFABBehavior.this.mIsAnimatingOut = true;                }                public void onAnimationEnd(Animation animation) {                    ScrollAwareFABBehavior.this.mIsAnimatingOut = false;                    button.setVisibility(View.GONE);                }                @Override                public void onAnimationRepeat(final Animation animation) {                }            });            button.startAnimation(anim);        }    }    // Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout enters    // 执行显示动画显示FAB    private void animateIn(FloatingActionButton button) {        button.setVisibility(View.VISIBLE);        if (Build.VERSION.SDK_INT >= 14) {            ViewCompat.animate(button).scaleX(1.0F).scaleY(1.0F).alpha(1.0F)                    .setInterpolator(INTERPOLATOR).withLayer().setListener(null)                    .start();        } else {            Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_in);            anim.setDuration(200L);            anim.setInterpolator(INTERPOLATOR);            button.startAnimation(anim);        }    }}

FAB显示的动画fab_in：

<set xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/decelerate_interpolator"    android:zAdjustment="top">    <scale        android:duration="@android:integer/config_mediumAnimTime"        android:fromXScale="1.0"        android:fromYScale="1.0"        android:pivotX="50%p"        android:pivotY="50%p"        android:toXScale=".5"        android:toYScale=".5" />    <alpha        android:duration="@android:integer/config_mediumAnimTime"        android:fromAlpha="1.0"        android:toAlpha="0" /></set>

FAB隐藏的动画fab_out：

<set xmlns:android="http://schemas.android.com/apk/res/android">    <set xmlns:android="http://schemas.android.com/apk/res/android"        android:interpolator="@android:anim/decelerate_interpolator">        <scale            android:duration="@android:integer/config_mediumAnimTime"            android:fromXScale="2.0"            android:fromYScale="2.0"            android:pivotX="50%p"            android:pivotY="50%p"            android:toXScale="1.0"            android:toYScale="1.0" />    </set></set>

运行效果如下图：

以上就是对FloatingActionButton用法的简单介绍，下面贴出码云上的代码，供大家参考。

DEMO地址

阅读全文

0 0