Question

我不知道我应该在哪里解决这个问题，如果这是我的错，那么Picasso Lib Wrong或Cardview图书馆就会有一些内容。

基本上我有CardView包含图像（覆盖全卡）和A TextView覆盖。

在 Android 5.0 设备上运行代码时，一切正常，图片获取圆角。

但是，如果我在 5.0 设备上运行，则图片会与Cardlayout重叠，并且没有圆角。

您可以在此图片上看到比较： comparison

以下是一些代码片段：

layout_row.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/pandaImage"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/pandaName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/pandaImage"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="@color/photo_tint"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="24sp" />

</RelativeLayout>

装载图像的Recycler Adapter：

@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
    Photo p = photos.get(i);
    Picasso.with(mContext).load(p.getUrl()).fit().into(viewHolder.mImage);
    viewHolder.mPandaName.setText(p.getTitle());
}

Answer 1

根据文档，这是按照设计的：

由于圆角切割的昂贵性质，在L之前的平台上，CardView不会剪切与圆角相交的子节点。相反，它添加了填充以避免这种交集（请参阅setPreventCornerOverlap（boolean）以更改此行为）。

有关详细信息，请参阅the CardView docs。

Answer 2

正如@kcoppock所说，这是设计上的。

以下是我在这种情况下会做的事情。

1）您可以使用Picasso Transformation界面为图像指定自定义变换（在我们的例子中是圆角图像）

2）将此转换应用于pre-L设备上的Picasso请求

3）由于CardView为图像添加了一些余量 - 通过调用setPreventOverlap(false)

在前L设备上删除它

返回代码：

自定义转化：

public class RoundedTransformation implements com.squareup.picasso.Transformation {
    private final int radius;
    private final int margin;

    public RoundedTransformation(final int radius, final int margin) {
        this.radius = radius;
        this.margin = margin;
    }

    @Override
    public Bitmap transform(final Bitmap source) {
        final Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));

        Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint);

        if (source != output) {
            source.recycle();
        }

        return output;
    }

    @Override
    public String key() {
        return "rounded(radius=" + radius + ", margin=" + margin + ")";
    }
}

<强>毕加索：

//feel free to play with radius to match your CardView
Picasso.with(mContext).load(p.getUrl()).transform(new RoundedTransformation(12, 0)).fit().into(viewHolder.mImage);

Answer 3

这对我有用：

将ImageView替换为RoundedImageView（https://github.com/vinc3m1/RoundedImageView）。
将riv_corner_radius上的RoundedImageView属性设置为与CardView的角落相同。
在cardPreventCornerOverlap（CardView）上将app:cardPreventCornerOverlap="false"设为false。
现在在L和pre-L上看起来一样。

Answer 4

如果您希望获得该问题的全局解决方案，可以使用Carbon's CardView。它正确地将其内容剪辑到所有设备上的圆角回到Froyo。见图：

Answer 5

使用以下代码。

重要提示：不要为XML中的ImageView设置背景。

<android.support.v7.widget.CardView 
                                    android:layout_width="match_parent"
                                    android:layout_height="130dp"
                                    app:cardCornerRadius="5dp"
                                    app:cardElevation="0dp"
                                    app:cardUseCompatPadding="true">

    <RelativeLayout
        android:id="@+id/rl_target_marry"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/textView2"
        >

        <ImageView
            android:id="@+id/img_target_marry"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            />
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:foreground="?attr/selectableItemBackground">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_gravity="right|center_vertical"
                android:layout_marginRight="16dp"
                android:text="Marry"
                android:textColor="@color/colorWhite"
                android:textSize="28sp"/>

        </FrameLayout>

    </RelativeLayout>
</android.support.v7.widget.CardView>

Appcompat CardView和Picasso没有圆角

5 个答案: