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

Question

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

在过去的一年左右，谷歌在其应用程序中增加了各种屏幕，显示了一个可以改变大小的晶圆厂。例如，如果你打开它的联系人应用程序并选择一个联系人，你就像FAB一样：

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

大概是这样的：

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

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

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

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

https://developer.android.com/reference/com/google/android/material/floatingActionButton/floatingActionButton#setShapeAppearing

https://github.com/Material-Components/Material-Components-Android/blob/master/lib/java/com/google/Android/Material/floatingActionButton/floatingActionButton.java

此外，对于不断扩大的晶圆厂，我发现了以下内容：

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

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

因此，查看它的代码，我发现它使用了一个药丸的形状，我试图做一个类似于普通晶圆厂的事情：

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

我如何设置一个晶圆厂（与点击效果），有圆角和一个单一的图标在里面？

Answer 1

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

但是，您可以使用MaterialButton获得类似的内容，使用属性ShapePapeanceOverlay更改组件的形状。

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