MaterialCardView 的不同角半径值

Question

是否可以为 MaterialCardView 的每个角半径设置不同的值？如果是这样怎么办？

我尝试了类似下面的代码，但它似乎没有任何效果

    float radius = getContext().getResources().getDimension(R.dimen.default_corner_radius);
    ShapePathModel leftShapePathModel = new ShapePathModel();
    leftShapePathModel.setTopLeftCorner(new RoundedCornerTreatment(radius));
    leftShapePathModel.setTopRightCorner(new RoundedCornerTreatment(radius));
    MaterialShapeDrawable bg = new MaterialShapeDrawable(leftShapePathModel);
    container.setBackground(bg);

其中容器是

@BindView(R.id.container) MaterialCardView container;

Answer 1

我认为您应该可以在 MaterialCardView 上调用 ShapeAppearanceModel shape = ((MaterialShapeDrawable)container.getBackground()).getShapeAppearanceModel()。从那里您可以调用 setTopLeftCorner() 或其他方法来设置具有不同值的边角处理。您可能需要在设置角后调用 container.invalidate()。

Answer 2

我最初的解决方案是正确的，但缺少一行：

float radius = getContext().getResources().getDimension(R.dimen.default_corner_radius);
ShapePathModel leftShapePathModel = new ShapePathModel();
leftShapePathModel.setTopLeftCorner(new RoundedCornerTreatment(radius));
leftShapePathModel.setTopRightCorner(new RoundedCornerTreatment(radius));
MaterialShapeDrawable bg = new MaterialShapeDrawable(leftShapePathModel);
container.setBackground(bg);

如果你加上

container.invalidate()

正如上面 Cameron 所建议的，它似乎有效。

Answer 3

您可以使用自定义样式和shapeAppearanceOverlay属性。

  <style name="MyCardView" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialCardView.Cut</item>
  </style>


  <style name="ShapeAppearanceOverlay.MaterialCardView.Cut" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">8dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

或者您可以使用以下内容将自定义 ShapeAppearanceModel 应用到卡片的一角：

float radius = getResources().getDimension(R.dimen.my_corner_radius);
cardView.setShapeAppearanceModel(
  cardView.getShapeAppearanceModel()
      .toBuilder()
      .setTopLeftCorner(CornerFamily.ROUNDED,radius)
      .setTopRightCorner(CornerFamily.ROUNDED,radius)
      .setBottomRightCornerSize(0)
      .setBottomLeftCornerSize(0)
      .build());

Answer 4

也试试这个

     <style name="TopCornerCardview" parent="Widget.MaterialComponents.CardView">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopRight">@dimen/dp25</item>
        <item name="cornerSizeTopLeft">@dimen/dp25</item>
        <item name="cornerSizeBottomRight">0dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="contentPadding">0dp</item>
    </style>

    <com.google.android.material.card.MaterialCardView
            style="@style/TopCornerCardview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TopCornerCardview"
            app:cardBackgroundColor="@color/colorAccent"
            app:cardUseCompatPadding="true">

>
<!--views here-->
</com.google.android.material.card.MaterialCardView>

MaterialCardView 的不同角半径值

Different corner radius values for a MaterialCardView

android

android-layout

android-cardview

material-components

material-components-android