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

Question

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

下图给出了一个像这样的 fab 的底部栏。

Answer 1

这只是一个想法，代码可以改进。
您可以使用 shapeAppearanceOverlay 属性更改 FloatingActionButton 的形状:

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

最后，您可以向 BottomAppBar 应用 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。