CardView Corner Radius

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类,否则无法自定义该属性XML.

尽管如此,有一种方法可以获得这种效果.

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

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.

Answer 2

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

结果是：

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

Answer 4

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

Answer 5

我写了一个drawable lib到自定义圆角位置,它看起来像这样:

你可以在这里获得这个lib:

https://github.com/mthli/Slice

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>

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

Answer 7

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

输出：