web-dev-qa-db-fra.com

android: créer une image circulaire avec picasso

La question avait été posée et une promesse avait été faite pour la version même de Picasso que j'utilise: comment puis-je envoyer un bitmap circulaire à un ImageView à l'aide de Picasso? Je suis nouveau à Picasso et la seule chose que j’ai utilisée est 

Picasso.with(context).load(url).resize(w, h).into(imageview);

J'ai déjà trouvé https://Gist.github.com/julianshen/5829333 mais je ne suis pas sûr de savoir comment le combiner avec la ligne ci-dessus de manière non maladroite.

androidbitmapimageviewpicasso
94
Katedral Pillon

Recherchez un peu avant car il y a des réponses disponibles. Quoi qu'il en soit, suivez Ce lien et lisez-le attentivement pour savoir comment l'utiliser.

essaye ça:

import com.squareup.picasso.Transformation;

public class CircleTransform 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 / 2f;
        canvas.drawCircle(r, r, r, Paint);

        squaredBitmap.recycle();
        return bitmap;
    }

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

puis appliquez-le simplement comme:

Picasso.with(activity).load(mayorShipImageLink).transform(new CircleTransform()).into(ImageView);
259
Anirudh Sharma

voici quelque chose qui est fourni par la bibliothèque support-v4! Regardez dans RoundedBitmapDrawable . Pas besoin de rouler le vôtre:

Picasso.with(context).load(url)
                        .resize(w, h)
                        .into(myImageView, new Callback() {
                            @Override
                            public void onSuccess() {
                                Bitmap imageBitmap = ((BitmapDrawable) myImageView.getDrawable()).getBitmap();
                                RoundedBitmapDrawable imageDrawable = RoundedBitmapDrawableFactory.create(getResources(), imageBitmap);
                                imageDrawable.setCircular(true);
                                imageDrawable.setCornerRadius(Math.max(imageBitmap.getWidth(), imageBitmap.getHeight()) / 2.0f);
                                myImageView.setImageDrawable(imageDrawable);
                            }
                            @Override
                            public void onError() {
                                myImageView.setImageResource(R.drawable.default_image);
                            }
                        });

Remarque: Picasso a également un appel .transform (customTransformation)} que vous pouvez théoriquement utiliser, mais j’ai eu des problèmes avec cela. Cela fonctionne ci-dessus. Bonne chance!

40
goodKode

Une autre alternative que j'ai trouvée était cette bibliothèque de gars. Cela fonctionne seul ou en conjonction avec Picasso. J'ai choisi l'itinéraire Picasso, comme ci-dessous:

https://github.com/vinc3m1/RoundedImageView

Transformation transformation = new RoundedTransformationBuilder()
          .borderColor(Color.BLACK)
          .borderWidthDp(3)
          .cornerRadiusDp(30)
          .oval(false)
          .build();

Picasso.with(context)
    .load(url)
    .fit()
    .transform(transformation)
    .into(imageView);

Travaillé pour moi!

15
Breeno

J'ai essayé toutes les solutions ci-dessus, mais aucune d'entre elles ne me donne de transformation de cercle sans recadrage d'image. Cette solution ne fonctionnera que pour les images de même largeur et hauteur.

premier ------

Picasso.with(getActivity())
            .load(url)
            .error(R.drawable.image2)
            .placeholder(R.drawable.ic_drawer)
            .resize(200, 200)
            .transform(new ImageTrans_CircleTransform())
            .into(imageView1);

alors fais ceci --------

import Android.graphics.Bitmap;
import Android.graphics.BitmapShader;
import Android.graphics.Canvas;
import Android.graphics.Color;
import Android.graphics.Paint;
import Android.graphics.Shader.TileMode;

import com.squareup.picasso.Transformation;
public class ImageTrans_CircleTransform implements Transformation {
 @Override
    public Bitmap transform(Bitmap source) {
 if (source == null || source.isRecycled()) {
                return null;
            }

            final int width = source.getWidth() + borderwidth;
            final int height = source.getHeight() + borderwidth;

            Bitmap canvasBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
            BitmapShader shader = new BitmapShader(source, TileMode.CLAMP, TileMode.CLAMP);
            Paint paint = new Paint();
            Paint.setAntiAlias(true);
            Paint.setShader(shader);

            Canvas canvas = new Canvas(canvasBitmap);
            float radius = width > height ? ((float) height) / 2f : ((float) width) / 2f;
            canvas.drawCircle(width / 2, height / 2, radius, Paint);

            //border code
            Paint.setShader(null);
            Paint.setStyle(Paint.Style.STROKE);
            Paint.setColor(bordercolor);
            Paint.setStrokeWidth(borderwidth);
            canvas.drawCircle(width / 2, height / 2, radius - borderwidth / 2, Paint);
            //--------------------------------------

            if (canvasBitmap != source) {
                source.recycle();
            }

            return canvasBitmap;
}
 @Override
    public String key() {
        return "circle";
    }
}
10
amit

Utilisez cette bibliothèque pour créer une imageview circulaire . Pour créer une ImageView circulaire, ajoutez cette bibliothèque CircularImageView à votre projet Et ajoutez CircularImageView dans votre modèle XML 

