CardView：图像的角在 Android 4.3 中不圆角？

Question

Android Studio 版本：2.3.3、Android 4.3

我正在使用 CardView 并希望对图像的角进行圆角处理。

布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="@dimen/card_width"
    android:layout_height="@dimen/card_width"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">
    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        card_view:cardCornerRadius="15dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/img_lights" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

如你所愿，我设置了

card_view:cardCornerRadius="15dp

结果如下：

但是图片的边角不是圆角的。为什么？

Answer 1

添加到app

成为

app:cardCornerRadius="15dp"
app:cardUseCompatPadding="true"

然后导入必要的值！

Answer 2

如cardUseCompatPadding 属性中的docs 所述：

CardView 在 Lollipop 之前添加了额外的填充以在平台上绘制阴影。

这可能会导致棒棒糖和棒棒糖之前的卡片大小不同。如果您需要将 CardView 与其他 Views 对齐，您可能需要 api 版本特定的维度资源来解释更改。作为替代方案，您可以将此标志设置为 true，CardView 将在 Lollipop 及之后的平台上添加相同的填充值..

将app:cardUseCompatPadding="true" 应用到您的CardView。

Answer 3

尝试添加以下可绘制对象作为图像的背景。

<ImageView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:scaleType="centerCrop"
     android:background="drawable/rounded"
     android:src="@drawable/img_lights" />

drawable/rounded.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

  <solid android:color="#FFFFFF" />
  <corners android:radius="15dp" />

</shape>

Answer 4

您看到的填充是支持早于 API 20 的结果。为了使您的布局在 pre-Lollipop（和 pre-CardView 小部件）或 Lollipop 和更新版本，Android 引入了一些附加属性。

由于旧版 Android 难以重叠内容（圆角），因此添加了 cardPreventCornerOverlap，并默认设置为 true。这就是为什么您的图像周围有白色条纹。

要删除此填充关闭 cardPreventCornerOverlap。你可以做到：

• 通过 xmlcard_view:cardPreventCornerOverlap="false"

• 或以编程方式yourCardView.setPreventCornerOverlap(false)。

请记住，这只会为您提供 API 20+ 所需的效果。 在具有旧版本系统的设备上，您的圆角将不可见（隐藏在非圆角图像下）。

要了解更多信息，请查看the CardView doc。在第一段中，您可以找到有关您的问题的官方说明。

Answer 5

请试试这个类的图像圆角

public class RoundedCornerImageLayout extends FrameLayout {
private final static float CORNER_RADIUS = 30.0f;
private float cornerRadius;

public RoundedCornerImageLayout(Context context) {
    super(context);
    init(context, null, 0);
}

public RoundedCornerImageLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs, 0);
}

public RoundedCornerImageLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context, attrs, defStyle);
}

private void init(Context context, AttributeSet attrs, int defStyle) {
    DisplayMetrics metrics = context.getResources().getDisplayMetrics();
    cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);
    setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}


@Override
protected void dispatchDraw(Canvas canvas) {
    int count = canvas.save();

    final Path path = new Path();
    path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), cornerRadius, cornerRadius, Path.Direction.CW);
    canvas.clipPath(path, Region.Op.INTERSECT);

    canvas.clipPath(path);
    super.dispatchDraw(canvas);
    canvas.restoreToCount(count);
 }
}

在 XML 中

<com.utils.RoundedCornerImageLayout 
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_margin="@dimen/dimen_5">

                    <ImageView
                        android:id="@+id/img1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@color/scout_report_color"
                        android:scaleType="fitXY" />
                </com.utils.RoundedCornerImageLayout>