Android中FloatingActionButton实现悬浮按钮实例

android中floatingactionbutton(悬浮按钮) 使用不是特别多,常规性app应用中很少使用该控件. 当然他的使用方法其实很简单.直接上代码:

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"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <checkbox
    android:id="@+id/cbdelay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginleft="10dp"
    android:layout_margintop="10dp"
    android:text="delay" />

  <relativelayout
    android:id="@+id/rladdbill"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignparentstart="true"
    android:layout_below="@+id/fab01add"
    android:layout_marginleft="10dp"
    android:background="#00000000"
    android:visibility="gone">

    <linearlayout
      android:id="@+id/ll01"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignparentstart="true"
      android:layout_below="@+id/ll02"
      android:orientation="horizontal">

      <textview
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_toleftof="@+id/minifab01"
        android:layout_weight="1"
        android:gravity="right"
        android:paddingbottom="5dp"
        android:text="销售单"
        android:textcolor="@android:color/white"
        android:textsize="15sp"
        android:visibility="gone" />

      <android.support.design.widget.floatingactionbutton
        android:id="@+id/minifab01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginright="25dp"
        android:src="@mipmap/btn_play_normal"
        app:backgroundtint="@color/coloraccent"
        app:elevation="5dp"
        app:fabsize="mini" />
    </linearlayout>

    <linearlayout
      android:id="@+id/ll02"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignparentstart="true"
      android:layout_below="@+id/ll03"
      android:orientation="horizontal">

      <textview
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_toleftof="@+id/minifab02"
        android:layout_weight="1"
        android:gravity="right"
        android:paddingbottom="5dp"
        android:text="销售退货"
        android:textcolor="@android:color/white"
        android:textsize="15sp"
        android:visibility="gone" />

      <android.support.design.widget.floatingactionbutton
        android:id="@+id/minifab02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginright="25dp"
        android:src="@mipmap/btn_play_normal"
        app:backgroundtint="@color/coloraccent"
        app:elevation="5dp"
        app:fabsize="mini" />
    </linearlayout>

    <linearlayout
      android:id="@+id/ll03"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignparentstart="true"
      android:layout_alignparenttop="true"
      android:orientation="horizontal">

      <textview
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_toleftof="@+id/minifab02"
        android:layout_weight="1"
        android:gravity="right"
        android:paddingbottom="5dp"
        android:text="收款单"
        android:textcolor="@android:color/white"
        android:textsize="15sp"
        android:visibility="gone" />

      <android.support.design.widget.floatingactionbutton
        android:id="@+id/minifab03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginright="25dp"
        android:src="@mipmap/btn_play_normal"
        app:backgroundtint="@color/coloraccent"
        app:elevation="5dp"
        app:fabsize="mini" />
    </linearlayout>
  </relativelayout>

  <android.support.design.widget.floatingactionbutton
    android:id="@+id/fab01add"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignparentstart="true"
    android:layout_below="@+id/cbdelay"
    android:layout_marginright="15dp"
    android:layout_margintop="22dp"
    android:src="@mipmap/btn_play_normal"
    app:backgroundtint="#31bfcf"
    app:elevation="5dp"
    app:fabsize="normal"
    app:ripplecolor="#e7d161" />
</relativelayout>

mainactivity:

package com.example.liupanpan.floatingactionbuttondemo;

import android.animation.animatorinflater;
import android.animation.animatorset;
import android.os.bundle;
import android.support.design.widget.floatingactionbutton;
import android.support.v7.app.appcompatactivity;
import android.view.view;
import android.widget.checkbox;
import android.widget.linearlayout;
import android.widget.relativelayout;

