卡景角半径

有没有办法让 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"
>
246872 次浏览
小开
最佳答案

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

尽管如此，还是有办法获得这种效果的。

将一个 CardView置于另一个 CardView内，并将一个透明背景应用于外部 CardView，并移除其角半径("cornerRadios = 0dp")。例如，你的内部 CardView将有一个角半径为3dp 的值。然后应用一个边缘顶部到您的内部 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 with rounded corners only on top

始终把你的内容在你的内部 CardView。您的外部 CardView 仅用于“隐藏”内部 CardView的底部圆角。

小开

您可以使用这个可绘制的 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>
小开

你需要做两件事:

1)在 CardView 上拨打 setPreventCornerOverlap(false)。

2)在 CardView 内置 < em > 四舍五入 Imageview

关于舍入你的图像视图，我有同样的问题，所以我做了一个库，你可以设置 每个角落有不同的半径。最后我得到了我想要的结果。

Https://github.com/pungrue26/selectableroundedimageview

Rounded ImageView inside CardView

小开

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

example.png

你可以在这里找到这本书:

Https://github.com/mthli/slice

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

有一个例子，如何实现这一点，当卡在屏幕的最底部。如果有人有这样的问题，就像这样做:

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

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

小开

你可以使用这个库: 选项轮卡视图

enter image description here

小开

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

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

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

第二步:
将下面的代码复制到 xml 文件中，以集成 CardView。

为了使 cardCornerRadius正常工作，请务必在母版中包括以下内容: xmlns:card_view="http://schemas.android.com/apk/res-auto"

并且记住使用 cardCornerRadius属性时使用 card_view作为命名空间。

例如: card_view:cardCornerRadius="4dp"

XML Code:

<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.setCardBackgroundColor()而不是 cardView.setBackgroundColor()，并确保在 cardView.xml 上使用 app:cardPreventCornerOverlap="true"。这就解决了我的问题。

顺便说一下，上面的代码(引号)是在 Kotlin，而不是 Java。

小开

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

制作一个带圆角的自定义背景资源(如矩形形状)。

使用以下命令设置这个自定义背景-

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

this worked for me.

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。

If you have a layout that overlaps with the corners of the card view and has a different color maybe, then you might need a different background resource file for the layout and in the xml set this background resource to your layout.

我试用了上述方法，希望对你有所帮助。

小开

您可以使用官方 材料组件库中包含的标准 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>

You can also use:

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

这就是结果:

enter image description here

使用 喷气背包构图，您可以在 Card 中使用 shape参数。

Something like:

Card(
shape = RoundedCornerShape(
topStart = 8.dp,
topEnd = 8.dp,
bottomEnd = 0.dp,
bottomStart = 0.dp,
)
){
Text("Content Card")
}
小开

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

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

这样你就可以去掉底部的圆角，但是要记住，这是要付出代价的，因为你的图像中有一小部分被剪掉了。

小开

注意: 这里是一个变通方案，如果你想实现圆角只在底部和规则的角落在顶部。这不会工作，如果你想有不同的半径所有四个角落的卡视图。你将不得不使用材料卡视图为它或使用一些第三方图书馆。

以下这些方法似乎对我有效:

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

There's two cardview's in all. The second cardview is the one that will have rounded corners (on all sides as usual) and will hold all other subviews under it. The first cardview above it is also at the same level (of elevation), and has the same background but is only about half the height of the second cardview and has no rounded corners (just the usual sharp corners). This way I was able to achieve partially rounded corners on the bottom and normal corners on the top. But for all four sides, you may have to use the material cardview.

你可以做相反的事情，让圆角在顶部和规则的角落在底部，也就是说，让第一个纸箱视图有圆角和第二个纸箱视图有规则的角落。

小开

我用 lib 实现的自定义方法

//四舍五入卡

在 build.gradle上添加此实现

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

in 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">
小开

正如@Gabriele Mariotti 在第二次反馈中建议的那样。非常感谢@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/ShapeAppareanceOverlay 属性的代码:

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

Output:

enter image description here

小开

Very short code Add Inside cardview

app:cardCornerRadius="20dp"
小开

制作圆角的简单方法是使用 CardCornerRadius 属性

app:cardCornerRadius="value"

只需在 XML 代码中编写这些代码

<androidx.cardview.widget.CardView
android:id="@+id/cv_info"
...
app:cardCornerRadius="5dp"
...>

而且效果非常好 卡德维尔的形象

最高的值，你会放在四舍五入它将是。

但是，当我们想要使圆角只在某些地方，如左下角，右下角等，我们会遇到一个问题，因为卡角半径属性这样做的每一方。 我设法找到了一个解决方案，不是一个完美的解决方案，有时这个解决方案是不相关的，例如，当你想在活动中间做它，它只会工作，如果你想要这个卡查看谁在活动的角落。 像这样的圆角图片卡片查看

所以我试图达到的是使卡片视图溢出到活动 人满为患

to do this you may set the width of the card view higher than the width of the phone or a better way is to set the width to match the parent and then set the margin to minus. XML 代码就是这样的

android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="-16dp"
android:layout_marginLeft="-16dp"
android:layout_marginTop="-26dp"
android:layout_marginEnd="-16dp"
android:layout_marginRight="-16dp"

然后将应用程序: cardCornerRadius 设置为某个高值

app:cardCornerRadius="200dp"

你应该得到最终的结果 最终解决方案

你也可以玩这个，用它做一些很酷的东西！

我希望它能在将来帮助到别人，我知道这不是最优雅的解决方案，也不是最好的解决方案，但它应该可以起作用，我尝试了一些其他的东西，但它似乎更复杂。

小开

You will find many ninja techniques on the internet but the best way to do this is to create a "Drawable Resource file" and design your own background and give a radius to every side or only one side. 这些步骤如下:

  1. Right-click on the Drawable file.

Screenshot

  1. 然后单击“新建”，再单击“可绘制资源文件”。

Screenshot

  1. 然后会弹出一个页面，您只需要设置文件的名称。

Screenshot

  1. 将选择器更改为形状。

Screenshot

  1. And add this code.

Screenshot

  1. 最后一步是将这个新创建的可绘制文件设置为 背景。

Screenshot


提交答案