如何使用材质设计制作斜切顶部应用栏？

问题描述

我在Material Design io网站上找到了该指南，任何人都可以分享您的想法，以及如何使用Material Design而不是3rd party插件来实现这一点。

尝试使用材料设计的切割形状和重叠的底页进行复制，我希望使用标准指导来制作此UI。

解决方法

此组件称为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，可以使用 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>