Material Components Android 中 FloatingActionButton 阴影控制问题解析

问题背景

在 Material Components Android 库的 1.13.0-alpha12 版本中，开发者发现 FloatingActionButton (FAB) 的阴影控制方式发生了变化。原本通过 app:elevation、app:pressedTranslationZ 和 app:hoveredFocusedTranslationZ 属性可以轻松控制 FAB 的阴影效果，但在新版本中这些方法失效了。

问题表现

开发者需要在 Navigation Rail 的标题部分使用 FAB 组件，并希望完全去除其阴影效果以符合设计规范。在 alpha11 及之前版本中，通过设置以下属性可以实现无阴影效果：

app:elevation="0dp"
app:hoveredFocusedTranslationZ="0dp"
app:pressedTranslationZ="0dp"

但在 alpha12 版本中，这些设置不再生效，FAB 仍然显示默认的阴影效果。

技术分析

阴影控制机制演变

Material Components Android 库在升级到 alpha12 版本时，对阴影控制机制做了重要调整：

1. 最低 API 级别提升：库的最低支持 API 级别提升到了 21（Android 5.0）
2. 状态动画机制变化：在 API 21+ 设备上，FAB 的阴影效果现在主要通过 stateListAnimator 属性控制

新旧版本对比

在旧版本中（alpha11 及之前）：

• 阴影控制主要通过 elevation 相关属性
• 兼容性考虑支持多种控制方式

在新版本中（alpha12 及之后）：

• 优先使用 stateListAnimator 控制阴影状态
• 传统的 elevation 属性在特定情况下可能被忽略

解决方案

要完全去除 FAB 的阴影效果，现在需要设置 stateListAnimator 为 null：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/add"
    style="?attr/floatingActionButtonPrimaryStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/add"
    android:stateListAnimator="@null"
    app:srcCompat="@drawable/add" />

替代方案说明

1. 完全去除阴影：

   • 如上所示，设置 android:stateListAnimator="@null"

2. 自定义阴影效果：

   • 可以创建自定义的 StateListAnimator 资源文件
   • 在其中定义不同状态下的 elevation 值

最佳实践建议

1. 统一控制方式：

   • 对于 API 21+ 项目，优先使用 stateListAnimator
   • 保持代码的一致性和可维护性

2. 版本兼容性考虑：

   • 虽然现在最低支持 API 21，但如果有跨版本需求
   • 可以同时设置新旧两种属性确保效果

3. 设计一致性：

   • 在去除阴影时，考虑整体 Material Design 规范
   • 确保修改不会影响用户对交互元素的认知

总结

Material Components Android 库的持续演进带来了更好的性能和更规范的 API 设计，但也可能导致一些旧有用法失效。理解组件背后的控制机制变化，有助于开发者快速适应新版本并找到正确的解决方案。对于 FAB 的阴影控制，现在应该优先使用 stateListAnimator 属性来实现精细化的效果定制。