Comment arrondir une image avec la bibliothèque Glide?


197

Alors, quelqu'un sait comment afficher une image avec des coins arrondis avec Glide? Je charge une image avec Glide, mais je ne sais pas comment passer des paramètres arrondis à cette bibliothèque.

J'ai besoin d'une image d'affichage comme dans l'exemple suivant:

entrez la description de l'image ici


2
J'ai utilisé github.com/hdodenhof/CircleImageView pour une vue d'image
arrondie

1
Je sais comment utiliser Glide lib avec CircleImageView, mais je recherche un moyen possible de le faire avec seulement Glide lib. Avez-vous une méthode dans Glide lib pour le faire ou ce n'est pas pris en charge?
mr.boyfox

Réponses:


487

Glide V4:

    Glide.with(context)
        .load(url)
        .circleCrop()
        .into(imageView);

Glide V3:

Vous pouvez utiliser RoundedBitmapDrawablepour des images circulaires avec Glide. Aucune ImageView personnalisée n'est requise.

 Glide.with(context).load(url).asBitmap().centerCrop().into(new BitmapImageViewTarget(imageView) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(context.getResources(), resource);
            circularBitmapDrawable.setCircular(true);
            imageView.setImageDrawable(circularBitmapDrawable);
        }
    });

6
cela ne crée cependant pas de frontière.
ZakTaccardi

1
@ jimmy0251 Non, tu ne peux pas. Les drawables glide ne sont pas BitmapDrawables. Ce sont des tirages de transition et des tirages glissés qui se fondent de l'espace réservé à l'image réelle. RoundedBitmapDrawable ne peut pas gérer cela.
Greg Ennis

7
définir l'arrière-plan avec une forme tirable ovale. et donner un rembourrage à imageview pour créer une bordure.
Lalit Jadav

2
Si vous avez un problème, vérifiez la prochaine solution de Roman Samoylenko qui fonctionne.
Pabel

1
Au lieu de .centerCrop()vous dire probablement.circleCrop()
Thanasis Kapelonis

66

Vérifiez ce post, glide vs picasso ...
Edit : le post lié n'appelle pas une différence importante dans les bibliothèques. Glide effectue le recyclage automatiquement. Voir le commentaire de TWiStErRob pour plus.

Glide.with(this).load(URL).transform(new CircleTransform(context)).into(imageView);

public static class CircleTransform extends BitmapTransformation {
    public CircleTransform(Context context) {
        super(context);
    }

    @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

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

        // TODO this could be acquired from the pool too
        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);
        return result;
    }

    @Override public String getId() {
        return getClass().getName();
    }
} 

ça a l'air intéressant. Cela fonctionne-t-il bien avec le plan d'API 21?
Teovald

hmm, je pourrais l'utiliser alors. Je vais essayer d'utiliser simplement une vue personnalisée, je ne voudrais pas avoir à créer une deuxième bitmap :). En outre, vous devez toujours utiliser le pool de
bitmaps

Méfiez-vous d'utiliser public String getId()la façon dont il est affiché dans le code car il renvoie le même identifiant pour toutes les images et il pourrait donc arriver que glide définisse de vieilles images arrondies tandis que sans transformations, il définira l'image correcte! Je ne sais pas comment fonctionne le glissement, mais il semble qu'il cache les transformations d'images (pour éviter les calculs durs, je suppose). Et l'identifiant est utilisé comme l'identifiant de l'image transformée. J'ai ajouté une URL d'image au constructeur et fait la méthode mentionnée renvoyant l'ID résultant comme:this.id = String.format("%s:%s",this.getClass().getSimpleName(),id);
Stan

2
La seule exigence de Stan pour les identifiants de transformation est qu'ils sont uniques parmi toutes les transformations, donc l'utilisation ici est correcte. Les clés de cache incluront à la fois l'ID source et l'ID de transformation, de sorte que l'ID de transformation est un mixage plutôt qu'un remplacement. Voir github.com/bumptech/glide/wiki/…
Sam Judd

4
Existe-t-il un moyen d'appliquer la transformation à l'espace réservé?
Sinigami

45

La manière la plus simple (nécessite Glide 4.xx)

