FloatingActionButton是的Google在com.android.support:design库中的一个悬浮按钮,一般简称(FCB按钮),他也是Material Design 设计的一员,FCB和RecycleView搭配是使用也是很常见的操作,譬如在recycleView中下滑隐藏上滑显示,以及快速返回到RecycleView的第一个行等操作。下面我们来实现个常见的需求,首选我们建立一个project命名为FloatingActionButton. 主界面activity_main.xml布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rcv"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fcb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_margin="@dimen/default_margin"
android:backgroundTint="@color/colorAccent"
android:onClick="onClickFCB"
android:src="@drawable/up"
app:borderWidth="0dp"
app:elevation="10dp"
app:fabSize="normal"
app:rippleColor="@color/colorPrimary" />
</RelativeLayout>
复制代码
布局很简单就是一个recycleView加上一个FCB按钮,顺便说一下FCB常见用的属性
- app:backgroundTint :设置FAB的背景颜色。
- app:rippleColor:设置FAB点击时的背景颜色,也就是水波纹效果的颜色
- app:borderWidth:该属性尤为重要,如果不设置0dp,那么在4.1的sdk上FAB会显示为正方形,而且在5.0以后的sdk没有阴影效果,所以设置为borderWidth="0dp",
- app:elevation:默认状态下FAB的阴影大小。。
- app:fabSize:设置FAB的大小,该属性有两个值,分别为normal和mini,对应的FAB大小分别为56dp和40dp。
- android:src:设置FAB的图标,Google建议符合Design设计的该图标大小为24dp。
- app:layout_anchor:设置FAB的锚点,即以哪个控件为参照点设置位置
- app:layout_anchorGravity:设置FAB相对锚点的位置,值有 bottom、center、right、left、top等。
接下来重点是监听recycleView的滑动,我RecycleView可通过 recyclerView.addOnScrollListener()方法来监听滑动的距离,
recyclerView.addOnScrollListener(new RecScrollListener(this));
复制代码
RecScrollListener的具体实现
public class RecScrollListener extends RecyclerView.OnScrollListener {
private static final int THRESHOLD = 10;//滑动的距离
private int distance = 0;
private FCBStateListener fcbStateListener;
private boolean visible = true;//是否可见
public RecScrollListener(FCBStateListener hideScrollListener) {
this.fcbStateListener = hideScrollListener;
}
//滚动时回调
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if (distance > THRESHOLD && visible) {
//隐藏
visible = false;
fcbStateListener.onFCBHide();
distance = 0;
} else if (distance < -20 && !visible) {
//显示
visible = true;
fcbStateListener.onFCBShow();
distance = 0;
}
if (visible && dy > 0 || (!visible && dy < 0)) {
distance += dy;
}
}
}
复制代码
RecScrollListener类继承RecycleView的OnScrollListener类,重写onScrolled的方法,该方法在每次RecycleView滑动的时候回调,其中dy是每次Y轴滑动的距离。
dy > 0 :手指向上滚动,列表滚动显示下面的内容
dy < 0 :手指向下滚动,列表滚动显示上面的内容
THRESHOLD是默认滑动的距离,超过该距离就显示或者隐藏FCB,distance是记录滑动距离的累加值,FCBStateListener是回调FCB按钮影藏显示的回调接口,visible判断FCB是否影藏了, MainActivity.java
private RecyclerView recyclerView;
private FloatingActionButton floatingActionButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
floatingActionButton = findViewById(R.id.fcb);
recyclerView = findViewById(R.id.rcv);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
List<String> list = new ArrayList<>();
for (int i = 0; i < 100; i++) {
list.add("Item_" + i);
}
recyclerView.setAdapter(new RecFcbAdapter(list));
recyclerView.addOnScrollListener(new RecScrollListener(this));
}
//点击FCB后recyclerView回到首页
public void onClickFCB(View view) {
recyclerView.smoothScrollToPosition(0);
}
//隐藏FCB
@Override
public void onFCBHide() {
RelativeLayout.LayoutParams layoutParams = (LayoutParams) floatingActionButton.getLayoutParams();
floatingActionButton.animate().translationY(floatingActionButton.getHeight() + layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));
}
//显示FCB
@Override
public void onFCBShow() {
floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
}
}
复制代码
最后效果如下
源码下载