CardView：圖像的角在 Android 4.3 中不是圓角的？

Question

安卓工作室版本：2.3.3、安卓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>

正如你可以 ses 我設置

card_view:cardCornerRadius="15dp

結果如下：

但是圖像的角不是圓角。 為什么？

Answer 1

請試試這個類的圖像圓角

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>

Answer 2

如cardUseCompatPadding屬性的文檔中cardUseCompatPadding ：

CardView添加了額外的填充來在 Lollipop 之前在平台上繪制陰影。

這可能會導致卡片在 Lollipop 和 Lollipop 之前具有不同的大小。 如果您需要將CardView與其他Views對齊，您可能需要特定於 api 版本的維度資源來說明更改。 作為替代方案，您可以將此標志設置為 true， CardView將在 Lollipop 平台和之后的平台上添加相同的填充值。

將app:cardUseCompatPadding="true"到CardView 。

Answer 3

添加到app

成為

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

然后導入必要的值！

Answer 4

您看到的填充是支持 API 20 之前的結果。為了使您的布局在Lollipop 之前（和CardView小部件之前）或Lollipop 和更新版本上看起來相同，Android 引入了一些額外的屬性。

因為重疊內容 - 圓角 - 對於舊的 Android 版本來說很困難，所以添加了cardPreventCornerOverlap並且默認設置為true 。 這就是圖像周圍有白色條紋的原因。

要刪除此填充，請關閉cardPreventCornerOverlap 。 你能行的：

• 通過 xml by card_view:cardPreventCornerOverlap="false"

• 或以編程方式通過yourCardView.setPreventCornerOverlap(false) 。

請記住，這為您提供了僅適用於 API 20+ 的效果。 在舊版本系統的設備上，您的圓角將不可見（隱藏在非圓角圖像下）。

要了解更多信息，請查看CardView 文檔。 在第一段中，您可以找到有關您的問題的官方說明。

Answer 5

嘗試添加以下可繪制對象作為圖像的背景。

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

可繪制/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>