Glide.with(context).load(uri).apply(RequestOptions().circleCrop()).into(imageView)

cela ne compile même pas ... RequestOptions ()?
Rafael Lima

3
@RafaelLima C'est écrit en Kotlin.
Roman Samoylenko

1
Remarquez, cela .apply()va après .load().
Johnny Five,

est RequestOptions.circleCropTransform (), pas RequestOptions ().
Sourires

vous devez écrire Glide.with (context) .load (uri) .apply (circleCrop ()). dans (imageView) regardez la fonction apply.
Jaspal

25

Essayez de cette façon

code

Glide.with(this)
    .load(R.drawable.thumbnail)
    .bitmapTransform(new CropCircleTransformation(this))
    .into(mProfile);

XML

<ImageView
  android:id="@+id/img_profile"
  android:layout_width="76dp"
  android:layout_height="76dp"
  android:background="@drawable/all_circle_white_bg"
  android:padding="1dp"/>

all_circle_white_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="oval">
      <solid android:color="@android:color/white"/>
  </shape>
  </item>
</selector>

9

sa très simple j'ai vu la bibliothèque Glide sa très bonne bibliothèque et base d'essais sur la bibliothèque de Google de volley

utiliser cette bibliothèque pour une vue d'image arrondie

https://github.com/hdodenhof/CircleImageView

maintenant

// Pour une vue simple:

 @Override
 public void onCreate(Bundle savedInstanceState) {
  ...

  CircleImageView civProfilePic = (CircleImageView)findViewById(R.id.ivProfile);
  Glide.load("http://goo.gl/h8qOq7").into(civProfilePic);
}

// Pour une liste:

@Override
public View getView(int position, View recycled, ViewGroup container) {
final ImageView myImageView;
 if (recycled == null) {
    myImageView = (CircleImageView) inflater.inflate(R.layout.my_image_view,
            container, false);
} else {
    myImageView = (CircleImageView) recycled;
}

String url = myUrls.get(position);

Glide.load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .animate(R.anim.fade_in)
    .into(myImageView);

  return myImageView;
}

et en XML

<de.hdodenhof.circleimageview.CircleImageView
   android:id="@+id/ivProfile
   android:layout_width="160dp"
   android:layout_height="160dp"
   android:layout_centerInParent="true"
   android:src="@drawable/hugh"
   app:border_width="2dp"
   app:border_color="@color/dark" />

2
Comme mentionné dans la réponse précédente, cette méthode ne fonctionne pas bien non plus. Au moins pour 'de.hdodenhof: circleimageview: 1.2.2' + 'com.github.bumptech.glide: glide: 3.5.2'. Vérifié et revérifié. Également le même problème avec glide 3.4. + Et circleimageview 1.2.1
Stan

+1 pour le .centerCrop (). A travaillé pour moi avec DiamondImageView plus .asBitmap ().
felippe

1
Nécessite d'appeler .dontAnimate () sur glide, ce qui n'est pas acceptable
Greg Ennis

+1 Mais notez également que Chargement d'images Internet avec Glide
hérisson

9

Les autres solutions n'ont pas fonctionné pour moi. J'ai trouvé qu'ils avaient tous des inconvénients importants:

  • Les solutions utilisant des transformations de glissement ne fonctionnent pas avec les espaces réservés
  • Les solutions utilisant des vues d'images arrondies ne fonctionnent pas avec les animations (c'est-à-dire le fondu enchaîné)
  • Les solutions utilisant une méthode générique d'un parent qui coupe ses enfants (c'est-à-dire la réponse acceptée ici ) ne fonctionnent pas bien avec glide

Il est vraiment intéressant de constater qu'après avoir tâtonné avec cela, j'ai trouvé la page de la bibliothèque Fresco sur les coins et les cercles arrondis dans laquelle ils énumèrent essentiellement les mêmes limitations et concluent par la déclaration:

il n'y a pas vraiment de bonne solution pour arrondir les coins sur Android et il faut choisir entre les compromis susmentionnés

C'est incroyable qu'en ce moment nous n'avons toujours pas de vraie solution. J'ai une solution alternative basée sur le lien que j'ai mis ci-dessus. L'inconvénient de cette approche est qu'elle suppose que votre arrière-plan est de couleur unie (les coins ne sont pas vraiment transparents). Vous l'utiliseriez comme ceci:

