Android中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, view child, view target, int dxconsumed, int dyconsumed, int dxunconsumed, int dyunconsumed) {
    super.onnestedscroll(coordinatorlayout, child, target, 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根据页面列表的上下滑动来隐藏和显示。

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