CardView 圆角半径

Question

有没有办法让 CardView 的顶部只有圆角半径？

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    >

Answer 1

除非您尝试扩展 Android CardView class，否则您无法从 XML 自定义该属性。

不过，有一种方法可以达到这种效果。

将一个 CardView 放在另一个 CardView 中，然后将透明背景应用到外部 CardView 并移除其圆角半径 ("cornerRadios = 0dp")。例如，您的内部 CardView 的 cornerRadius 值为 3dp。然后将 marginTop 应用于内部 CardView，因此其底部边界将被外部 CardView 切割。这样，内部 CardView 的底角半径将被隐藏。

XML代码如下：

 <android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_outer"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp" >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view_inner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        card_view:cardBackgroundColor="@color/green"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="0dp" >
    </android.support.v7.widget.CardView>
</android.support.v7.widget.CardView>

视觉效果如下：

总是把你的内容放在你的内心CardView。您的外部 CardView 仅用于 "hiding" 内部 CardView.

底部圆角的目的

Answer 2

您可以使用此可绘制对象 xml 并将其设置为卡片视图的背景：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffffff"/>

    <stroke android:width="1dp"
        android:color="#ff000000"
        />

    <padding android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp"
        />

    <corners 
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp"/>
</shape>

Answer 3

你需要做两件事：

1) 在您的 CardView 上调用 setPreventCornerOverlap(false)。

2) 将 rounded Imageview 放入 CardView

关于图像视图的四舍五入，我遇到了同样的问题，所以我制作了一个库，您可以在每个角上设置不同的半径。终于得到了我想要的结果，如下所示。

https://github.com/pungrue26/SelectableRoundedImageView

Answer 4

我写了一个可绘制的库来自定义圆角位置，它看起来像这样：

你可以在这里得到这个库：

https://github.com/mthli/Slice

Answer 5

dependencies: compile 'com.android.support:cardview-v7:23.1.1'

<android.support.v7.widget.CardView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:elevation="12dp"
    android:id="@+id/view2"
    app:cardCornerRadius="40dp"
    android:layout_centerHorizontal="true"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9">
    <ImageView
        android:layout_height="80dp"
        android:layout_width="match_parent"
        android:id="@+id/imageView1"
        android:src="@drawable/Your_image"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">
    </ImageView>
</android.support.v7.widget.CardView>

Answer 6

当卡片位于屏幕的最底部时，有一个如何实现它的示例。如果有人遇到此类问题，只需执行以下操作即可：

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-5dp"
    card_view:cardCornerRadius="4dp">

    <SomeView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp">

    </SomeView>

</android.support.v7.widget.CardView>

卡片视图的底部边距为负。 Card View 内的视图具有相同但正的底部边距。这样圆形的部分就隐藏在屏幕下方了，但是一切看起来都一模一样，因为里面的view有counter margin。

Answer 7

你可以使用图书馆：OptionRoundCardview

Answer 8

在 Android Studio 中实现它的最简单方法如下所述：

第 1 步：
在 build.gradle:

中的 dependencies 中写下一行

compile 'com.android.support:cardview-v7:+'

第 2 步：
在 xml 文件中复制以下代码以集成 CardView.

要使 cardCornerRadius 正常工作，请确保在父布局中包含以下行： xmlns:card_view="http://schemas.android.com/apk/res-auto"

并且记得使用 card_view 作为使用 cardCornerRadius 属性.

的命名空间

例如：card_view:cardCornerRadius="4dp"

XML代码：

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_outer"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp" >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view_inner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        card_view:cardBackgroundColor="@color/green"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="0dp" >
    </android.support.v7.widget.CardView>

</android.support.v7.widget.CardView>

Answer 9

如果您以编程方式设置卡片背景，请使用 cardView.setCardBackgroundColor() 而不是 cardView.setBackgroundColor()，并确保在 cardView.xml 上使用 app:cardPreventCornerOverlap="true"。这为我解决了问题。

顺便说一句，上面的代码（在引号中）是在 Kotlin 中而不是 Java。如果您使用 Java.

，请使用等效的 java

Answer 10

实现此目的的简单方法是：

1.Make 带有圆角的自定义背景资源（如矩形）。

2.set这个自定义背景使用命令-

cardView = view.findViewById(R.id.card_view2);
cardView.setBackgroundResource(R.drawable.card_view_bg);

这对我有用。

我用左上和右下半径制作的 XML 布局。

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />
<corners android:topLeftRadius="18dp" android:bottomRightRadius="18dp" />
</shape>

在您的情况下，您只需更改 topLeftRadius 和 topRightRadius。

如果您的布局与卡片视图的角重叠并且颜色可能不同，那么您可能需要不同的布局背景资源文件，并在 xml 中设置此背景资源到您的布局。

以上方法我都试过了。希望对你有帮助。

Answer 11

您可以使用标准 MaterialCard included in the official Material Components library。

在您的布局中使用：

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

在您的样式中使用 shapeAppearanceOverlay 属性自定义形状（默认圆角半径为 4dp）

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

您还可以使用：

<com.google.android.material.card.MaterialCardView
     app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
     ...>

结果是：

Answer 12

您可以将 ImageView 放入 CardView 中，并将这些属性添加到 ImageView：

android:cropToPadding="true"
android:paddingBottom="15dp"

这样您就可以去掉圆底角，但请记住，这样做的代价是将图像的一小部分切掉。

Answer 13

注意：如果您只想在底部实现圆角而在顶部实现常规角，则这是一种解决方法。如果您想为卡片视图的所有四个角设置不同的半径，这将不起作用。您将不得不为此使用 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 有规则角。

Answer 14

我使用 lib 实现的自定义方式

//圆角卡片

在 build.gradle

上添加此实现

implementation 'com.github.captain-miao:optroundcardview:1.0.0'

在XML中：

<com.github.captain_miao.optroundcardview.OptRoundCardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    app:optRoundCardCornerRadius="40dp"
    app:optRoundCardLeftBottomCorner="false"
    app:optRoundCardRightBottomCorner="false"
    app:optRoundCardBackgroundColor="#E2EAF8">

Answer 15

正如@Gabriele Mariotti 在反馈#2 中所建议的那样。非常感谢@Gabriele bcz 你的反馈在这个案例上帮助了我，但我的帐户此时不能投票给你，所以很抱歉:(（我也需要像这个主题创建者这样的帮助）

我建议您使用 MaterialCardView 组件（而不是 CardView）。正是 MaterialCardView.

所以，这是 XML 布局中的代码：

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="260dp"
        android:layout_marginTop="0dp"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.CardView" >

    <ImageButton
        android:id="@+id/arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_arrow"
        android:layout_marginTop="15dp"
        android:layout_marginStart="15dp"
        android:background="@android:color/transparent"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/imagePoke"
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_gravity="center"
        android:scaleType="fitXY"
        tools:ignore="ContentDescription" />

    </com.google.android.material.card.MaterialCardView>

下面是 style/ShapeAppearanceOverlay 属性中的代码：

<style name="ShapeAppearanceOverlay.CardView" parent="">
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerSizeBottomLeft">30%</item>
    <item name="cornerSizeBottomRight">30%</item>
</style>

输出：

See in this link, i'm a newbie, my account not enough require to show image in comment

Answer 16

非常短的代码在里面添加cardview

app:cardCornerRadius="20dp"

CardView 圆角半径

CardView Corner Radius

android

android-appcompat

android-cardview