如何使用 material 设计制作有角度的顶部应用栏？

Question

我在 material 设计 io 网站上找到了这个指南，谁能分享你的想法，如何使用 material 设计而不是第 3 方插件来实现这个。

尝试使用 Material 设计的切割形状和重叠底部 sheet 进行复制，我正在寻找制作此 UI 的标准指南。

Answer 1

此组件名为 Backdrop，但不可用。

如果组件是固定的，你可以使用类似的东西：

<androidx.coordinatorlayout.widget.CoordinatorLayout     
   android:background="@color/colorPrimary"
   ..>

   <com.google.android.material.appbar.AppBarLayout/>

   <androidx.constraintlayout.widget.ConstraintLayout 
       android:id="@+id/ll"
       ..>

然后应用到布局a MaterialShapeDrawable

    val layout : ConstraintLayout = findViewById(R.id.ll)
    val  radius = resources.getDimension(R.dimen.cornerSize24);

    val shapeAppearanceModel: ShapeAppearanceModel = ShapeAppearanceModel()
        .toBuilder()
        .setTopLeftCorner(CornerFamily.CUT,radius)
        .build();

    val shapeDrawable = MaterialShapeDrawable(shapeAppearanceModel);
    shapeDrawable.fillColor = AppCompatResources.getColorStateList(this,R.color.white)
    ViewCompat.setBackground(layout,shapeDrawable);

如果你想使用 BottomSheet 你可以检查 using as shapeAppearanceOverlay

  <style name="ShapeAppearanceOverlay.App.BottomSheetDialog" parent="">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">0dp</item>
    <item name="cornerSizeTopLeft">24dp</item>
  </style>

如何使用 material 设计制作有角度的顶部应用栏？

how to make an Angled cuts top app bar using material design?

android

material-design

android-toolbar

android-shapedrawable

material-components-android