public class mainactivity extends appcompatactivity implements view.onclicklistener {
  private checkbox cbdelay;
  private floatingactionbutton fab01add;
  private boolean isadd = false;
  private relativelayout rladdbill;
  private int[] llid = new int[]{r.id.ll01, r.id.ll02, r.id.ll03};
  private linearlayout[] ll = new linearlayout[llid.length];
  private int[] fabid = new int[]{r.id.minifab01, r.id.minifab02, r.id.minifab03};
  private floatingactionbutton[] fab = new floatingactionbutton[fabid.length];
  private animatorset addbilltranslate1;
  private animatorset addbilltranslate2;
  private animatorset addbilltranslate3;
  private animatorset addbilltranslate4;
  private animatorset addbilltranslate5;
  private animatorset addbilltranslate6;

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.basic_fab_activity);
    initview();
    setdefaultvalues();
    bindevents();
  }

  private void initview() {
    cbdelay = (checkbox) findviewbyid(r.id.cbdelay);
    fab01add = (floatingactionbutton) findviewbyid(r.id.fab01add);
    rladdbill = (relativelayout) findviewbyid(r.id.rladdbill);
    for (int i = 0; i < llid.length; i++) {
      ll[i] = (linearlayout) findviewbyid(llid[i]);
    }
    for (int i = 0; i < fabid.length; i++) {
      fab[i] = (floatingactionbutton) findviewbyid(fabid[i]);
    }
  }

  private void setdefaultvalues() {
    addbilltranslate1 = (animatorset) animatorinflater.loadanimator(this, r.animator.add_bill_anim);
    addbilltranslate2 = (animatorset) animatorinflater.loadanimator(this, r.animator.add_bill_anim);
    addbilltranslate3 = (animatorset) animatorinflater.loadanimator(this, r.animator.add_bill_anim);
//    addbilltranslate4 = (animatorset) animatorinflater.loadanimator(this, r.animator.add_bill_anim);
//    addbilltranslate5 = (animatorset) animatorinflater.loadanimator(this, r.animator.add_bill_anim);
//    addbilltranslate6 = (animatorset) animatorinflater.loadanimator(this, r.animator.add_bill_anim);
  }

  private void bindevents() {
    fab01add.setonclicklistener(this);
    for (int i = 0; i < fabid.length; i++) {
      fab[i].setonclicklistener(this);
    }
  }

  @override
  public void onclick(view v) {
    switch (v.getid()) {
      case r.id.fab01add:
        fab01add.setimageresource(isadd ? r.mipmap.ic_launcher_round : r.mipmap.ic_launcher_round);
        isadd = !isadd;
        rladdbill.setvisibility(isadd ? view.visible : view.gone);
        if (isadd) {
          addbilltranslate1.settarget(ll[0]);
          addbilltranslate1.start();
          addbilltranslate2.settarget(ll[1]);
          addbilltranslate2.setstartdelay(cbdelay.ischecked() ? 50 : 0);
          addbilltranslate2.start();
          addbilltranslate3.settarget(ll[2]);
          addbilltranslate3.setstartdelay(cbdelay.ischecked() ? 100 : 0);
          addbilltranslate3.start();
//          addbilltranslate4.settarget(ll[3]);
//          addbilltranslate4.setstartdelay(cbdelay.ischecked() ? 250 : 0);
//          addbilltranslate4.start();
//          addbilltranslate5.settarget(ll[4]);
//          addbilltranslate5.setstartdelay(cbdelay.ischecked() ? 300 : 0);
//          addbilltranslate5.start();
//          addbilltranslate6.settarget(ll[5]);
//          addbilltranslate6.setstartdelay(cbdelay.ischecked() ? 350 : 0);
//          addbilltranslate6.start();
        }
        break;
      case r.id.minifab01:
        hidefabmenu();
        break;
      case r.id.minifab02:

        hidefabmenu();
        break;
      case r.id.minifab03:
        hidefabmenu();
        break;
      default:
        break;

    }
  }

  private void hidefabmenu() {
    rladdbill.setvisibility(view.gone);
    fab01add.setimageresource(r.mipmap.ic_launcher_round);
    isadd = false;
  }
}

运行程序,就可以实现当前的效果.问题xml的图片请自己替换一下,demo就不上传了.

效果如下：

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