android - 如何使用自定义形状的 fab 按钮制作底部栏？

Question

我想制作一个带有附加工厂按钮的底部栏，如下图所示。如果有人知道那种底部带有晶圆厂的不同形状的按钮库，那么请向我推荐。

下面给出的图像用这样的工厂制作一个底栏。

Answer 1

这只是一个可以改进代码的想法。您可以使用属性
更改 的形状：FloatingActionButtonshapeAppearanceOverlay

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:shapeAppearanceOverlay="@style/cutfab"
    ..>

和：

<style name="cutfab">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">15dp</item>
</style>

然后你可以BottomAppBar在你的布局中定义：

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    app:fabAlignmentMode="center"
    app:fabCradleVerticalOffset="14dp"
    app:fabCradleMargin="8dp" />

最后，您可以申请BottomAppBara TopEdgeTreatment。就像是：

BottomAppBar bar = findViewById(R.id.bar);
BottomAppBarTopEdgeTreatment topEdge = new BottomAppBarCutCornersTopEdge(
        bar.getFabCradleMargin(),
        bar.getFabCradleRoundedCornerRadius(),
        bar.getCradleVerticalOffset());
MaterialShapeDrawable babBackground = (MaterialShapeDrawable) bar.getBackground();

babBackground.setShapeAppearanceModel(
  babBackground.getShapeAppearanceModel()
  .toBuilder()
  .setTopEdge(topEdge)
  .build());

在哪里BottomAppBarCutCornersTopEdge是这样的：

public class BottomAppBarCutCornersTopEdge extends BottomAppBarTopEdgeTreatment {

    private final float fabMargin;
    private final float cradleVerticalOffset;

    BottomAppBarCutCornersTopEdge(
            float fabMargin, float roundedCornerRadius, float cradleVerticalOffset) {
        super(fabMargin, roundedCornerRadius, cradleVerticalOffset);
        this.fabMargin = fabMargin;
        this.cradleVerticalOffset = cradleVerticalOffset;
    }

    @Override
    @SuppressWarnings("RestrictTo")
    public void getEdgePath(float length, float center, float interpolation, ShapePath shapePath) {
        float fabDiameter = getFabDiameter();
        if (fabDiameter == 0) {
            shapePath.lineTo(length, 0);
            return;
        }

        float diamondSize = fabDiameter / 2f;
        float middle = center + getHorizontalOffset();

        float verticalOffsetRatio = cradleVerticalOffset / diamondSize;
        if (verticalOffsetRatio >= 1.0f) {
            shapePath.lineTo(length, 0);
            return;
        }

        shapePath.lineTo(middle - (fabMargin + diamondSize), 0);    
        shapePath.lineTo(middle - fabDiameter/3, (diamondSize - cradleVerticalOffset + fabMargin) * interpolation);    
        shapePath.lineTo(middle + fabDiameter/3, (diamondSize - cradleVerticalOffset + fabMargin) * interpolation);    
        shapePath.lineTo(middle + (fabMargin + diamondSize), 0);    
        shapePath.lineTo(length, 0);
    }

}

为了获得更好的结果，您应该扩展CutCornerTreatment，在getCornerPath方法中实现与 中使用的相同路径BottomAppBar并将其应用于FloatingActionButton.

Answer 2

为了在您的应用程序中使用最新样式的 BottomAppBar。

1)在 build.gradle 中包含 Google Maven 存储库。

allprojects {
repositories {
  jcenter()
  maven {
    url "https://maven.google.com"
   }
  }
}

2）将材料组件依赖项放在您的build.gradle. 请记住，材料版本会定期更新。

implementation 'com.google.android.material:material:1.0.0-alpha1'

3) 确保您的应用继承Theme.MaterialComponents主题，以使 BottomAppBar 使用最新样式。或者，您可以在布局 xml 文件中的小部件声明中声明 BottomAppBar 的样式，如下所示。

style=”@style/Widget.MaterialComponents.BottomAppBar”

您可以在布局中包含 BottomAppBar，如下所示。BottomAppBar 必须是 CoordinatorLayout 的子级。

<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:navigationIcon="@drawable/baseline_menu_white_24"/>

您可以通过在 FAB 的属性中指定 BottomAppBar 的 id 将浮动操作按钮 (FAB) 锚定到 BottomAppBar app:layout_anchor。BottomAppBar 可以将 FAB 放置在具有形状背景的支架上，或者 FAB 可以与 BottomAppBar 重叠。

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />

谢谢