<RoundedCornerLayout ...>
    <ImageView ...>
</RoundedCornerLayout>

L'essentiel est ici et le code complet ici:

public class RoundedCornerLayout extends RelativeLayout {
    private Bitmap maskBitmap;
    private Paint paint;
    private float cornerRadius;

    public RoundedCornerLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        setWillNotDraw(false);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        if (maskBitmap == null) {
            // This corner radius assumes the image width == height and you want it to be circular
            // Otherwise, customize the radius as needed
            cornerRadius = canvas.getWidth() / 2;
            maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
        }

        canvas.drawBitmap(maskBitmap, 0f, 0f, paint);
    }

    private Bitmap createMask(int width, int height) {
        Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mask);

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE); // TODO set your background color as needed

        canvas.drawRect(0, 0, width, height, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

        return mask;
    }
}

6

Maintenant, dans Glide V4, vous pouvez directement utiliser CircleCrop ()

Glide.with(fragment)
  .load(url)
  .circleCrop()
  .into(imageView);

Types intégrés

  • CenterCrop
  • FitCenter
  • CircleCrop

5

Utilisez cette transformation, cela fonctionnera bien.

public class CircleTransform extends BitmapTransformation {
public CircleTransform(Context context) {
    super(context);
}

@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
    return circleCrop(pool, toTransform);
}

private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
    if (source == null) return null;

    int borderColor = ColorUtils.setAlphaComponent(Color.WHITE, 0xFF);
    int borderRadius = 3;

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

    // TODO this could be acquired from the pool too
    Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);
    if (squared != source) {
        source.recycle();
    }

    Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
    if (result == null) {
        result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
    }

    Canvas canvas = new Canvas(result);
    Paint paint = new Paint();
    paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
    paint.setAntiAlias(true);
    float r = size / 2f;
    canvas.drawCircle(r, r, r, paint);

    // Prepare the background
    Paint paintBg = new Paint();
    paintBg.setColor(borderColor);
    paintBg.setAntiAlias(true);

    // Draw the background circle
    canvas.drawCircle(r, r, r, paintBg);

    // Draw the image smaller than the background so a little border will be seen
    canvas.drawCircle(r, r, r - borderRadius, paint);

    squared.recycle();

    return result;
}

@Override
public String getId() {
    return getClass().getName();
}} 

5

Pour Glide 4.xx

utilisation

Glide
  .with(context)
  .load(uri)
  .apply(
      RequestOptions()
        .circleCrop())
  .into(imageView)

du doc, il a déclaré que

Images rondes: CircleImageView / CircularImageView / RoundedImageView sont connus pour avoir des problèmes avec TransitionDrawable (.crossFade () avec .thumbnail () ou .placeholder ()) et des GIF animés, utilisez une BitmapTransformation (.circleCrop () sera disponible dans v4) ou .dontAnimate () pour résoudre le problème


4

Selon cette réponse, le moyen le plus simple dans les deux langues est:

Kotlin:

Glide.with(context).load(uri).apply(RequestOptions().circleCrop()).into(imageView)

Java:

Glide.with(context).load(uri).apply(new RequestOptions().circleCrop()).into(imageView)

Cela fonctionne sur Glide 4.XX


4

La réponse de Roman Samoylenko était correcte, sauf que la fonction a changé. La bonne réponse est

Glide.with(context)
                .load(yourImage)
                .apply(RequestOptions.circleCropTransform())
                .into(imageView);

3

J'ai trouvé une solution facile et simple pour ajouter une bordure sur la vue d'image dans laquelle la couleur souhaite définir ou ajouter un dégradé sur l'image.

PAS:

  1. Prenez une disposition de cadre et ajoutez deux images.Vous pouvez définir la taille selon vos besoins. Pour imgPlaceHolder, vous avez besoin d'une image ou d'une couleur blanche que vous souhaitez définir.

        <ImageView
            android:id="@+id/imgPlaceHolder"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:src="@drawable/white_bg"/>

        <ImageView
            android:id="@+id/imgPic"
            android:layout_width="190dp"
            android:layout_height="190dp"
            android:layout_gravity="center"
            android:src="@drawable/image01"/>
    </FrameLayout>
  1. Après avoir placé ce code sur un fichier xml, mettez la ligne ci-dessous dans le fichier java.

    Glide.with(this).load(R.drawable.image01).asBitmap().centerCrop().into(new BitmapImageViewTarget(imgPic) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(getResources(), resource);
            circularBitmapDrawable.setCircular(true);
            imageView.setImageDrawable(circularBitmapDrawable);
        }
    });
    
    Glide.with(this).load(R.drawable.white_bg).asBitmap().centerCrop().into(new BitmapImageViewTarget(imgPlaceHolder) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(getResources(), resource);
            circularBitmapDrawable.setCircular(true);
            imgTemp2.setImageDrawable(circularBitmapDrawable);
        }
    });

Cela rendra la bordure de la vue d'image sans aucun rembourrage ni marge supplémentaire.

REMARQUE : l'image blanche est obligatoire pour la bordure, sinon elle ne fonctionnera pas.

Codage heureux :)


3

Avec la bibliothèque glide, vous pouvez utiliser ce code:

Glide.with(context)
    .load(imageUrl)
    .asBitmap()
    .placeholder(R.drawable.user_pic)
    .centerCrop()
    .into(new BitmapImageViewTarget(img_profPic) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), resource);

            circularBitmapDrawable.setCircular(true);
            img_profPic.setImageDrawable(circularBitmapDrawable);
        }
    });

vous pouvez également créer une image arrondie à l'aide de la bibliothèque glid.
priti

2

Je le cherchais plus tôt et je l'ai fait de la manière la plus simple, j'espère que cela vous plaira.

 //crete this method into your Utils class and call this method wherever you want to use.
    //you can set these placeHolder() and error() image static as well. I made it as comment inside this method, then no need to use [placeHolderUrl and errorImageUrl] parameters. remove it from this method.
    public static void loadImage(final Activity context, ImageView imageView, String url, int placeHolderUrl, int errorImageUrl) {
        if (context == null || context.isDestroyed()) return;

        //placeHolderUrl=R.drawable.ic_user;
        //errorImageUrl=R.drawable.ic_error;
            Glide.with(context) //passing context
                    .load(getFullUrl(url)) //passing your url to load image.
                    .placeholder(placeHolderUrl) //this would be your default image (like default profile or logo etc). it would be loaded at initial time and it will replace with your loaded image once glide successfully load image using url.
                    .error(errorImageUrl)//in case of any glide exception or not able to download then this image will be appear . if you won't mention this error() then nothing to worry placeHolder image would be remain as it is.
                    .diskCacheStrategy(DiskCacheStrategy.ALL) //using to load into cache then second time it will load fast.
                    .transform(new CircleTransform(context))//this CircleTransform class help to crop an image as circle.
                    .animate(R.anim.fade_in) // when image (url) will be loaded by glide then this face in animation help to replace url image in the place of placeHolder (default) image.
                    .fitCenter()//this method help to fit image into center of your ImageView
                    .into(imageView); //pass imageView reference to appear the image.
    } 

CircleTransform.java

  public class CircleTransform extends BitmapTransformation {
    public CircleTransform(Context context) {
        super(context);

        if(context==null)
            return;
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

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


        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);
        return result;
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    @Override
    public String getId() {
        return getClass().getName();
    }
}

fade_in.xml pour un fondu en animation.

    <set xmlns:android="http://schemas.android.com/apk/res/android">
<!--THIS ANIMATION IS USING FOR FADE IN -->

<alpha
    android:duration="800"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:toAlpha="1.0" />

enfin pour appeler cette méthode.

Utils.loadImage(YourClassName.this,mImageView,url,R.drawable.ic_user,R.drawable.ic_error);

2

Vous pouvez simplement appeler le constructeur RoundedCornersTransformation, qui possède une entrée d'énumération cornerType. Comme ça:

Glide.with(context)
            .load(bizList.get(position).getCover())
            .bitmapTransform(new RoundedCornersTransformation(context,20,0, RoundedCornersTransformation.CornerType.TOP))
            .into(holder.bizCellCoverImg);

