web-dev-qa-db-ja.com

Appcompat CardViewとPicassoの角が丸くない

私がこの問題に正確に対処する必要がある場所がわかりません。それが私の責任である場合は、Picasso Lib WrongまたはCardview Libraryに何かがあります。

基本的に私はCardViewに画像（フルカードカバー）とTextViewオーバーレイを含めています。

Android 5.デバイスでコードを実行すると、すべてが正常に動作し、画像は丸みを帯びた角を取得します。

ただし、5.以前のデバイスで実行すると、画像が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>

そして画像をロードするリサイクラーアダプター：

@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());
}
androidandroid-appcompatpicassocardlayout
19
Angelo

ドキュメントによると、これは設計どおりです：

丸みを帯びた角のクリッピングは高価であるため、Lより前のプラットフォームでは、CardViewは丸みを帯びた角と交差する子をクリッピングしません。代わりに、このような交差を回避するためにパディングが追加されます（この動作を変更するには、setPreventCornerOverlap（boolean）を参照してください）。

詳細は the CardView docs を参照してください。

20
kcoppock

@kcoppockが述べたように、これは仕様によるものです。

これがこの状況で私がすることです。

1）Picasso Transformation インターフェースを使用して、画像のカスタム変換を指定できます（この場合、角の丸い画像）。

2）プレLデバイスのピカソリクエストにこの変換を適用します

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);
20
Pavel Dudka

それはこのように私のために働きます：

  1. ImageViewをRoundedImageViewで置き換えます（ https://github.com/vinc3m1/RoundedImageView ）。
  2. RoundedImageViewのriv_corner_radius属性をCardViewの角と同じになるように設定します。
  3. cardPreventCornerOverlap（app:cardPreventCornerOverlap="false"）でCardViewをfalseに設定します。
  4. Lとpre-Lで同じに見えます。
3
NightfuryN

その問題のグローバルな解決策が必要な場合は、 Carbon's CardView を使用できます。 Froyoに戻るすべてのデバイスの丸い角にコンテンツを正しくクリップします。画像を参照してください：

enter image description here

1
Zielony

以下のコードを使用してください。

重要： ImageViewの背景をXMLに設定しません。

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