在 Android 上“模拟” FloatingActionButton 的最佳方式是什么？（加速器钛）答案

【问题标题】：Best way to "emulate" a FloatingActionButton on Android? (Appcelerator Titanium)在 Android 上“模拟” FloatingActionButton 的最佳方式是什么？（加速器钛）
【发布时间】：2017-10-30 09:17:10
【问题描述】：

截至今天，Appcelerator Titanium 上还没有对 FloatingActionButton 的原生支持，所以我想知道哪个是最好的模拟方式。

我想创建一个像这样的 FloatingActionButton：

我尝试了不同的方法，但似乎没有一个是 100% 准确的。

我看到 GitHub 上有几个模块，但其中一个不接受图标，或者至少我不知道如何使用它们 (https://github.com/k0sukey/be.k0suke.tifab)，另一个需要我启用 Hyperloop并禁用 LiveView (https://github.com/appcelerator-forks/loop-modules.Ti.FAB)，这会减慢编译时间，从而让我浪费很多时间。

我也尝试创建一个带有 ImageView 的圆形视图，但它没有正确显示，背景颜色没有覆盖所有视图：

我的代码如下所示：

XML：

<View id="locateView">
    <ImageView id="locateUser" touchEnabled="false" />
</View>

JS：

// This is half of 32dp
Alloy.Globals.borderRadiusFAB = ( parseInt("32dp") * (Titanium.Platform.displayCaps.dpi / 160));

TSS：

"#locateView" : {
    bottom: "12dp",
    right: "12dp",
    height: "48dp",
    width: "48dp",
    borderRadius : Alloy.Globals.borderRadiusFAB,
    backgroundColor: '#80FFFFFF',
    touchFeedback: true,
    touchFeedbackColor: "#808080",
    elevation: 10
}

"#locateUser" : {
    height: "32dp",
    width: "32dp",
    image : "/icons/my_location.png"
}

我使用的是 Titanium SDK 6.2.0。

【问题讨论】：

标签： android titanium appcelerator

【解决方案1】：

我认为唯一的问题是使用 ImageView 似乎有一些背景颜色。有多种方法可以创建此按钮，但这里有一个示例应用程序，它创建了几乎 99% 相似的 FAB 按钮。

https://drive.google.com/file/d/0B4ZdsEjK2ySIMXd1YS15ZTk1TDg/view?usp=sharing

它包含一个示例源代码，说明如何使用单一代码库为 iOS 和 Android 创建更好的 FAB 按钮。它还包含一个 Material Font 文件，该文件展示了如何使用 Fonts 创建矢量图像/图标而不是 ImageView。

这里是阅读更多关于在 ImageView 的地方使用 Labels 的链接。

https://medium.com/all-titanium/cool-technique-to-use-vector-icons-using-iconic-font-files-aab4513aa8da

此示例代码将创建如下图标：

【讨论】：

您的解决方案有效，但我尝试为“.floating-btn”的背景颜色添加透明度，但我仍然遇到同样的问题，它没有填满整个视图：i.imgur.com/t0MflnM.png Appcelerator 错误？
我从未尝试过使用 touchFeedback 设置透明度，因为文档 Appc 说 只有当 backgroundColor 是纯色时才会应用触摸反馈。
@PrashantSaini 我已经尝试过您的解决方案，但在 Android 上似乎没有通常的浮动操作按钮涟漪效应。我将如何启用它？谢谢！
首先，如果你的同一个视图的背景颜色是透明的，你就看不到触摸反馈的效果。简单地说，反馈颜色透明度与bg颜色直接相关。其次，您必须确保具有反馈颜色的视图应该能够接收触摸事件，并且它的子视图应该将 touchEnabled 设置为 false。如果您能分享您的简单 XML 和 tss 代码更好，我们可以更快地提供帮助。