Appcompat CardView e Picasso senza angoli arrotondati

Question

Non so dove esatto Dovrei risolvere questo problema, se è colpa mia, c'è qualcosa nel Picasso Lib Wrong o nella libreria Cardview.

In generale, ho un CardView contenente un'immagine (Scheda Completa Coperta) e A TextView sovrapposizione.

durante l'esecuzione del codice su un dispositivo Android 5.0 , tutto funziona bene e l'immagine diventa la sua angoli arrotondati.

Tuttavia se eseguito su un dispositivo di pre 5.0, l'immagine si sovrappone al Cardlayout e non ha angoli arrotondati.

È possibile vedere un confronto su questa immagine:

Ecco alcuni frammenti di codice:

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> 

.210

e l'adattatore Recycler Caricamento del 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()); 
} 

Answer 1

Secondo la documentazione, questo come progettato:

causa della natura costosa di arrotondato angolo clipping, su piattaforme prima di L, a schede non ritaglia i suoi bambini che si intersecano con angoli arrotondati. Invece, aggiunge padding per evitare tale intersezione (vedi setPreventCornerOverlap (booleano) per cambiare questo comportamento).

Vedere the CardView docs per ulteriori informazioni.

Answer 2

Come @kcoppock menzionato, questo è di progettazione.

Ecco cosa farei in questa situazione.

1) È possibile utilizzare Picasso interfaccia Transformation per specificare la trasformazione su misura per l'immagine (nel nostro caso - immagine con angoli arrotondati)

2) Applicare questa trasformazione alla richiesta Picasso su dispositivi pre-L

3) dal momento che CardView aggiunge un certo margine per l'immagine - sbarazzarsi di esso su dispositivi pre-L chiamando setPreventOverlap(false)

Torna all'inizio codice:

trasformazione personalizzato:

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

Se si desidera avere una soluzione globale per questo problema, è possibile utilizzare Carbon's CardView. Fissa correttamente il suo contenuto agli angoli arrotondati su tutti i dispositivi a Froyo. Vedere l'immagine:

Answer 4

Funziona per me in questo modo:

1. Sostituire la ImageView con RoundedImageView (https://github.com/vinc3m1/RoundedImageView).
2. Impostare l'attributo riv_corner_radius su RoundedImageView per corrispondere all'angolo di CardView.
3. Impostare cardPreventCornerOverlap su falso su CardView (app:cardPreventCornerOverlap="false").
4. Sembra lo stesso su L e pre-L ora.

Answer 5

Utilizzare il codice seguente.

Importante: non impostare lo sfondo per ImageView 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>