悬浮按钮

  • 更新时间:2025-12-02 10:12:46

悬浮按钮-fab

原生类型:{com.google.android.material.floatingactionbutton.FloatingActionButton}

一般配合帧布局:将按钮放在帧布局的上层来实现悬浮效果。

一、常用属性

color - 主题颜色

设置主题颜色

<ui>
    <statusbar />
    <linear w="max" gravity="center" h="max" padding="20">
        <fab color="#518855" />
    </linear>
</ui>

icon - 图标

设置图标

<ui>
    <statusbar />
    <linear w="max" gravity="center" h="max" padding="20">
        <fab icon="ic_menu" />
    </linear>
</ui>

path - 路径图标

设置路径图标

<ui>
    <statusbar />
    <linear w="max" gravity="center" h="max" padding="20">
        <fab path="/res/girl-1.png" />
    </linear>
</ui>

iconTint - 图标颜色

设置图标颜色

<ui>
    <statusbar />
    <linear w="max" gravity="center" h="max" padding="20">
        <fab icon="ic_home" iconTint="#0000FF" />
    </linear>
</ui>

tip - 提示

设置提示

安卓8+才支持这个配置

<ui>
    <statusbar />
    <linear w="max" gravity="center" h="max" padding="20">
        <fab tip="我是按钮" />
    </linear>
</ui>

radius - 弧度

设置弧度

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center" h="max" padding="20">
        <fab radius="10" margin="5" />
        <fab radius="20" margin="5" />
        <fab radius="45" margin="5" />
    </linear>
</ui>

size - 尺寸

设置尺寸

<ui>
    <statusbar />
    <linear w="max" dir="h" gravity="center" h="max" padding="20">
        <fab size="35" margin="5" />
        <fab size="40" margin="5" />
        <fab size="45" margin="5" />
    </linear>
</ui>

二、常用函数

show()

显示悬浮按钮

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let fab = ui.id("mFab");
//显示控件
fab.show();

hide()

隐藏悬浮按钮

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let fab = ui.id("mFab");
//隐藏控件
fab.hide();

setColor(color)

设置主题颜色

  • 参数 : color {String} 颜色

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let fab = ui.id("mFab");
//设置主题颜色
fab.setColor("#1E1F22");

setIcon(icon)

设置图标

  • 参数 : icon {String} 图片名称

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let fab = ui.id("mFab");
//设置图标
fab.setIcon("logo_ag");

setTip(tip)

设置提示信息

  • 参数 : tip {String} 提示信息

//解析布局,获得ui对象
let ui = $ui.layout("./mUi.xml");
//获取控件
let fab = ui.id("mFab");
//设置提示信息
fab.setTip("开始执行");