Appcompat CardView et Picasso pas de Coins arrondis

Je ne sais pas où Exactement je Devrais Adresse cette question, si c'est de ma faute, il y a quelque chose dans le Picasso Lib Mal ou dans le Cardview Bibliothèque.

Bref j'ai un CardView contenant une image (Carte Couverts) et Un TextView superposition.

Lors de l'Exécution du Code sur un Android 5.0 Appareil, tout fonctionne bien et que l'Image Devient son Coins Arrondis.

Cependant, si je l'exécute sur un pré 5.0 de l'appareil, l'image chevauche le Cardlayout et ne pas avoir des Coins arrondis.

Vous pouvez Voir une Comparaison sur cette Image:
Appcompat CardView et Picasso pas de Coins arrondis

Voici quelques Extraits de Code:

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>

Et le Recycleur Adaptateur de Chargement de l'Image:

@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());
}

Qu'advient-il si vous réglez l'image comme fond pour la carte?

InformationsquelleAutor Angelo | 2014-10-24

20

Selon les docs, ce que conçue:

En raison de cher, de la nature de l'angle arrondi de l'écrêtage, sur les plates-formes avant L, CardView n'a pas de clip ses enfants qui se croisent avec des coins arrondis. Au lieu de cela, il ajoute de rembourrage pour éviter une telle intersection (Voir setPreventCornerOverlap(boolean) pour modifier ce comportement).

Voir le CardView docs pour plus d'info.
- lors de la configuration de setPreventCornerOverlap(false) sur pré L les appareils, l'imageview dépasse la CardView et s'aligne avec l'ombre.. des idées à ce sujet?
- Je crois que vous faites référence à ce bug code.google.com/p/android/issues/detail?id=77821 mon commentaire semble résoudre le problème de la Pré-L., Au moins sur le seul appareil que j'ai testé sur.
InformationsquelleAutor kcoppock

Comme @kcoppock mentionné, c'est par la conception.

Voici ce que je ferais dans cette situation.

1) Vous pouvez utiliser Picasso La Transformation interface pour spécifier la transformation personnalisée à votre image (dans notre cas - image avec des coins arrondis)

2) Appliquer cette transformation Picasso demande de pré-L périphériques

3) Depuis CardView ajoute une certaine marge pour l'image - se débarrasser de lui, sur la pré-L les appareils en appelant setPreventOverlap(false)

De retour pour le code:

De transformation personnalisée:

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 + ")";
    }
}

Picasso:

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

setPreventOverlap(false) est très important d'appeler à chaque fois que de traiter avec la carte de milieux. Très bon pour être mentionné ici.
excellente solution! comment faire les coin arrondis tout en gardant le carré inférieur?
malheureusement, la réalisation de l'un des coins arrondis effet prend un peu plus de travail que de simplement appeler une API. Habituellement, cela prend environ dessin en deux passes. Vous pouvez vous référer à des questions similaires sur de SORTE
J'ai trouvé une bonne solution ici: github.com/wasabeef/picasso-transformations/blob/master/... Il vous permet de personnaliser les coin arrondis.

InformationsquelleAutor Pavel Dudka

3

Il fonctionne pour moi comme ceci:
1. Remplacer le ImageView avec RoundedImageView (https://github.com/vinc3m1/RoundedImageView).
2. Définir la riv_corner_radius attribut sur la RoundedImageView être le même que CardView's corner.
3. Ensemble cardPreventCornerOverlap à faux sur le CardView (app:cardPreventCornerOverlap="false").
4. Il a la même apparence sur L et pré-L maintenant.
InformationsquelleAutor NightfuryN
1

Si vous souhaitez disposer d'une solution globale de la question, vous pouvez utiliser Carbone CardView. Correctement les clips de son contenu à des coins arrondis sur tous les appareils dos à Froyo. Voir l'image:

InformationsquelleAutor Zielony

Utiliser le code ci-dessous.

Important: ne pas choisir la couleur de fond pour ImageView en 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>

InformationsquelleAutor ThoIam

Vous devez vous connecter pour publier un commentaire.