CardView转角半径

95

有没有办法使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"
    >
android  android-appcompat  android-cardview 
— 挤
source

Answers:

118

除非您尝试扩展AndroidCardView类，否则无法从中自定义该属性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。您的外部CardView仅用于“隐藏”内部的底部圆角的目的CardView。

— joao2fast4u
source
8
请注意，阴影不正确（底角阴影仍为圆形），并且前景选择器明显更不正确。
— ataulm 2015年
我认为，最简单的方式@shreedhar泰铢描述是更好的
— 马太西瓜
说，您知道cardCornerRadius的默认值是什么？是4dp吗？
— Android开发人员
我不确定为什么所有人都将此标记为答案。这不是正确的答案。我试过了，但是没有按预期的方式工作。
— Visal Varghese
42 
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>
— 什里德巴特
source
8
您能解释一下这段代码的作用吗？我似乎无法找到解释有关XML属性的任何资源innerRadius，shape以及thicknessRatio
— atjua
2
只会 app:cardCornerRadius="40dp"工作。
— 鲁米特·帕特尔
27

您可以使用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"
     ...>

结果是：

在此处输入图片说明

— 加布里埃尔·马里奥蒂（Gabriele Mariotti）
source
这不适用于TabLayout。我的角tab没有四舍五入。我的要求是，仅将标签的顶角修圆，底部应保持方形。你能帮我这个忙吗？
— 塔拉
2
如果仅将其应用于单个组件，则可以直接在XML中应用形状外观叠加层，而无需自定义样式。 app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
— 阿菲安
8

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

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

卡视图的底边距为负数。名片视图内的视图具有相同但正的底边距。这样，圆角的部分隐藏在屏幕下方，但是所有内容看起来都完全相同，因为内部视图具有相对的边距。

— 可拉
source
6

您可以使用此drawable 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>
— 投降库马尔
source
这将与需要采取Layout的cardView一起使用。线性或相对，并为其设置背景。那么它将起作用。
— Surender Kumar
1
但是阴影效果呢？
— 拉维·拉杰普特
为此，您可以使用图层列表。检查此链接。
— Surender Kumar
@SurenderKumar aree bhaii bhaii bhaaiii：D：D
— Abhishek
2

您需要做两件事：

1）调用setPreventCornerOverlap(false)CardView。

2）将圆形的Imageview放在CardView内

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

https://github.com/pungrue26/SelectableRoundedImageView

在CardView中舍入的ImageView

— 김준호
source
1
这就是将Android应用变成ios的方式：）
— AmeyaB
0

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

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

这样一来，您就可以摆脱圆角的底角，但是请记住，这样做的代价是要切除一小部分图像。

— 奥姆泽
source
0

注意：如果您只想在底部获得圆角而在顶部获得规则角，则这是一种解决方法。如果要为Cardview的所有四个角都设置不同的半径，则此方法将无效。您将必须使用材料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具有规则角。

— 最高
source
-1

在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>
— 神话
source
4
他只希望它在顶部。
— 海森堡
2
虽然，这不是对这个问题的答案，但它对找到名称空间令人着迷的问题大有帮助！:)
— 片段
1
这不是特定问题的答案，但是它已经帮助了许多用户。
— 神话
-1

一种简单的方法是：

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

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

— 安基·德什穆克（Ankit Deshmukh）
source
-2

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

顺便说一句，以上代码（用引号引起来）是在Kotlin中而不是Java中。如果您使用的是Java，请使用等效的java。

— 约瑟夫·玛加拉（Joseph Magara）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.