Realizza ImageView con Round Corner Usando Picasso

Question

So che ci sono molti link disponibili per rendere l'angolo rotondo ImageView. Ma sto usando la libreria Picasso per il caricamento dell'immagine .. Mi riferisco allo link per ottenere il risultato. Ma il problema è che lo sto usando in ListView e per il LIstView's primo articolo ImageView funziona perfettamente ma per il rimanente una volta che la trasformazione non funziona.

Answer 1

Sto usando questa trasformazione: https://gist.github.com/julianshen/5829333

Picasso.with(activity).load(url).transform(new CircleTransform()).into(imageView); 

Answer 2

È possibile utilizzare RoundedCornersTransformation classe di picasso-transformations biblioteca.

Esempio:

final int radius = 5; 
final int margin = 5; 
final Transformation transformation = new RoundedCornersTransformation(radius, margin); 
Picasso.with(activity).load(url).transform(transformation).into(imageView); 

Answer 3

È possibile utilizzare questa classe per fare gli angoli arrotondati rettangolo visualizzazione dell'immagine con Picasso, usare in questo modo

Picasso.with(activity).load(url).transform(new RoundedCornersTransform(this)).into(imageView); 

Ecco l'RoundedCornersTransform di classe.

package com.demo.picasso; 

import android.graphics.Bitmap; 
import android.graphics.BitmapShader; 
import android.graphics.Canvas; 
import android.graphics.Paint; 
import android.graphics.RectF; 

import com.squareup.picasso.Transformation; 


public class RoundedCornersTransform implements Transformation { 
@Override 
public Bitmap transform(Bitmap source) { 
    int size = Math.min(source.getWidth(), source.getHeight()); 

    int x = (source.getWidth() - size)/2; 
    int y = (source.getHeight() - size)/2; 

    Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size); 
    if (squaredBitmap != source) { 
     source.recycle(); 
    } 

    Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig()); 

    Canvas canvas = new Canvas(bitmap); 
    Paint paint = new Paint(); 
    BitmapShader shader = new BitmapShader(squaredBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP); 
    paint.setShader(shader); 
    paint.setAntiAlias(true); 

    float r = size/8f; 
    canvas.drawRoundRect(new RectF(0, 0, source.getWidth(), source.getHeight()), r, r, paint); 
    squaredBitmap.recycle(); 
    return bitmap; 
} 

@Override 
public String key() { 
    return "rounded_corners"; 
    } 
} 

Answer 4

ho usato RoundedCornersTransformation classe di picasso-transformations biblioteca. Ho avuto un adattatore personalizzato con schema di visualizzazione nel mio listview. Ho aggiunto sotto la dipendenza nel mio build.gradle:

dependencies { 
     compile 'jp.wasabeef:picasso-transformations:2.1.0' 
} 

E nella mia customArrayAdapter.java, ho aggiunto:

Picasso.with(getContext()).load(path).transform(new RoundedCornersTransformation(10,10)).resize(175,300).into(viewHolder.ivImage);
Ciò sia ridimensionare e dare angoli arrotondati a voi le immagini.

Answer 5

seguito @stevyhacker's answer e this related one, mi si avvicinò con questo:

import android.graphics.Bitmap; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.graphics.Path; 
import android.graphics.PorterDuff; 
import android.graphics.PorterDuffXfermode; 
import android.graphics.Rect; 
import android.graphics.RectF; 

import com.squareup.picasso.Transformation; 


public class RoundedCornersTransform implements Transformation { 
    private static Bitmap createRoundedRectBitmap(Bitmap bitmap, 
                float topLeftCorner, float topRightCorner, 
                float bottomRightCorner, float bottomLeftCorner) { 
     Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), 
       Bitmap.Config.ARGB_8888); 
     Canvas canvas = new Canvas(output); 

     final int color = Color.WHITE; 
     final Paint paint = new Paint(); 
     final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); 
     final RectF rectF = new RectF(rect); 
     Path path = new Path(); 
     float[] radii = new float[]{ 
       topLeftCorner, bottomLeftCorner, 
       topRightCorner, topRightCorner, 
       bottomRightCorner, bottomRightCorner, 
       bottomLeftCorner, bottomLeftCorner 
     }; 

     paint.setAntiAlias(true); 
     canvas.drawARGB(0, 0, 0, 0); 
     paint.setColor(color); 
     path.addRoundRect(rectF, radii, Path.Direction.CW); 
     canvas.drawPath(path, paint); 
     paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); 
     canvas.drawBitmap(bitmap, rect, rect, paint); 
     return output; 
    } 

    @Override 
    public Bitmap transform(Bitmap source) { 
     int size = Math.min(source.getWidth(), source.getHeight()); 

     int x = (source.getWidth() - size)/2; 
     int y = (source.getHeight() - size)/2; 

     Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size); 
     if (squaredBitmap != source) { 
      source.recycle(); 
     } 

     float r = size/4f; 

     Bitmap roundedBitmap = createRoundedRectBitmap(squaredBitmap, r, r, r, r); 

     squaredBitmap.recycle(); 

     return roundedBitmap; 
    } 

    @Override 
    public String key() { 
     return "rounded_corners"; 
    } 
} 

usare in questo modo:

Picasso.with(context).load(url).transform(new RoundedCornersTransform()).into(imageView); 

probabilmente ha bisogno alcuni miglioramenti però, quindi occhio!

Answer 6

Come detto here. È possibile utilizzare la classe MaskTransformation della libreria picasso-transformations.

Esempio:

final Transformation transformation = new MaskTransformation(getContext(), R.drawable.rounded_convers_transformation); 
Picasso.with(activity).load(url).transform(transformation).into(imageView); 

res/drawable/rounded_convers_transformation.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
    <corners android:radius="5dp"/> 
    <solid android:color="@color/black"/> 
</shape> 

UPDATE: a meno di notare che si dovrebbe anche .resize(w,h) l'immagine, perché se l'immagine sarà grande la volontà rotonda non essere determinabile