卡片视图中的圆角在文本视图的图像底部不起作用

Question

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

这是布局：

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

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

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

Answer 2

如果在这种情况下只需要一个圆形图像，则只需在 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>

Answer 3

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

标记为正确的答案，不干净：添加了一个不必要的可绘制对象，卡片视图已经有一个圆角半径属性，使得 child 实现圆角也违背了目的这样的属性。

此外，尝试使用 material 卡片视图：<com.google.android.material.card.MaterialCardView/>。您现在可能不需要它，但它有更多自定义功能。

卡片视图中的圆角在文本视图的图像底部不起作用

Rounded corners in a card view won't work at the bottom of image with a text view

xml

android

kotlin

android-cardview