如何将 FAB 塑造成圆角按钮（药丸形状），类似于联系人应用程序的联系人详细信息屏幕？

Question

背景

最初，FAB（浮动操作按钮）只有一种形状：圆形，并且它只能选择在其中包含一个图标。

问题

在过去一年左右的时间里，Google 在其应用程序中添加了各种屏幕，这些屏幕显示了一个改变其大小的 FAB。例如，如果您打开它的联系人应用程序并选择一个联系人，那么您就是这样的 FAB：

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

我想知道如何制作这样的 FAB，并且还使用类似的，中间只有一个图标（没有文字），意思是圆角的。

类似的东西：

我尝试和发现的内容

起初，我试图将 FAB 的宽度设置得更大一些，但这并没有帮助，因为它坚持是一个完美的圆（适合正方形，没有边缘）。

看到FAB目前可能无法处理这个问题，我改用了MaterialCardView：

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

android:layout_width="60dp" android:layout_height="32dp" android:clickable="true" android:focusable="true" app:cardBackgroundColor="..." app:cardCornerRadius="16dp" >

                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="wrap_content" android:layout_height="wrap_content"
                        android:layout_gravity="center" app:srcCompat="..."/>
                </com.google.android.material.card.MaterialCardView>

这有效，但点击效果消失了。

我也试过MaterialButton，但是这个不支持中间的图标，只能在里面的各种文字上。

后来，我发现FAB居然有办法自定义自己的形状：

https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton#setshapeappearance

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/floatingactionbutton/FloatingActionButton.java

此外，关于扩展的 FAB，我发现了这个：

https://developer.android.com/reference/com/google/android/material/floatingactionbutton/ExtendedFloatingActionButton

https://material.io/develop/android/components/extended-floating-action-button/

所以查看它的代码，我发现它使用了药丸的形状，我尝试做与普通 FAB 类似的事情:

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
    }
}

遗憾的是，这根本不起作用。还是圆形的。

问题

如何设置一个带圆角且里面只有一个图标的FAB（带点击效果）？

Answer 1

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

Answer 2

这不是完美的答案，因为您正在寻找没有文本的 ExtendedFAB。

但是，您可以使用 MaterialButton 使用属性 shapeAppearanceOverlay 更改组件的形状来获得类似的东西。

<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:iconGravity 不支持 center 值。使图标居中的解决方法是使用这些属性：

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

如果您想覆盖默认样式的某些主题属性，现在可以使用新的 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>

如何将 FAB 塑造成圆角按钮（药丸形状），类似于联系人应用程序的联系人详细信息屏幕？

How to shape a FAB to be rounded corners button (pill shape), similar to in contact-details screen of Contacts app?

android

material-design

floating-action-button

material-components-android

material-components

背景

问题

我尝试和发现的内容

问题