卡片视图中的圆角不适用于带有文本视图的图像底部答案

【问题标题】：Rounded corners in a card view won't work at the bottom of image with a text view卡片视图中的圆角不适用于带有文本视图的图像底部
【发布时间】：2021-11-04 08:44:48
【问题描述】：

我正在尝试获取卡片视图，以便获得带有文本的圆角图像，但问题是，当我添加文本时，因为它们都在圆角卡片视图内，所以图像是底部不圆（这是我需要的）。我将如何做到这一点？

这是布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:cardCornerRadius="16dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_news"
                    android:layout_width="300dp"
                    android:layout_height="200dp"
                    android:src="@drawable/background_shape"
                    android:scaleType="centerCrop" />

                <TextView
                    android:id="@+id/tv_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/news_title"
                    android:textColor="@color/black"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textAlignment="center"
                    android:layout_marginTop="5dp"/>

        </LinearLayout>

</androidx.cardview.widget.CardView>

图像（我需要图像的底角也圆角）：

【问题讨论】：

您标记为正确的答案不是最佳答案，您应该再考虑一下。

标签： android xml kotlin android-cardview

【解决方案1】：

尝试将此代码放入您的"@drawable/background_shape"。刚刚试了一下，一切正常。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
     <corners android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp"/>
</shape>

【讨论】：

如果他们已经使用了cardview 并且还给出了一个半径，那么为什么我们需要创建一个单独的drawable？
这个答案很脏，没有解决真正的问题。 textview 查看空间使用是问题。
@MohakShah 发生这种情况是因为我们仅为卡片元素设置角半径，因此我们得到了我们想要的 - 卡片角被切割，正如我们在 XML 中描述的那样。但是那个角半径不适用于卡片视图的子视图。 ImageView 的顶角被切割，因为它们与父顶角重叠。与底部的 TextView 相同。但是我们没有改变 ImageView 上的角行为。在上面的布局中，ImageView 的底角没有理由被剪掉。
最终这在应用程序的实际运行中不起作用
您还需要将android:src="@drawable/background_shape" 更改为android:background="@drawable/background_shape"。据我了解 - 一旦图像从服务器准备好，您就会更改 src，因此您在 background_shape 中设置的角不再适用

【解决方案2】：

问题是TextView 覆盖了卡半径。修复向文本视图或卡片添加填充的问题，这应该可以解决。

标记为正确，不干净的答案：添加了一个不必要的drawable，卡片视图已经有一个圆角属性，使孩子实现圆角也违背了该属性的目的。

另外，尽量使用材料卡视图：<com.google.android.material.card.MaterialCardView/>。您现在可能不需要它，但它具有更多自定义功能。

【讨论】：

什么类型的填充？顶部填充没有帮助
padding属性有5个，你只试过1个。一般android:padding有1个，每个方向都有1个，为什么不从那个开始，然后缩小呢？为什么要顶，如果您的问题在左下角和右下角？

【解决方案3】：

如果你在这种情况下只需要一个圆形图像，你只需要在 CardView 中添加 ImageView，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    
    <androidx.cardview.widget.CardView
         android:layout_width="300dp"
         android:layout_height="wrap_content"
         android:layout_margin="16dp"
         app:cardCornerRadius="16dp">

         <ImageView
                android:id="@+id/iv_news"
                android:layout_width="300dp"
                android:layout_height="200dp"
                android:src="@drawable/background_shape"
                android:scaleType="centerCrop" />

     </androidx.cardview.widget.CardView>

     <TextView
          android:id="@+id/tv_title"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="@string/news_title"
          android:textColor="@color/black"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:textAlignment="center"
          android:layout_marginTop="5dp"/>

</LinearLayout>

【讨论】：