Appcompat CardView und Picasso keine abgerundeten Ecken

Question

Ich weiß nicht, wo genau ich dieses Problem beheben sollte, wenn es meine Schuld ist, ist etwas in der Picasso Lib Wrong oder in der Cardview Library.

Grundsätzlich habe ich eine CardView mit einem Bild (Full Card Covered) und einem TextView Overlaying.

Wenn das Ausführen von Code auf einem Android 5.0 Gerät, funktioniert alles einwandfrei und das Bild Ruft seine Abgerundete Ecken.

aber wenn ich es auf einem bereits 5,0 Gerät ausgeführt, überlappt das Bild, um die Cardlayout und hat keine Ecken gerundet.

Sie können einen Vergleich auf diesem Bild sehen:

Hier sind einige Code-Schnipsel:

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> 

Und der Recycler Adapter lädt Bild:

@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

Nach dem docs, dies als entworfen:

Aufgrund teuerer Art der abgerundeten Ecke abschneiden, auf Plattformen vor L, nicht CardView nicht stutzen seine Kinder, die sich mit abgerundeten Ecken kreuzen. Stattdessen wird Padding hinzugefügt, um eine solche Überschneidung zu vermeiden (siehe setPreventCornerOverlap (boolean), um dieses Verhalten zu ändern).

Weitere Informationen finden Sie unter the CardView docs.

Answer 2

Wie @kcoppock erwähnt, ist dies von Entwurf.

Hier ist, was ich in dieser Situation tun würde.

1) Sie können Picasso verwenden Transformation Schnittstelle benutzerdefinierte Transformation für Ihr Bild angeben (in unserem Fall - Bild mit abgerundeten Ecken)

2) Wenden Sie diese Transformation auf die Picasso Antrag auf vorge L Geräte

3) Da CardView einen gewissen Spielraum für das Bild fügt hinzu - davon durch den Aufruf setPreventOverlap(false)

auf den Code zurück auf Pre-L Geräte loszuwerden:

Individuelle Transformation:

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

Answer 3

Wenn Sie eine globale Lösung für dieses Problem haben wollen, können Sie Carbon's CardView verwenden. Es klammert seinen Inhalt auf allen Geräten korrekt an abgerundete Ecken zurück an Froyo. Siehe das Bild:

Answer 4

Es ist für mich funktioniert wie folgt:

1. die ImageView Ersetzen mit RoundedImageView (https://github.com/vinc3m1/RoundedImageView).
2. Setzen Sie das riv_corner_radius Attribut auf dem RoundedImageView, um das gleiche wie CardView Ecke zu sein.
3. cardPreventCornerOverlap auf false setzen auf CardView (app:cardPreventCornerOverlap="false").
4. Es sieht jetzt gleich auf L und pre-L aus.

Answer 5

Verwenden Sie den folgenden Code.

Wichtig: nicht gesetzt Hintergrund für Image in 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>