Android中FloatingActionButton的显示与隐藏示例

概述FloatingActionButton简介FloatingActionButton（FAB）是Android5.0新特性――MaterialDesign中的一个控件，是一种悬浮的按钮，并且是ImageView的子类，因此它具备ImageView的全部属性。一般FloatingActionButton结

floatingActionbutton简介

floatingActionbutton（FAB） 是AndroID 5.0 新特性――Material Design 中的一个控件，是一种悬浮的按钮，并且是 ImageVIEw 的子类，因此它具备ImageVIEw的全部属性。一般floatingActionbutton 结合 CoordinatorLayout 使用，即可实现悬浮在任意控件的任意位置。

floatingActionbutton使用

本文主要实现的效果：Toolbar和floatingActionbutton根据页面列表的上下滑动来隐藏和显示。

效果图：

当我上滑列表时：隐藏Toolbar和floatingActionbutton

当我下滑列表的时：显示Toolbar和floatingActionbutton

实现方法（一）

监听页面列表（RecyclerVIEw）的滑动回调事件，通过回调来决定Toolbar和FAB的显示和隐藏。

1）封装RecyclerVIEw.OnScrollListener，封装的原因是为了让Activity显得没那么臃肿。

public class MyScrollListener extends RecyclerVIEw.OnScrollListener {  private HIDeAndShowListener mHIDeAndShowListener;  private static final int THRESHolD = 20;  private int distance = 0;  private boolean visible = true;  public MyScrollListener(HIDeAndShowListener hIDeAndShowListener) {    mHIDeAndShowListener = hIDeAndShowListener;  }  @OverrIDe  public voID onScrolled(RecyclerVIEw recyclerVIEw,int dx,int dy) {    super.onScrolled(recyclerVIEw,dx,dy);    /**     * dy:Y轴方向的增量     * 有正和负     * 当正在执行动画的时候，就不要再执行了     */    Log.i("tag","dy--->"+dy);    if (distance > THRESHolD && visible) {      //隐藏动画      visible = false;      mHIDeAndShowListener.hIDe();      distance = 0;    } else if (distance < -20 && !visible) {      //显示动画      visible = true;      mHIDeAndShowListener.show();      distance = 0;    }    if (visible && dy > 0 || (!visible && dy < 0)) {      distance += dy;    }  }  public interface HIDeAndShowListener {    voID hIDe();    voID show();  }}

主要在onScrolled方法计算判断FAB的显示和隐藏，然后设置HIDeAndShowListener回调，调用相应的显示和隐藏的方法即可。

2）RecyclerVIEw添加OnScrollListener监听并且设置HIDeAndShowListener回调，通过HIDeAndShowListener的hIDe()和show()来设置FAB的隐藏和显示。

public class FABActivity extends AppCompatActivity {  private RecyclerVIEw mRecyclerVIEw;  private floatingActionbutton fab;  private Toolbar toolbar;  @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentVIEw(R.layout.activity_fab);    toolbar = (Toolbar) findVIEwByID(R.ID.toolbar);    mRecyclerVIEw = (RecyclerVIEw) findVIEwByID(R.ID.recyclervIEw);    setSupportActionbar(toolbar);    setTitle("FAB");    fab = (floatingActionbutton) findVIEwByID(R.ID.fab);    fab.setonClickListener(new VIEw.OnClickListener() {      @OverrIDe      public voID onClick(VIEw vIEw) {        Snackbar.make(vIEw,"Replace with your own action",Snackbar.LENGTH_LONG)            .setAction("Action",null).show();      }    });    mRecyclerVIEw.setLayoutManager(new linearlayoutmanager(this));    List<String> List = new ArrayList<>();    for (int i = 0; i < 60; i++) {      List.add("Item"+i);    }    FabRecyclerAdapter adapter = new FabRecyclerAdapter(List);    mRecyclerVIEw.setAdapter(adapter);    setListener();  }  /**   * 添加ScrollListener监听   * 以及HIDeAndShowListener回调   */  private voID setListener() {    mRecyclerVIEw.addOnScrollListener(new MyScrollListener(new MyScrollListener.HIDeAndShowListener() {      @OverrIDe      public voID hIDe() {        // 隐藏动画--属性动画        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 show() {        // 显示动画--属性动画        toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));        relativeLayout.LayoutParams layoutParams = (relativeLayout.LayoutParams) fab.getLayoutParams();        fab.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));      }    }));  }}

在hIDe()和show()方法中，设置了FAB的隐藏和显示的动画。

接下来给出RecyclerVIEw的Adapter

public class FabRecyclerAdapter extends RecyclerVIEw.Adapter {  private List<String> List;  public FabRecyclerAdapter(List<String> List) {    this.List = List;  }  @OverrIDe  public RecyclerVIEw.VIEwHolder onCreateVIEwHolder(VIEwGroup parent,int vIEwType) {    VIEw vIEw = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item,parent,false);    return new MyVIEwHolder(vIEw);  }  @OverrIDe  public voID onBindVIEwHolder(RecyclerVIEw.VIEwHolder holder,int position) {    String str = List.get(position);    MyVIEwHolder hd = (MyVIEwHolder) holder;    hd.mbutton.setText(str);  }  @OverrIDe  public int getItemCount() {    if (List != null) {      return List.size();    }    return 0;  }  class MyVIEwHolder extends RecyclerVIEw.VIEwHolder {    private button mbutton;    public MyVIEwHolder(VIEw itemVIEw) {      super(itemVIEw);      mbutton = (button) itemVIEw.findVIEwByID(R.ID.btn);    }  }}

MyVIEwHolder的xml文件

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  androID:orIEntation="vertical" >  <button    androID:ID="@+ID/btn"    androID:layout_margin="5dp"    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"    /></linearLayout>

Activity的布局文件

<?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="com.main.fab.FABActivity">  <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"    /></relativeLayout>

以上就是实现Toolbar和floatingActionbutton根据页面列表的上下滑动来隐藏和显示方法一的这个过程。

实现方法（二）

通过封装CoordinatorLayout.Behavior，通过它的onnestedScroll方法计算判断显示和隐藏，同时给Toolbar和FAB设置app:layout_behavior，该属性指定使用封装的CoordinatorLayout.Behavior即可。

1）封装CoordinatorLayout.Behavior

public class FabBehavior extends CoordinatorLayout.Behavior {  public FabBehavior() {  }  public FabBehavior(Context context,AttributeSet attrs) {    super(context,attrs);  }  private boolean visible = true;//是否可见  @OverrIDe  public boolean onStartnestedScroll(CoordinatorLayout coordinatorLayout,VIEw child,VIEw directTargetChild,VIEw target,int nestedScrollAxes) {    //被观察者（RecyclerVIEw）发生滑动的开始的时候回调的    //nestedScrollAxes:滑动关联轴，现在只关心垂直的滑动。    return nestedScrollAxes == VIEwCompat.SCRolL_AXIS_VERTICAL || super.onStartnestedScroll(coordinatorLayout,child,directTargetChild,target,nestedScrollAxes);  }  @OverrIDe  public voID onnestedScroll(CoordinatorLayout coordinatorLayout,int dxconsumed,int dyConsumed,int dxUnconsumed,int dyUnconsumed) {    super.onnestedScroll(coordinatorLayout,dxconsumed,dyConsumed,dxUnconsumed,dyUnconsumed);    //被观察者滑动的时候回调的    if (dyConsumed > 0 && visible) {      //show      visible = false;      onHIDe(child);    } else if (dyConsumed < 0) {      //hIDe      visible = true;      onShow(child);    }  }  public voID onHIDe(VIEw vIEw) {    // 隐藏动画--属性动画    if (vIEw instanceof Toolbar){      VIEwCompat.animate(vIEw).translationY(-(vIEw.getHeight() * 2)).setInterpolator(new AccelerateInterpolator(3));    }else if (vIEw instanceof floatingActionbutton){      VIEwCompat.animate(vIEw).translationY(vIEw.getHeight() * 2).setInterpolator(new AccelerateInterpolator(3));    }else{    }  }  public voID onShow(VIEw vIEw) {    // 显示动画--属性动画    VIEwCompat.animate(vIEw).translationY(0).setInterpolator(new DecelerateInterpolator(3));  }}

onStartnestedScroll：列表（RecyclerVIEw）刚开始滑动时候会回调该方法，需要在方法内设置滑动关联轴。这里只需要垂直方向上的滑动即可。

onnestedScroll：滑动的时候不断的回调该方法，通过dyConsumed来判断是上滑还是下滑。

2）Toolbar和FAB设置app:layout_behavior

<?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"  xmlns:tools="http://schemas.androID.com/tools"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  tools:context="com.main.behavior.BehaviorActivity">  <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"    app:layout_behavior="com.main.behavior.FabBehavior"/>  <androID.support.design.Widget.floatingActionbutton    androID:ID="@+ID/fab"    androID:layout_wIDth="58dp"    androID:layout_height="58dp"    androID:layout_gravity="bottom|end"    androID:layout_margin="16dp"    androID:src="@mipmap/ic_launcher"    app:layout_behavior="com.main.behavior.FabBehavior"/></androID.support.design.Widget.CoordinatorLayout>

在布局文件中给Toolbar和FAB直接设置app:layout_behavior即可。

BehaviorActivity.java

/** * floatActionbutton * 滑动显示与隐藏 */public class BehaviorActivity extends AppCompatActivity {  private RecyclerVIEw mRecyclerVIEw;  private Toolbar toolbar;  private floatingActionbutton fab;  @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentVIEw(R.layout.activity_behavior);    mRecyclerVIEw = (RecyclerVIEw)findVIEwByID(R.ID.recyclervIEw);    fab = (floatingActionbutton)findVIEwByID(R.ID.fab);    toolbar = (Toolbar)findVIEwByID(R.ID.toolbar);    setSupportActionbar(toolbar);    setTitle("FAB");    mRecyclerVIEw.setLayoutManager(new linearlayoutmanager(this));    List<String> List = new ArrayList<>();    for (int i = 0; i < 60; i++) {      List.add("Item"+i);    }    FabRecyclerAdapter adapter = new FabRecyclerAdapter(List);    mRecyclerVIEw.setAdapter(adapter);  }}

这样就可以使用该方案实现Toolbar和floatingActionbutton根据页面列表的上下滑动来隐藏和显示。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android中FloatingActionButton的显示与隐藏示例全部内容，希望文章能够帮你解决Android中FloatingActionButton的显示与隐藏示例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。