如何使用材料设计制作有角度的顶部应用栏？答案

【问题标题】：how to make an Angled cuts top app bar using material design?如何使用材料设计制作有角度的顶部应用栏？
【发布时间】：2020-12-16 23:05:45
【问题描述】：

我在材料设计 io 网站上找到了这个指南，任何人都可以分享你的想法，如何使用材料设计而不是 3rd 方插件来制作它。

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

【问题讨论】：

您可以使用MaterialShapeDrawable

标签： android material-design android-toolbar material-components-android android-shapedrawable

【解决方案1】：

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

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

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

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

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

然后对布局应用一个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，您可以使用 as shapeAppearanceOverlay

来检查 this answer

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

【讨论】：