Titanium SDK 中的 Android 浮动操作按钮(FloatingActionButton)详解-CSDN博客

Titanium SDK 中的 Android 浮动操作按钮(FloatingActionButton)详解

什么是浮动操作按钮(FAB)

浮动操作按钮(Floating Action Button，简称FAB)是Android Material Design规范中的一种重要UI组件。它是一个圆形按钮，悬浮在界面内容之上，通常用于触发应用中的主要操作。在Titanium SDK中，开发者可以通过Titanium.UI.Android.FloatingActionButton类来创建和使用这一组件。

基本特性

FloatingActionButton继承自Titanium.UI.View，但有一些特殊限制：

事件限制：不支持常见的触摸事件如singletap、longpress等，仅支持click事件
方法限制：不支持视图层级操作如add、remove等
属性限制：不支持常规视图的许多样式属性如borderRadius、backgroundGradient等

这些限制是因为FAB需要遵循Material Design规范，保持一致的视觉和行为表现。

核心属性详解

1. image属性

image属性用于设置FAB中显示的图标，支持三种类型：

字符串：图片文件路径
数字：系统内置图标资源ID
Blob对象：图片数据

这是FAB最重要的属性之一，通常使用一个简洁明了的图标来表示其主要功能。

2. iconSize属性

这是一个只读属性，用于指定FAB的预定义尺寸：

"default"：标准尺寸(56dp)
"mini"：迷你尺寸(40dp)

如果需要自定义尺寸，应该使用customSize属性。

3. customSize属性

当预定义尺寸不能满足需求时，可以使用customSize来自定义FAB的宽度和高度（单位为dp）。

4. maxImageSize属性

用于限制FAB内部图标的最大尺寸，确保图标不会过大而影响美观。

使用示例

下面是一个完整的FAB创建和使用示例：

// 创建主窗口
const win = Ti.UI.createWindow({
  backgroundColor: '#fff'
});

// 创建浮动操作按钮
const fab = Ti.UI.Android.createFloatingActionButton({
  bottom: 20,       // 距离底部20dp
  right: 20,        // 距离右侧20dp
  image: '/images/add.png',  // 使用自定义图标
  iconSize: 'default',       // 使用默认尺寸
  backgroundColor: '#FF4081' // 设置背景色
});

// 添加点击事件
fab.addEventListener('click', function(e) {
  Ti.API.info('FAB被点击了！');
});

// 将FAB添加到窗口并打开
win.add(fab);
win.open();