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" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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和40dp
app: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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

代码实现

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();
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在以上代码中，只需要在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();
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

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