具有不同角半径的 CardView

Question

我有以下 CardView，我想为卡片中的每个角设置不同的半径。是否可以通过 XML 或编程方式更改它们？提前致谢。

<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="16dp"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    app:cardCornerRadius="0dp"
    app:cardElevation="0dp">
</android.support.v7.widget.CardView>

编辑正如 Avinash 所建议的，我正在寻找此库 github.com/captain-miao/OptionRoundCardview 的行为，但使用默认的 CardView 项目。如果无法单独更改它，这个库是一个很好的方法。

Answer 1

您可以创建自定义 xml 并将其命名为 rounded_corners.xml，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp"
    android:topLeftRadius="20dp"
    android:topRightRadius="30dp"
    android:bottomLeftRadius="40dp"
    android:bottomRightRadius="50dp"/>
<solid android:color="your_background_color" />
</shape>

然后用这个作为你的背景 CardView:

android:background="@drawable/rounded_corners"

编辑： 我刚刚注意到这可能适用于 CardView 以外的所有其他视图，因此请参阅了解如何执行解决方法。

Answer 2

您好，您可以通过编程方式或使用以下代码 xml 添加它。

app:cardCornerRadius="0dp"// xml
cardView.setRadius(0);

这个是额外的，正在寻找海拔

app:cardElevation="0.7dp"//xml
app:cardMaxElevation="1dp"//xml
cardView.setCardElevation(2.1f);//code
cardView.setMaxCardElevation(3f);//code

CardView XML 的完整 Java 表示。

CardView cardView = (CardView) findViewById(R.id.cardView);
cardView.setUseCompatPadding(true);
cardView.setContentPadding(30, 30, 30, 0);
cardView.setPreventCornerOverlap(true);
cardView.setCardBackgroundColor(Color.WHITE);
cardView.setCardElevation(2.1f);
cardView.setRadius(0);
cardView.setMaxCardElevation(3f);

Answer 3

需要官方MaterialCardView (which extends the androidx.cardview.widget.CardView) and at least the version 1.1.0 of the Material components library.

将 MaterialCardView:

添加到您的布局

    <com.google.android.material.card.MaterialCardView
        style="@style/CustomCardViewStyle"
        ...>
      
    </com.google.android.material.card.MaterialCardView>

定义继承material card style（例如Widget.MaterialComponents.CardView）的自定义样式并使用shapeAppearanceOverlay属性：

  <style name="CustomCardViewStyle" parent="@style/Widget.MaterialComponents.CardView">
     <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay_card_custom_corners</item>
  </style>


  <style name="ShapeAppearanceOverlay_card_custom_corners" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">4dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeBottomRight">16dp</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,..)
      .setTopRightCorner(CornerFamily.ROUNDED,..)
      .setBottomRightCorner(CornerFamily.ROUNDED,radius)
      .setBottomLeftCornerSize(0)
      .build());

注意：需要1.1.0版本的库。

使用 Jetpack compose 你可以在 Card.[=27= 中使用 shape 参数]

类似于：

    Card(
        shape = RoundedCornerShape(
           4.dp,
           8.dp,
           16.dp,
           2.dp)
    ){
        Text("Content Card")
    }

Answer 4

注意：如果您只想在底部实现圆角而在顶部实现常规角，则这是一种解决方法。如果您想为卡片视图的所有四个角设置不同的半径，这将不起作用。您将不得不为此使用 material cardview 或使用某些第三方库。

这似乎对我有用：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#F9F9F9">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@drawable/profile_bg"/>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cvProfileHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="32dp">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="280dp"
            android:orientation="vertical"
            android:background="@drawable/profile_bg"
            android:id="@+id/llProfileHeader"
            android:gravity="center_horizontal">

            <!--Enter your code here-->

        </LinearLayout>
    
    </androidx.cardview.widget.CardView>

</RelativeLayout>

一共有两个cardview。第二个 cardview 将具有圆角（像往常一样在所有边上）并将在其下包含所有其他子视图。它上面的第一个 cardview 也处于同一水平（高度），并且具有相同的背景但只有第二个 cardview 高度的一半左右并且没有圆角（只是通常的尖角）。通过这种方式，我能够在底部实现部分圆角，在顶部实现正常角。但是对于所有四个方面，您可能必须使用 material 卡片视图。

具有不同角半径的 CardView

CardView with different corner radius

android

android-layout

material-design

android-cardview

material-components-android