Android 如何将FAB塑造成圆角按钮（药丸形状），类似于Contacts应用程序的contact details屏幕？ 背景

最初，FAB（浮动动作按钮）只有一个形状：圆形，并且它只有一个图标的选项

问题 在过去一年左右的时间里，谷歌在其应用程序中增加了各种屏幕，显示了一家改变规模的工厂。例如，如果您打开其“联系人”应用程序并选择一个联系人，则您可以创建一个FAB，例如：

如果你稍微滚动一下，它就会变成一个圆圈，里面只有一个图标：

我想知道如何制作这样的Fab，并且在中间使用一个类似的图标（没有文本），这意味着圆角一个。 诸如此类：

我的努力和发现 起初，我试图将晶圆厂的宽度设置得更大，但这没有帮助，因为它坚持要成为一个完美的圆（适合正方形，没有边缘）

鉴于FAB目前可能无法处理此问题，我改用MaterialCardViews：

                <com.google.android.material.card.MaterialCardView

遗憾的是，这根本不起作用。它仍然是圆形的

问题

---

如何设置具有圆角和内部单个图标的晶圆厂（具有点击效果）？

您可以使用CoordinatorLayout.Behavior将形状、效果应用于android中的任何视图，在Recyclerview的滚动事件中。

这不是一个完美的答案，因为您正在寻找一个没有文本的扩展晶圆厂

但是，您可以通过使用属性

shapeAppearanceOverlay

更改组件的形状来获得类似的结果

如果您想从默认样式覆盖某些主题属性，现在可以使用新的

materialThemeOverlay

属性

比如：

<style name="MtButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/MyButtonThemeOverlay</item>
</style>

<style name="MyButtonThemeOverlay">
  <item name="colorPrimary">@color/...</item>
  <item name="colorOnSurface">@color/....</item>
</style>

@样式/MyButtonThemeOverlay
@颜色/。。。
@颜色/。。。。

我现在没有任何可以滚动的东西，我也不希望按钮改变形状。我希望它保持这个形状。当我写“相似”时，是关于形状，而不是行为。我不介意它不是一个真正的晶圆厂。我只需要它看起来相似，行为相似。但它是否具有立面，包括单击时的立面动画？@androiddeveloper它是一个带有材质主题的普通材质按钮。默认样式表示带有涟漪动画的提升按钮。似乎工作正常。你忘了提一些东西，所以我把它们加到你的答案里了。你能解释一下最后一句话吗？为什么需要这种变通方法？

app:iconGravity

是否具有“中心”价值？@androiddeveloper感谢您的编辑。关于app:iconGravity：这只是一个解决办法。如果没有这些值，“材质”按钮将使用默认样式，并且只对齐按钮左侧的图标，而不对齐文本。目前还没有iconGravity=center，我也没有找到更好的解决方案。不过我注意到了一个问题。当我使用MaterialCardView解决方案的宽度和高度大小，并将其设置为您的解决方案时，它的高度变小了。另外，不确定是否应该是这种方式，但当禁用按钮时，图标会改变其颜色，与我所做的解决方案相比，这让它保持不变。怎么会？应该是这样吗？有办法控制它吗？以下是显示这些问题的示例应用程序：

class PillFab @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    FloatingActionButton(context, attrs, defStyleAttr) {
    init {
        val shapeAppearanceModel =
            ShapeAppearanceModel(context, attrs, defStyleAttr, DEF_STYLE_RES, ShapeAppearanceModel.PILL)
        shapeAppearance = shapeAppearanceModel
    }

    companion object {
        private val DEF_STYLE_RES = R.style.Widget_MaterialComponents_FloatingActionButton
    }
}

<com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            app:icon="@drawable/outline_cached_black_18dp"
            app:iconPadding="0dp"
            app:iconGravity="textStart"
            />

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

            app:iconPadding="0dp"
            app:iconGravity="textStart"

<style name="MtButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/MyButtonThemeOverlay</item>
</style>

<style name="MyButtonThemeOverlay">
  <item name="colorPrimary">@color/...</item>
  <item name="colorOnSurface">@color/....</item>
</style>