Android中FloatingActionButton实现悬浮按钮实例

发布时间 - 2026-01-11 00:49:09    点击率:

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就不上传了.

效果如下:

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


# android悬浮按钮  # 安卓悬浮按钮的实现  # android  # 悬浮按钮菜单  # Android开发之FloatingActionButton悬浮按钮基本使用、字体、颜色用法示例  # Android自定义可拖拽的悬浮按钮DragFloatingActionButton  # Android 中FloatingActionButton(悬浮按钮)实例详解  # Android仿知乎悬浮功能按钮FloatingActionButton效果  # Android悬浮按钮点击返回顶部FloatingActionButton  # Android开发悬浮按钮 Floating ActionButton的实现方法  # Android实现悬浮可拖拽的Button  # 不上  # 传了  # 大家多多  # 就可以  # 其实很简单  # gravity  # center_vertical  # layout_weight  # layout_toLeftOf  # white  # textSize  # color  # paddingBottom  # textColor  # LinearLayout  # visibility  # background  # TextView  # layout_gravity  # horizontal 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel如何配置和使用缓存?(Redis代码示例)  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  香港服务器网站生成指南:免费资源整合与高速稳定配置方案  UC浏览器如何切换小说阅读源_UC浏览器阅读源切换【方法】  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  标题:Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  使用豆包 AI 辅助进行简单网页 HTML 结构设计  Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布  简历在线制作网站免费版,如何创建个人简历?  Laravel如何与Docker(Sail)协同开发?(环境搭建教程)  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  新三国志曹操传主线渭水交兵攻略  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛,就是里面都是武汉人的?  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  如何在IIS中配置站点IP、端口及主机头?  香港服务器WordPress建站指南:SEO优化与高效部署策略  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  如何基于云服务器快速搭建网站及云盘系统?  谷歌浏览器下载文件时中断怎么办 Google Chrome下载管理修复  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  如何安全更换建站之星模板并保留数据?  小视频制作网站有哪些,有什么看国内小视频的网站,求推荐?  如何快速查询域名建站关键信息?  湖南网站制作公司,湖南上善若水科技有限公司做什么的?  如何为不同团队 ID 动态生成多个非值班状态按钮  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  如何彻底卸载建站之星软件?  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  JS实现鼠标移上去显示图片或微信二维码  三星、SK海力士获美批准:可向中国出口芯片制造设备  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  利用vue写todolist单页应用  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  Laravel怎么在Controller之外的地方验证数据  Laravel如何实现API速率限制?(Rate Limiting教程)  Laravel Telescope怎么调试_使用Laravel Telescope进行应用监控与调试  如何快速打造个性化非模板自助建站?  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  nodejs redis 发布订阅机制封装实现方法及实例代码  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  Laravel如何使用Gate和Policy进行授权?(权限控制)  Laravel观察者模式如何使用_Laravel Model Observer配置  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  Laravel如何为API生成Swagger或OpenAPI文档  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】