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

如cardUseCompatPadding属性docs中所述：

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

这可能导致卡片在棒棒糖之间和棒棒糖之前有不同的尺寸。如果您需要将 CardView 与其他视图对齐，则可能需要API版本特定的维度资源来考虑更改。作为替代方案，您可以将此标志设置为true， CardView 将在平台Lollipop和之后添加相同的填充值..

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

Answer 2

添加到app

要

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

然后导入必要的值！

Answer 3

尝试添加以下drawable作为图片的背景。

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

Answer 4

您看到的填充是支持早于API 20的结果。要使您的布局在 pre-Lollipop （和pre CardView小部件）上看起来相同，或者 Lollipop和更新，Android引入了一些额外的属性。

因为重叠内容 - 围绕角落 - 对于较旧的Android版本来说很难，cardPreventCornerOverlap已添加并默认设置为true。这就是为什么你的图像周围会出现白色条纹的原因。

要删除此填充，请关闭 cardPreventCornerOverlap 。你可以这样做：

来自xml card_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>

CardView：Android 4.3中图像的边角未圆整？

5 个答案: