web-dev-qa-db-fra.com

Comment faire une ImageView en forme circulaire?

Je veux faire quelque chose comme ça.

image in List view

Il s'agit d'une ligne de vue de liste avec le nom et l'image de l'utilisateur.

J'ai fait quelques recherches et j'ai fait l'image circulaire, mais pas la solution parfaite. Toute aide m'aidera.

mon code ajouté à la classe Image Loader

public Bitmap processBitmap(Bitmap bitmap) {
    int pixels = 0;
    if (mRound == 0)
        pixels = 120;
    else
        pixels = mRound;
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
            bitmap.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    final float roundPx = pixels;

    Paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    Paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, Paint);

    Paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, Paint);

    return output;
}

Merci.

androidimageview
27
shailesh

vous pouvez également utiliser cette fonction ... Son travail pour moi ..

public Bitmap getRoundedShape(Bitmap scaleBitmapImage) {
    int targetWidth = 50;
    int targetHeight = 50;
    Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, 
                        targetHeight,Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(targetBitmap);
    Path path = new Path();
    path.addCircle(((float) targetWidth - 1) / 2,
        ((float) targetHeight - 1) / 2,
        (Math.min(((float) targetWidth), 
        ((float) targetHeight)) / 2),
        Path.Direction.CCW);

    canvas.clipPath(path);
    Bitmap sourceBitmap = scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap, 
        new Rect(0, 0, sourceBitmap.getWidth(),
        sourceBitmap.getHeight()), 
        new Rect(0, 0, targetWidth, targetHeight), null);
    return targetBitmap;
}
47
Piyush

Cela ne répondra probablement pas à votre question, mais, comme alternative, vous pouvez imiter cet effet en ayant 2 ImageViews dans un FrameLayout par exemple: un en bas - ce sera l'image, et un en haut - ce sera un carré gris avec un cercle au milieu, et le "corps" du cercle à être transparent.

De cette façon, vous n'aurez à effectuer aucun traitement bitmap. Mais choisissez celui qui convient le mieux à vos besoins.

10
Andy Res

Ceci est accompli merci pour la réponse.

Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Paint paint = new Paint();
Paint.setStrokeWidth(5);
Canvas c = new Canvas(circleBitmap);
 //This draw a circle of Gerycolor which will be the border of image.
c.drawCircle(bitmap.getWidth()/2, bitmap.getHeight()/2, bitmap.getWidth()/2, Paint);
BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint.setAntiAlias(true);
Paint.setShader(shader);
// This will draw the image.
c.drawCircle(bitmap.getWidth()/2, bitmap.getHeight()/2, bitmap.getWidth()/2-2, Paint);

enter image description here

Image arrondie Utilisation de imageLoader github.com/nostra13/Android-Universal-Image-Loader Créez une option;

 DisplayImageOptions options = new DisplayImageOptions.Builder()
 // this will make circle, pass the width of image 
.displayer(new RoundedBitmapDisplayer(getResources().getDimensionPixelSize(R.dimen.image_dimen_‌​menu))) 
.cacheOnDisc(true) 
.build(); 
imageLoader.displayImage(url_for_image,ImageView,options);

Ou vous pouvez utiliser la bibliothèque Picasso de squre.

Picasso.with(mContext).load(URL+b.image)
 .placeholder(R.drawable.profile) 
    .error(R.drawable.profile) 
    .transform(new RoundedTransformation(50, 4)) 
    .resizeDimen(R.dimen.list_detail_image_size, R.dimen.list_detail_image_size) 
    .centerCrop() 
    .into(v.im_user);

vous pouvez télécharger RoundedTrasformation fichier ici

IMPORTANT: j'ai trouvé un problème lors de l'utilisation de l'UIL. Si vous n'avez pas mis l'attribut xml Android: contentDescription = "TODO" dans ImageView. Ensuite, UIL affiche une image simple. J'espère que tout comprend

6
shailesh