mais vous devez d'abord ajouter Glide Transformations à votre projet.


2

Voici une façon plus modulaire et plus propre de découper en cercle votre bitmap dans Glide:

  1. Créez une transformation personnalisée en étendant BitmapTransformationpuis en remplaçant la transformméthode comme ceci:

Pour Glide 4.xx

public class CircularTransformation extends BitmapTransformation {

@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
    RoundedBitmapDrawable circularBitmapDrawable =
            RoundedBitmapDrawableFactory.create(null, toTransform);
    circularBitmapDrawable.setCircular(true);
    Bitmap bitmap = pool.get(outWidth, outHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    circularBitmapDrawable.setBounds(0, 0, outWidth, outHeight);
    circularBitmapDrawable.draw(canvas);
    return bitmap;
    }

@Override
public void updateDiskCacheKey(MessageDigest messageDigest) {}

}

Pour Glide 3.xx

public class CircularTransformation extends BitmapTransformation {

@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
    RoundedBitmapDrawable circularBitmapDrawable =
            RoundedBitmapDrawableFactory.create(null, toTransform);
    circularBitmapDrawable.setCircular(true);
    Bitmap bitmap = pool.get(outWidth, outHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    circularBitmapDrawable.setBounds(0, 0, outWidth, outHeight);
    circularBitmapDrawable.draw(canvas);
    return bitmap;
    }

@Override
public String getId() {
    // Return some id that uniquely identifies your transformation.
    return "CircularTransformation";
    }

}
  1. Ensuite, définissez-le dans le générateur Glide où vous en avez besoin:
Glide.with(yourActivity)
   .load(yourUrl)
   .asBitmap()
   .transform(new CircularTransformation())
   .into(yourView);

J'espère que cela t'aides :)


2
private void setContactImage(@NonNull ViewHolder holder, ClsContactDetails clsContactDetails) {
    Glide.with(context).load(clsContactDetails.getPic())
        .apply(new RequestOptions().centerCrop().circleCrop().placeholder(R.mipmap.ic_launcher)).into(holder.ivPersonImage);
}

2
implementation 'com.github.bumptech.glide:glide:4.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'


RequestOptions options=new RequestOptions();
        options.centerCrop().placeholder(getResources().getDrawable(R.drawable.user_placeholder));
        Glide.with(this)
                .load(preferenceSingleTon.getImage())
                .apply(options)
                .into(ProfileImage);

2

Circle crop + placeholder + crossfade

 Glide.with(context!!)
                    .load(randomImage)
                    .apply(RequestOptions.bitmapTransform(CircleCrop()).error(R.drawable.nyancat_animated))
                    .transition(DrawableTransitionOptions()
                            .crossFade())
                    .into(picture)

entrez la description de l'image ici


1

Glide version 4.6.1

Glide.with(context)
.load(url)
.apply(RequestOptions.bitmapTransform(new CircleCrop()))
.into(imageView);

1

Dans ce cas, j'ai besoin d'ajouter des ombres et l'altitude imageView ne fonctionne pas

implémentation "com.github.bumptech.glide: glide: 4.10.0"

XML

<FrameLayout
    android:id="@+id/fl_image"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_margin="10dp"
    android:background="@drawable/card_circle_background"
    android:elevation="8dp">

    <ImageView
        android:id="@+id/iv_item_employee"
        android:layout_width="60dp"
        android:layout_height="60dp"
        tools:background="@color/colorPrimary" />
</FrameLayout>

Forme dessinable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
     <solid android:color="@color/white"/>
</shape>

Configuration Glide

Glide.with(this)
    .asBitmap()
    .load(item.image)
    .apply(RequestOptions.circleCropTransform())
    .into(iv_item_employee)

0

Vous devez utiliser CircularImageView pour afficher ce type d'image ...

Vous utilisez la bibliothèque Glide qui chargeait des images.

Créez un fichier de classe dans votre projet et chargez-le dans Imageview ... et vous obtiendrez le résultat souhaité ...

Essayez de suivre le code ...

XML

 <com.yourpackage.CircularImageView
    android:id="@+id/imageview"
    android:layout_width="96dp"
    android:layout_height="96dp"
    app:border="true"
    app:border_width="3dp"
    app:border_color="@color/white"
    android:src="@drawable/image" />