<com.pkmmte.view.CircularImageView
        Android:layout_width="250dp"
        Android:layout_height="250dp"
        Android:src="@drawable/image"
        app:border_color="#EEEEEE"
        app:border_width="4dp"
        app:shadow="true" />`

Ensuite, utilisez picasso pour charger l’image requise dans cette imageView. Picasso fait tout le cache dont vous n'avez pas à vous soucier

7
NIPHIN

Ajouter une dépendance de niveau

implementation 'jp.wasabeef:picasso-transformations:2.2.1'

Fin d'utilisation

Picasso.with(context)
       .load(url)
       .resize(w, h)
       .transform(new CropCircleTransformation())
       .into(imageview);

Wiki: Transformations Picasso

2
Nikolay Krasilnikov

Incluez le xml pouvant être dessiné du type Layer-list avec le code ci-dessous

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@+id/shape_status">
        <shape Android:shape="oval">
            <solid Android:color="@Android:color/black"/>
        </shape>
    </item>
<item Android:drawable="@drawable/ic_status_content"/></layer-list>

puis utilisez le XML pour votre ImageView dans le Android.src

 <ImageView
            Android:id="@+id/iconStatus"
            Android:layout_width="55dp"
            Android:layout_height="55dp"
            Android:layout_gravity="right"
            Android:src="@drawable/ic_circle_status"
            Android:layout_alignParentTop="true"
            Android:layout_alignParentEnd="true"/>
2
Marco Aurelio

Celui-ci a fonctionné pour moi

<com.androidhub4you.crop.RoundedImageView
        Android:id="@+id/imageView_round"
        Android:layout_width="100dp"
        Android:layout_height="100dp"
        Android:layout_marginTop="15dp"
        Android:src="@drawable/ic_launcher" />

http://www.androidhub4you.com/2014/10/Android-custom-shape-imageview-rounded.html

2
Aditya Vyas-Lakhan

Celui-ci fonctionne avec l'instantané actuel de Picasso 3:

class CircleTransformation : Transformation {

  override fun transform(source: RequestHandler.Result): RequestHandler.Result {
    if (source.bitmap == null) {
      return source
    }

    var bitmap: Bitmap

    // since we cant transform hardware bitmaps create a software copy first
    if (VERSION.SDK_INT >= VERSION_CODES.O && source.bitmap!!.config == Config.HARDWARE) {
      val softwareCopy = source.bitmap!!.copy(Config.ARGB_8888, true)
      if (softwareCopy == null) {
        return source
      } else {
        bitmap = softwareCopy
        source.bitmap!!.recycle()
      }
    } else {
      bitmap = source.bitmap!!
    }

    var size = bitmap.width
    // if bitmap is non-square first create square one
    if (size != bitmap.height) {
      var sizeX = size
      var sizeY = bitmap.height
      size = Math.min(sizeY, sizeX)
      sizeX = (sizeX - size) / 2
      sizeY = (sizeY - size) / 2

      val squareSource = Bitmap.createBitmap(bitmap, sizeX, sizeY, size, size)
      bitmap.recycle()
      bitmap = squareSource
    }

    val circleBitmap = Bitmap.createBitmap(size, size, Config.ARGB_8888)
    val canvas = Canvas(circleBitmap)
    val Paint = Paint()
    val shader = BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)

    Paint.shader = shader
    Paint.isAntiAlias = true
    val centerAndRadius = size / 2f
    canvas.drawCircle(centerAndRadius, centerAndRadius, centerAndRadius, Paint)

    bitmap.recycle()
    return RequestHandler.Result(circleBitmap, source.loadedFrom, source.exifRotation)
  }

  override fun key(): String {
    return "circleTransformation()"
  }
}

Picasso3 Gist: https://Gist.github.com/G00fY2/f3fbc468570024930c1fd9eb4cec85a1

0
G00fY

Voici ce qui a fonctionné pour moi avec Picasso v2.71828

class CircleTransform : Transformation {
override fun transform(source: Bitmap?): Bitmap? {
    if (source == null) {
        return source
    }

    var bitmap: Bitmap

    // since we cant transform hardware bitmaps create a software copy first
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && source.config == Bitmap.Config.HARDWARE) {
        val softwareCopy = source.copy(Bitmap.Config.ARGB_8888, true)
        if (softwareCopy == null) {
            return source
        } else {
            bitmap = softwareCopy
            source.recycle()
        }
    } else {
        bitmap = source
    }

    var size = bitmap.width
    // if bitmap is non-square first create square one
    if (size != bitmap.height) {
        var sizeX = size
        var sizeY = bitmap.height
        size = Math.min(sizeY, sizeX)
        sizeX = (sizeX - size) / 2
        sizeY = (sizeY - size) / 2

        val squareSource = Bitmap.createBitmap(bitmap, sizeX, sizeY, size, size)
        bitmap.recycle()
        bitmap = squareSource
    }

    val circleBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(circleBitmap)
    val Paint = Paint()
    val shader = BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)

    Paint.shader = shader
    Paint.isAntiAlias = true
    val centerAndRadius = size / 2f
    canvas.drawCircle(centerAndRadius, centerAndRadius, centerAndRadius, Paint)

    bitmap.recycle()
    return circleBitmap
}


override fun key(): String {
    return "circleTransformation()"
}

}

0
chabislav