如何在底部应用栏中使用钻石样式和浮动操作按钮?在网站https://material.io/tools/theme-editor/上的草图文件中,有这样的样式fab:
查看了所有可能的样式和标签...
![enter image description here](https://istack.dev59.com/ixyAm.webp)
目前还没有官方的形状可以用于BottomAppBar
。
然而,在版本为1.1.0的Material Components库中,您可以使用app:shapeAppearance
属性自定义FloatingActionButton
的形状。
您可以使用类似以下内容的代码:
<com.google.android.material.floatingactionbutton.FloatingActionButton
app:layout_anchor="@id/bar"
app:shapeAppearance="@style/FabDiamondOverlay"
.../>
采用这种样式:
<style name="FabDiamondOverlay" parent="">
<item name="cornerFamily">cut</item>
<item name="cornerSize">8dp</item>
</style>
目前,形状主题属性不会影响BottomAppBar
,您只能为FAB cradle设置圆角。在官方存储库中添加了解决方法。
只需使用带有属性app:fabCradleMargin
的默认BottomAppBar(它定义了FloatingActionButton
和BottomAppBar
之间的距离)
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bar"
...
android:layout_gravity="bottom"
app:fabCradleMargin="10dp"
/>
使用BottomAppBarTopEdgeTreatment
来改变BottomAppBar
的形状:
BottomAppBar bar = findViewById(R.id.bar);
FloatingActionButton fab2 = findViewById(R.id.fab);
BottomAppBarTopEdgeTreatment topEdge = new BottomAppBarCutCornersTopEdge(
bar.getFabCradleMargin(),
bar.getFabCradleRoundedCornerRadius(),
bar.getCradleVerticalOffset());
MaterialShapeDrawable babBackground = (MaterialShapeDrawable) bar.getBackground();
//It requires 1.1.0-alpha10
babBackground.setShapeAppearanceModel(
babBackground.getShapeAppearanceModel()
.toBuilder()
.setTopEdge(topEdge)
.build());
向Gabriele Mariotti致敬。我使用了他的代码并稍微修改了一下,以使底部应用栏具有原始问题中的圆角外观。
首先,对于FAB,我给它圆形角落并将其旋转45度,如下所示:
FAB的XML代码:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fabHome"
android:rotation="45"
app:layout_anchor="@id/bottomBarHome"
app:shapeAppearanceOverlay="@style/FabDiamondOverlay"/>
FabDiamondOverlay 是:
<style name="FabDiamondOverlay" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">15%</item>
</style>
which gives the resulting FAB:
现在是底部栏的XML代码:<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottomBarHome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="@color/grey"
app:fabCradleMargin="20dp"
app:fabCradleVerticalOffset="5dp"
android:layout_gravity="bottom" />
在OnCreate方法中添加以下代码,以使底部应用栏具有自定义外观:
BottomAppBar bar = findViewById(R.id.bottomBarHome);
BottomAppBarTopEdgeTreatment topEdge = new BottomAppBarCutCornersTopEdge(
bar.getFabCradleMargin(),
bar.getFabCradleRoundedCornerRadius(),
bar.getCradleVerticalOffset());
MaterialShapeDrawable bottomBarBackground = (MaterialShapeDrawable) bar.getBackground();
bottomBarBackground.setShapeAppearanceModel(
bottomBarBackground.getShapeAppearanceModel()
.toBuilder()
.setTopRightCorner(CornerFamily.ROUNDED,75)
.setTopLeftCorner(CornerFamily.ROUNDED,75)
.setTopEdge(topEdge)
.build());
在修改Gabrielle的代码时,BottomAppBarCutCornersTopEdge
是所需内容:Source">源代码
@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;
}
float barLeftVertex = middle - (fabMargin + diamondSize - cradleVerticalOffset);
float barRightVertex = middle + (fabMargin + diamondSize - cradleVerticalOffset);
float depth = (diamondSize - cradleVerticalOffset + fabMargin) * interpolation;
float heightArc = 25;
float widthArc = 25;
shapePath.lineTo(barLeftVertex, 0);
shapePath.lineTo(middle-widthArc, depth-heightArc);
shapePath.addArc(middle-widthArc-10, 35, middle+widthArc+10, depth-15, 135, -83);
shapePath.lineTo(middle+widthArc, depth-heightArc);
shapePath.lineTo(barRightVertex, 0);
shapePath.lineTo(length, 0);
}
FloatingActionButton
中没有看到任何形状相关的内容。 - CommonsWare