CircularImageView.java

public class CircularImageView extends ImageView {
    private int borderWidth;
    private int canvasSize;
    private Bitmap image;
    private Paint paint;
    private Paint paintBorder;

    public CircularImageView(final Context context) {
        this(context, null);
    }

    public CircularImageView(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.circularImageViewStyle);
    }

    public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        // init paint
        paint = new Paint();
        paint.setAntiAlias(true);

        paintBorder = new Paint();
        paintBorder.setAntiAlias(true);

        // load the styled attributes and set their properties
        TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CircularImageView, defStyle, 0);

        if(attributes.getBoolean(R.styleable.CircularImageView_border, true)) {
            int defaultBorderSize = (int) (4 * getContext().getResources().getDisplayMetrics().density + 0.5f);
            setBorderWidth(attributes.getDimensionPixelOffset(R.styleable.CircularImageView_border_width, defaultBorderSize));
            setBorderColor(attributes.getColor(R.styleable.CircularImageView_border_color, Color.WHITE));
        }

        if(attributes.getBoolean(R.styleable.CircularImageView_shadow, false))
            addShadow();
    }

    public void setBorderWidth(int borderWidth) {
        this.borderWidth = borderWidth;
        this.requestLayout();
        this.invalidate();
    }

    public void setBorderColor(int borderColor) {
        if (paintBorder != null)
            paintBorder.setColor(borderColor);
        this.invalidate();
    }

    public void addShadow() {
        setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
        paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
    }

    @Override
    public void onDraw(Canvas canvas) {
        // load the bitmap
        image = drawableToBitmap(getDrawable());

        // init shader
        if (image != null) {

            canvasSize = canvas.getWidth();
            if(canvas.getHeight()<canvasSize)
                canvasSize = canvas.getHeight();

            BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvasSize, canvasSize, false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            paint.setShader(shader);

            // circleCenter is the x or y of the view's center
            // radius is the radius in pixels of the cirle to be drawn
            // paint contains the shader that will texture the shape
            int circleCenter = (canvasSize - (borderWidth * 2)) / 2;
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) + borderWidth - 4.0f, paintBorder);
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) - 4.0f, paint);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = measureWidth(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    private int measureWidth(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            // The parent has determined an exact size for the child.
            result = specSize;
        } else if (specMode == MeasureSpec.AT_MOST) {
            // The child can be as large as it wants up to the specified size.
            result = specSize;
        } else {
            // The parent has not imposed any constraint on the child.
            result = canvasSize;
        }

        return result;
    }

    private int measureHeight(int measureSpecHeight) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpecHeight);
        int specSize = MeasureSpec.getSize(measureSpecHeight);

        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else if (specMode == MeasureSpec.AT_MOST) {
            // The child can be as large as it wants up to the specified size.
            result = specSize;
        } else {
            // Measure the text (beware: ascent is a negative number)
            result = canvasSize;
        }

        return (result + 2);
    }

    public Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable == null) {
            return null;
        } else if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable) drawable).getBitmap();
        }

        Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
                drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);

        return bitmap;
    }
}

Remarque :

Vous pouvez utiliser

CircularImageView imgIcon = (CircularImageView)findViewById(R.id.imageview);

ou

ImageView imgIcon = (ImageView)findViewById(R.id.imageview);

cela n'affectera pas vos autres bibliothèques ... ne pas avoir à changer votre code pour télécharger l'image ou autre chose ... il peut simplement être défini en utilisant XML aussi ..


3
J'ai essayé Glide + CircularImageView (et RoundedImageView) et cela ne fonctionne pas bien si vous commencez à utiliser des espaces réservés (pendant que votre image est téléchargée) et des animations d'apparence. Picasso n'a pas ce problème. Vous pouvez en red plus ici: github.com/vinc3m1/RoundedImageView/issues/76
zmicer

Utilisez simplement .asBitmap dans l'appel Glide et cela fonctionnera bien.
granko87

Nécessite d'appeler .dontAnimate () sur glide, ce qui n'est pas acceptable
Greg Ennis
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.