Question

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

下面给出的图像是用fab这样的底条。

Answer 1

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

<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。 / p>

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

谢谢

如何用自定义形状fab按钮制作Bottombar？

2 个答案: