CardView 角半径答案

【问题标题】：CardView Corner RadiusCardView 角半径
【发布时间】：2015-06-03 06:10:36
【问题描述】：

有没有办法让 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"
    >

【问题讨论】：

如果我们只需要对图像进行整形，请使用材质ShapeableImageView 来绘制具有提供的形状的位图。

标签： android android-appcompat android-cardview

【解决方案1】：

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

不过，还是有办法获得这种效果的。

将CardView 放置在另一个CardView 中，并为外部CardView 应用透明背景并移除其圆角半径("cornerRadios = 0dp")。例如，您的内部 CardView 的角半径值为 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>

并且视觉效果如下：

始终将您的内容放入您的 Inner CardView。您的外部 CardView 仅用于“隐藏”内部 CardView 的底部圆角。

【讨论】：

注意阴影不正确（底角阴影仍然是圆形的），前景选择器会更明显不正确。
我认为@shreedhar bhat 描述的简单方法更好
说，你知道 cardCornerRadius 的默认值是多少吗？是 4dp 吗？
我不确定为什么每个人都将此标记为答案。这不是正确的答案。我试过这个，但它没有按应有的方式工作。

【解决方案2】：

您可以使用官方Material Components library中包含的标准MaterialCard。

在你的布局中使用：

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

结果如下：

【讨论】：

这不适用于 TabLayout。我的角标签没有圆角。我的要求是只有标签的顶角应该是圆形的，底部应该保持方形。你能帮我解决这个问题吗？
如果您仅将其应用于单个组件，则可以直接在 XML 中应用形状外观叠加层，而无需自定义样式。 app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
这对我很有效。

【解决方案3】：

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>

【讨论】：

您能解释一下这段代码的作用吗？我似乎找不到任何解释 XML 属性 innerRadius、shape 和 thicknessRatio 的资源
只有 app:cardCornerRadius="40dp" 也可以。

【解决方案4】：

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

<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 中的视图具有相同的下边距，但为正。这样，圆形部分隐藏在屏幕下方，但一切看起来完全一样，因为内部视图有一个反边距。

【讨论】：

【解决方案5】：

您可以使用这个可绘制的 xml 并将其设置为 cardview 的背景：

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

【讨论】：

这不适用于您需要采用布局的 cardView，即。线性或相对并将背景设置为它。然后它会工作。
那么阴影效果呢？
为此您可以使用图层列表。检查这个link。
@SurenderKumar aree bhaii bhaii bhaaiii :D :D

【解决方案6】：

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

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

https://github.com/mthli/Slice

【讨论】：

【解决方案7】：

你需要做两件事：

1) 在您的 CardView 上致电 setPreventCornerOverlap(false)。

2) 将 rounded Imageview 放入 CardView

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

https://github.com/pungrue26/SelectableRoundedImageView

【讨论】：

这就是你如何把你的安卓应用变成 ios :)

【解决方案8】：

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

这似乎对我有用：

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

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

你可以反过来得到顶部的圆角和底部的常规角，即让第一个卡片视图具有圆角，第二个卡片视图具有常规角。

【讨论】：

【解决方案9】：

正如@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

【讨论】：

我真的很想投票这些我过去学习编码时看到的反馈很有用。但是，很遗憾我的帐户受到 SOF 规则的限制。好伤心:(

【解决方案10】：

你可以使用库：OptionRoundCardview

【讨论】：

这不显示圆角...我正在使用 API >23
添加足够的边距空间？
没有子视图匹配父视图
有保证金
此库不适用于背景色应用程序：optRoundCardBackgroundColor="@color/gray" 它删除了圆角半径效果

【解决方案11】：

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

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

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

【讨论】：

【解决方案12】：

我使用 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">

【讨论】：

【解决方案13】：

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

第 1 步：
在build.gradle 的依赖项中写下一行：

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>

【讨论】：

他只想要它在顶部。
虽然，这不是这个问题的答案，但它帮助了我很多，找到了一个令人兴奋的命名空间问题！ :)
这不是具体问题的答案，但它帮助了很多用户。

【解决方案14】：

实现这一目标的简单方法是：

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

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

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 中将此背景资源设置为您的布局。

我尝试并测试了上述方法。希望对您有所帮助。

【讨论】：

【解决方案15】：

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

顺便说一句，上面的代码（引用）是 Kotlin 而不是 Java。如果您使用的是 Java，请使用 java 等效项。

【讨论】：