Appcompat CardView和Picasso没有圆角

Question

我不知道我应该在哪里解决这个问题,如果这是我的错,那么Picasso Lib Wrong或Cardview Library中就会有一些东西.

基本上我有一个CardView图像(全卡覆盖)和A TextView覆盖.

在Android 5.0设备上运行代码时,一切正常,Image获取其圆角.

但是,如果我在5.0之前的设备上运行它,图像重叠Cardlayout并且没有圆角.

你可以看看这个图片的比较:

以下是一些代码片段:

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)来更改此行为).

请参阅该CardView文档以获得更多信息.

Answer 2

正如@kcoppock所说,这是设计的.

这是我在这种情况下会做的.

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

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

3)由于CardView为图像增加了一些余量 - 通过调用在前L设备上删除它 setPreventOverlap(false)

回到代码:

定制转型:

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