带有 MaterialShapeDrawable 的 MaterialCardView

Question

我想实现这个：

所以我想我可以使用 MaterialShapeDrawable 来应用该转换：

binding.card.background = MaterialShapeDrawable(
    ShapeAppearanceModel.builder()
        .setAllCornerSizes(5.dpToPx().toFloat())
        .setTopEdge(object : TriangleEdgeTreatment(7.dpToPx().toFloat(), false){
            override fun getEdgePath(length: Float, center: Float, interpolation: Float, shapePath: ShapePath) {
                super.getEdgePath(length, 12.dpToPx().toFloat(), interpolation, shapePath)
            }
        })
        .build()
).apply {
    fillColor = resourcesProvider().colorStateListFromAttr(R.attr.colorSurface, R.style.App_CardView)
}

但不幸的是，它没有任何改变。所以我尝试像这样申请直系子女：

<com.google.android.material.card.MaterialCardView
    style="@style/Widget.MaterialComponents.CardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="20dp"
    android:layout_marginTop="5dp"
    android:layout_marginEnd="20dp"
    android:clipChildren="false"
    app:cardBackgroundColor="@android:color/transparent"
    app:cardElevation="10dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"> //without this margin nothing is shown

它有点管用，但由于 app:cardElevation="10dp"（这是必需的），我得到了一个奇怪的结果：

所以我的问题是：
1 - 是否可以将转换应用于 CardView？如果可以，怎么做？
2 - 如何解决这个 "shadow on top" 问题？

谢谢。

Answer 1

由于您在 CardView 之外绘制，在父视图中您应该使用类似的东西：

  <LinearLayout
      android:clipChildren="false"
      android:clipToPadding="false"
      android:padding="16dp"
      ..>

        <com.google.android.material.card.MaterialCardView
         app:cardElevation="2dp"
         ../>

然后将更改应用到 ShapeAppearanceModel 但获取卡片视图使用的现有 ShapeAppearanceModel （在您的代码中，您正在替换现有的 MaterialShapeDrawable 不仅在 ShapeAppearanceModel 中应用更改):

cardView.setShapeAppearanceModel(cardView.getShapeAppearanceModel()
        .toBuilder()
        .setTopEdge(new TriangleEdgeTreatment(size, false){

            @Override public void getEdgePath(float length, float center, float interpolation,
              @NonNull ShapePath shapePath) {
              //...... your implementation
            }
          }
        )
        .build());

从 1.2.0-beta01 开始，您还可以将 OffsetEdgeTreatment 与 MarkerEdgeTreatment.

一起使用

类似于：

MarkerEdgeTreatment markerEdgeTreatment = new MarkerEdgeTreatment(size);
OffsetEdgeTreatment offsetEdgeTreatment = new OffsetEdgeTreatment(markerEdgeTreatment,offset);

cardView.setShapeAppearanceModel(cardView.getShapeAppearanceModel()
            .toBuilder()
            .setTopEdge(offsetEdgeTreatment)
            .build());

带有 MaterialShapeDrawable 的 MaterialCardView

MaterialCardView with MaterialShapeDrawable

android

android-styles

material-design

android-cardview

material-components-android