实现滑动RecyclerView,Fab显示和隐藏。有两种方法。
效果~
效果图
方法一：利用监听事件来实现显示和隐藏动画
思路：1.监听RecyclerView的滑动
2.fab执行显示和隐藏的动画
activity_main.xml
<RelativeLayout 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.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:paddingTop="?attr/actionBarSize" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="58dp"
android:layout_height="58dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:src="@android:drawable/ic_dialog_email"
app:layout_behavior="@string/fab_behavior" />
</RelativeLayout>
这里的xml中要注意设置：
android:clipToPadding="false" 该控件的绘制范围是否不在Padding里面。false：绘制的时候范围会考虑padding即会往里面缩进。
android:clipChildren="false" 子控件是否能不超出padding的区域（比如ScrollView上滑动的时候，child可以滑出该区域）
MainActivity.java
public class MainActivity extends AppCompatActivity implements HideScrollListener{
private RecyclerView recyclerview;
private FloatingActionButton fab;
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerview = (RecyclerView)findViewById(R.id.recyclerview);
fab = (FloatingActionButton)findViewById(R.id.fab);
toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setTitle("我的Demo");
recyclerview.addOnScrollListener(new FabScrollListener(this));
/*recyclerview.addOnScrollListener(new RecyclerView.OnScrollListener() {
private boolean visible = true;//是否可见
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if(dy >0 ){
if(visible){
visible = false;
onHide();
}
}else {
if(!visible){
visible = true;
onShow();
}
}
}
});*/
recyclerview.setLayoutManager(new LinearLayoutManager(this));
List<String> list = new ArrayList<>();
for (int i = 0; i < 60; i++) {
list.add("Item"+i);
}
RecyclerView.Adapter adapter = new FabRecyclerAdapter(list );
recyclerview.setAdapter(adapter );
}
@Override
public void onHide() {
Log.e("zxj","onHide");
// 隐藏动画--属性动画
toolbar.animate().translationY(-toolbar.getHeight()).setInterpolator(new AccelerateInterpolator(3));
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) fab.getLayoutParams();
fab.animate().translationY(fab.getHeight()+layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));
}
@Override
public void onShow() {
Log.e("zxj","onShow");
// 显示动画--属性动画
toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) fab.getLayoutParams();
fab.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
}
}
HideScrollListener.java
public interface HideScrollListener {
public void onHide();
public void onShow();
}
FabScrollListener.java
public class FabScrollListener extends RecyclerView.OnScrollListener {
private static final int THRESHOLD = 20;
private int distance = 0;
private HideScrollListener hideListener;
private boolean visible = true;//是否可见
public FabScrollListener(HideScrollListener hideScrollListener) {
this.hideListener = hideScrollListener;
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
/**
* dy:Y轴方向的增量
* 有正和负
* 当正在执行动画的时候，就不要再执行了
*/
if (distance > THRESHOLD && visible) {
//隐藏动画
visible = false;
hideListener.onHide();
distance = 0;
} else if (distance < -20 && !visible) {
//显示动画
visible = true;
hideListener.onShow();
distance = 0;
}
if (visible && dy > 0 || (!visible && dy < 0)) {//向下滑并且可见 或者 向上滑并且不可见
distance += dy;
}
}
}
这里通过distance和visible的判断来实现toolbar和fab的显示和隐藏
FabRecyclerAdapter.java
public class FabRecyclerAdapter extends Adapter<RecyclerView.ViewHolder> {
private List<String> list;
public FabRecyclerAdapter(List<String> list) {
this.list = list;
}
@Override
public int getItemCount() {
return list.size();
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int position) {
String str = list.get(position);
MyViewHolder holder = (MyViewHolder) viewHolder;
holder.tv.setText(str);
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup arg0, int arg1) {
View view = LayoutInflater.from(arg0.getContext()).inflate(R.layout.listitem, arg0, false);
return new MyViewHolder(view);
}
class MyViewHolder extends ViewHolder{
private TextView tv;
public MyViewHolder(View itemView) {
super(itemView);
tv = (TextView) itemView.findViewById(R.id.tv);
}
}
}
方法二：Behavior控制Toolbar&Fab的显示和隐藏
Behavior是Android新出的Design库里新增的布局概念。Behavior只有是CoordinatorLayout的直接子View才有意义。可以为任何View添加一个Behavior。Behavior是一系列回调。让你有机会以非侵入的为View添加动态的依赖布局，和处理父布局(CoordinatorLayout)滑动手势的机会
CoordinatorLayout: 继承自ViewGroup。
通过协调并调度里面的子控件或者布局来实现触摸（一般是指滑动）产生一些相关的动画效果。
可以通过设置view的Behavior来实现触摸的动画调度。
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:clipChildren="false"
android:paddingTop="?attr/actionBarSize"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<android.support.design.widget.FloatingActionButton
app:layout_behavior=".FabBehavior"
android:id="@+id/fab"
android:layout_width="58dp"
android:layout_height="58dp"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"
android:src="@mipmap/ic_top" />
</android.support.design.widget.CoordinatorLayout>
tips:
1、要用CoordinatorLayout进行包裹
2、app:layout_behavior="包名+类名" 这里注意的是在Behavior子类加上构造方法
public FabBehavior(Context context, AttributeSet attrs) {
super();
}
不然会报Could not inflate Behavior subclass异常
相应的自定义Behavior，这里继承的是FloatingActionButton.Behavior类
public class FabBehavior extends FloatingActionButton.Behavior {
private boolean visible = true;//是否可见
public FabBehavior(Context context, AttributeSet attrs) {
super();
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
FloatingActionButton child, View directTargetChild, View target,
int nestedScrollAxes) {
// 当观察的View（RecyclerView）发生滑动的开始的时候回调的
//nestedScrollAxes:滑动关联轴， 我们现在只关心垂直的滑动。
return nestedScrollAxes==ViewCompat.SCROLL_AXIS_VERTICAL||super.onStartNestedScroll(coordinatorLayout, child, directTargetChild,
target, nestedScrollAxes);
}
@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);
// 当观察的view滑动的时候回调的
//根据情况执行动画
if(dyConsumed>0&&visible){
//show
visible = false;
onHide(child,(Toolbar) coordinatorLayout.getChildAt(1));
}else if(dyConsumed<0){
//hide
visible = true;
onShow(child,coordinatorLayout.getChildAt(1));
}
}
public void onHide(FloatingActionButton fab, Toolbar toolbar) {
// 隐藏动画--属性动画
toolbar.animate().translationY(-toolbar.getHeight()).setInterpolator(new AccelerateInterpolator(3));
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
fab.animate().translationY(fab.getHeight()+layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));
ViewCompat.animate(fab).scaleX(0f).scaleY(0f).start();
}
public void onShow(FloatingActionButton fab, View toolbar) {
// 显示动画--属性动画
toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
fab.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
ViewCompat.animate(fab).scaleX(1f).scaleY(1f).start();
}
}
tips:
1、onStartNestedScroll() ： 当观察的View滑动开始的时候进行回调
2、onNestedScroll() ： 当观察的View滑动的时候回调
3、nestedScrollAxes ： 滑动的关联轴，这里只考虑竖直方向
当然你可以使用github上第三方库https://github.com/makovkastar/FloatingActionButton
