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

Question

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

尝试使用切割形状和 Material Design 的重叠底部表进行复制，我正在寻找制作此 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"
       ..>

然后应用到布局aMaterialShapeDrawable

    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);

如果您想使用 a您可以使用 asBottomSheet检查此答案shapeAppearanceOverlay

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