FloatingActionButton的使用

悬浮按钮（FloatingActionButton），在下文简称fab，今天我们来讲讲它的一些属性与用法，以及解析并解决sdk25以上

先展示一下动态图 

本次开发环境基于sdk25.

使用之前要先引入design包

compile 'com.android.support:design:25.3.1' 1 1

xml属性

<android.support.design.widget.FloatingActionButton android:id="@+id/contact_fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="10dp" android:src="@mipmap/ic_launcher" app:backgroundTint="@color/gray" app:backgroundTintMode="multiply" app:borderWidth="0dp" app:elevation="@dimen/activity_horizontal_margin" app:fabSize="auto" app:pressedTranslationZ="@dimen/activity_horizontal_margin" app:rippleColor="@color/gray" app:useCompatPadding="true" /> 123456789101112131415 123456789101112131415 app:backgroundTint 按钮的背景颜色，不设置，默认使用theme中colorAccent的颜色app:backgroundTintMode 按钮背景颜色的模式，在设置screen的时候就跟其他模式有点区别，区别在颜色变了，其他不变，具体不详，可忽略app:borderWidth 该属性如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth=”0dp”app:elevation 默认状态下阴影大小。app:fabSize 设置大小，该属性有两个值，分别为normal和mini，对应的大小分别为56dp和40dpapp:pressedTranslationZ 按钮按下去的状态下的阴影大小app:rippleColor 设置点击时的背景颜色app:useCompatPadding 是否使用兼容的填充大小

用法

可与FloatingActionMenu或者CoordinatorLayout一起使用。在这里只拿CoordinatorLayout来做示例。

利用recyclerView的上下滑动来使fab显示或隐藏，点击fab显示snackbar

布局

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.RecyclerView android:id="@+id/contact_recyclerview" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v7.widget.RecyclerView> <android.support.design.widget.FloatingActionButton android:id="@+id/contact_fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="10dp" android:src="@mipmap/ic_launcher" app:backgroundTint="@color/turquoise" app:backgroundTintMode="src_in" app:borderWidth="0dp" app:elevation="5dp" app:fabSize="auto" app:pressedTranslationZ="50dp" app:rippleColor="@color/gray" app:useCompatPadding="true" app:layout_anchor="@+id/contact_recyclerview" app:layout_anchorGravity="bottom|right|end" app:layout_behavior="com.voctex.ui.tablayout.other.ScrollingViewBehavior" /> </android.support.design.widget.CoordinatorLayout> 123456789101112131415161718192021222324252627282930313233343536 123456789101112131415161718192021222324252627282930313233343536

代码实现

RecyclerView recyclerView= ((RecyclerView) findViewById(R.id.contact_recyclerview)); recyclerView.setHasFixedSize(true); recyclerView.setItemAnimator(new DefaultItemAnimator()); //设置一个垂直方向的layout manager int orientation = LinearLayoutManager.VERTICAL; recyclerView.setLayoutManager(new LinearLayoutManager(mContext, orientation, false)); List<String> mList=new ArrayList<>(); for (int i = 0; i < 20; i++) { mList.add("位置为："+i); } TabLayoutAdapter tabLayoutAdapter=new TabLayoutAdapter(recyclerView,mList); recyclerView.setAdapter(tabLayoutAdapter); FloatingActionButton fab= ((FloatingActionButton) findViewById(R.id.contact_fab)); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Snackbar.make(v,"floatingActionBtn",Snackbar.LENGTH_SHORT) .setAction("action", new View.OnClickListener() { @Override public void onClick(View v) { VtToast.s(mContext,"仙剑奇侠传"); } }).show(); } }); 1234567891011121314151617181920212223242526272829303132 1234567891011121314151617181920212223242526272829303132

在以上代码中，只需要在xml中为fab指定一个属性就可以实现recyclerView在上下滑动时fab的显示或隐藏了。

app:layout_behavior="com.voctex.ui.tablayout.other.ScrollingViewBehavior" 1 1

而值就是自定义的一个类，继承于FloatingActionButton.Behavior，重写onStartNestedScroll和onNestedScroll这两个方法，相关代码如下：

package com.voctex.ui.tablayout.other; import android.content.Context; import android.support.design.widget.CoordinatorLayout; import android.support.design.widget.FloatingActionButton; import android.support.v4.view.ViewCompat; import android.util.AttributeSet; import android.view.View; /** * Created by mac_xihao on 17/7/3. * (～￣▽￣)～ 嘛哩嘛哩哄 */ public class ScrollingViewBehavior extends FloatingActionButton.Behavior { /** * 因为是在XML中使用app:layout_behavior定义静态的这种行为, * 必须实现一个构造函数使布局的效果能够正常工作。 * 否则 Could not inflate Behavior subclass error messages. * * @param context * @param attrs */ public ScrollingViewBehavior(Context context, AttributeSet attrs) { super(context, attrs); } /** * 处理垂直方向上的滚动事件 * * @param coordinatorLayout * @param child * @param directTargetChild * @param target * @param nestedScrollAxes * @return */ @Override public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) { // Ensure we react to vertical scrolling return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes); } /** * 检查Y的位置，并决定按钮是否动画进入或退出 * * @param coordinatorLayout * @param child * @param target * @param dxConsumed * @param dyConsumed * @param dxUnconsumed * @param dyUnconsumed */ @Override public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) { super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed); if (dyConsumed > 10 && child.getVisibility() == View.VISIBLE) { // User scrolled down and the FAB is currently visible -> hide the FAB //执行隐藏的动画 child.hide(); } else if (dyConsumed < -10 && child.getVisibility() != View.VISIBLE) { // User scrolled up and the FAB is currently not visible -> show the FAB //执行显示的动画 child.show(); } } } 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273

其实，到这里是应该结束的了，实现起来是很简单的，但是我在测试的时候却发现了一个比较坑的问题，就是RecylerView在滑动的时候，只能隐藏，却不显示fab。