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

Question

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

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

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。

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 的 app:layout_anchor 属性中指定 BottomAppBar 的 id 将浮动操作按钮 (FAB) 锚定到 BottomAppBar。 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" />

谢谢