Wie runde ich ein Bild mit der Glide-Bibliothek?


197

Weiß jemand, wie man mit Glide ein Bild mit abgerundeten Ecken anzeigt? Ich lade ein Bild mit Glide, weiß aber nicht, wie ich gerundete Parameter an diese Bibliothek übergeben soll.

Ich benötige ein Anzeigebild wie das folgende Beispiel:

Geben Sie hier die Bildbeschreibung ein


2
Ich habe github.com/hdodenhof/CircleImageView für ronded Bildansicht verwendet
MilapTank

1
Ich weiß, wie man Glide lib mit CircleImageView verwendet, aber ich suche nach möglichen Möglichkeiten, dies nur mit Glide lib zu tun. Haben Sie eine Methode in Glide lib, um dies zu tun, oder wird sie nicht unterstützt?
Mr. Boyfox

Antworten:


486

Glide V4:

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

Glide V3:

Sie können RoundedBitmapDrawablemit Glide für kreisförmige Bilder verwenden. Es ist keine benutzerdefinierte ImageView erforderlich.

 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
Dies schafft jedoch keine Grenze.
ZakTaccardi

1
@ Jimmy0251 Nein, du kannst nicht. Die Gleitzeichnungen sind keine BitmapDrawables. Sie sind Transitiondrawables und Glidedrawables, die vom Platzhalter zum realen Bild übergehen. Das RoundedBitmapDrawable kann damit nicht umgehen.
Greg Ennis

7
Hintergrund mit zeichnbarer Form oval setzen. und füllen Sie die Bildansicht auf, um einen Rahmen zu erstellen.
Lalit Jadav

2
Wenn Sie ein Problem haben, überprüfen Sie bitte die nächste Lösung von Roman Samoylenko, die funktioniert.
Pabel

1
Anstelle von .centerCrop()dir meinst du wahrscheinlich.circleCrop()
Thanasis Kapelonis

66

Überprüfen Sie diesen Beitrag, gleiten Sie gegen Picasso ...
Bearbeiten : Der verknüpfte Beitrag weist nicht auf einen wichtigen Unterschied in den Bibliotheken hin. Glide führt das Recycling automatisch durch. Weitere Informationen finden Sie im Kommentar von TWiStErRob .

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();
    }
} 

klingt interessant. Funktioniert es gut mit API 21's Outline?
Teovald

hmm, ich könnte das dann benutzen. Ich werde versuchen, einfach eine benutzerdefinierte Ansicht zu verwenden, ich möchte keine zweite Bitmap erstellen müssen :). Außerdem sollten Sie immer den Bitmap-Pool verwenden, um zu versuchen, eine Bitmap von dort zu erhalten :)
Teovald

Achten public String getId()Sie darauf, dass Sie nicht die im Code angezeigte Art und Weise verwenden, da für alle Bilder dieselbe ID zurückgegeben wird. Daher kann es vorkommen, dass beim Gleiten alte, abgerundete Bilder gesetzt werden, während ohne Transformationen das richtige Bild eingestellt wird! Ich weiß nicht, wie Gleiten funktioniert, aber es scheint, als würde es Bildtransformationen zwischenspeichern (um harte Berechnungen zu vermeiden, nehme ich an). Und die ID wird als ID des transformierten Bildes verwendet. Ich fügte dem Konstruktor eine URL des Bildes hinzu und machte die erwähnte Methode, die die resultierende ID zurückgab, wie:this.id = String.format("%s:%s",this.getClass().getSimpleName(),id);
Stan

2
Die einzige Voraussetzung für Transformations-IDs ist, dass sie unter allen Transformationen eindeutig sind. Daher ist die Verwendung hier korrekt. Die Cache-Schlüssel enthalten sowohl die Quell-ID als auch die Transformations-ID. Die Transformations-ID ist also eher ein Mixin als ein Ersatz. Siehe github.com/bumptech/glide/wiki/…
Sam Judd

4
Gibt es eine Möglichkeit, die Transformation auf Platzhalter anzuwenden?
Sinigami

45

Der einfachste Weg (erfordert Glide 4.xx)

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

das kompiliert nicht einmal ... RequestOptions ()?
Rafael Lima

3
@ RafaelLima Es ist in Kotlin geschrieben.
Roman Samoylenko

1
Beachten Sie, das .apply()geht danach .load().
Johnny Five

ist RequestOptions.circleCropTransform (), nicht RequestOptions ().
Lächelt

Sie müssen Glide.with (context) .load (uri) .apply (circleCrop ()). in (imageView) schreiben.
Jaspal

25

Versuchen Sie es auf diese Weise

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

Es ist sehr einfach. Ich habe gesehen, dass die Glide-Bibliothek ihre sehr gute Bibliothek und Essay-Basis auf der Volley-Google-Bibliothek basiert

verwendet diese Bibliothek für eine abgerundete Bildansicht

https://github.com/hdodenhof/CircleImageView

jetzt

// Für eine einfache Ansicht:

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

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

// Für eine 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;
}

und in 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
Wie im vorherigen Antwortkommentar erwähnt, funktioniert dieser Weg auch nicht gut. Zumindest für 'de.hdodenhof: circleimageview: 1.2.2' + 'com.github.bumptech.glide: glide: 3.5.2'. Geprüft und doppelt geprüft. Auch das gleiche Problem mit Glide 3.4. + Und Circleimageview 1.2.1
Stan

+1 für die .centerCrop (). Arbeitete für mich mit DiamondImageView plus .asBitmap ().
Felippe

1
Erfordert das Aufrufen von .dontAnimate () beim Gleiten, was nicht akzeptabel ist
Greg Ennis

+1 Beachten Sie aber auch, dass das Laden von Internetbildern mit Glide
Hedgehog

9

Die anderen Lösungen haben bei mir nicht funktioniert. Ich fand, dass sie alle erhebliche Nachteile haben:

  • Lösungen mit Gleittransformationen funktionieren nicht mit Platzhaltern
  • Lösungen mit gerundeten Bildansichten funktionieren nicht mit Animationen (dh Überblendung).
  • Lösungen , die eine generische Methode eines Elternteils mit , dass Clips ihrer Kinder (dh die akzeptierte Antwort hier ) nicht gut funktionieren mit glide

Es ist wirklich interessant, dass ich nach dem Herumfummeln die Fresko-Bibliotheksseite über abgerundete Ecken und Kreise gefunden habe, in der sie im Grunde die gleichen Einschränkungen auflisten und mit der Aussage schließen:

Es gibt keine wirklich gute Lösung für das Abrunden von Ecken unter Android und man muss zwischen den oben genannten Kompromissen wählen

Unglaublich, dass wir derzeit noch keine echte Lösung haben. Ich habe eine alternative Lösung basierend auf dem Link, den ich oben gesetzt habe. Der Nachteil bei diesem Ansatz ist, dass davon ausgegangen wird, dass Ihr Hintergrund einfarbig ist (die Ecken sind nicht wirklich transparent). Sie würden es so verwenden:

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

Das Wesentliche ist hier und der vollständige Code hier:

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

Jetzt können Sie in Glide V4 CircleCrop () direkt verwenden

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

Eingebaute Typen

  • CenterCrop
  • FitCenter
  • CircleCrop

5

Verwenden Sie diese Transformation, es wird gut funktionieren.

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

Zum Glide 4.xx.

verwenden

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

von doc heißt es das

Runde Bilder: CircleImageView / CircularImageView / RoundedImageView haben bekanntermaßen Probleme mit TransitionDrawable (.crossFade () mit .thumbnail () oder .placeholder ()) und animierten GIFs. Verwenden Sie eine BitmapTransformation (.circleCrop (), die in Version 4 verfügbar sein wird .dontAnimate (), um das Problem zu beheben


4

Nach dieser Antwort ist der einfachste Weg in beiden Sprachen:

Kotlin:

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

Java:

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

Dies funktioniert unter Glide 4.XX


4

Die Antwort von Roman Samoylenko war korrekt, außer dass sich die Funktion geändert hat. Die richtige Antwort ist

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

3

Ich habe eine einfache Lösung für das Hinzufügen eines Rahmens über der Bildansicht gefunden, in der die Farbe einen Farbverlauf über dem Bild festlegen oder hinzufügen möchte.

SCHRITTE:

  1. Nehmen Sie ein Rahmenlayout und fügen Sie zwei Bilder hinzu. Sie können die Größe gemäß Ihren Anforderungen einstellen. Für imgPlaceHolderbenötigen Sie ein weißes Bild oder eine Farbe, die Sie einstellen möchten.

        <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. Nachdem Sie diesen Code in die XML-Datei eingefügt haben, setzen Sie die folgende Zeile in die Java-Datei.

    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);
        }
    });

Dadurch wird der Rand der Bildansicht einfach ohne zusätzlichen Abstand und Rand erstellt.

HINWEIS : Das weiße Bild ist für den Rand obligatorisch, da es sonst nicht funktioniert.

Viel Spaß beim Codieren :)


3

Mit der Gleitbibliothek können Sie diesen Code verwenden:

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);
        }
    });

Sie können auch ein abgerundetes Bild mit der Glid-Bibliothek erstellen.
Priti

2

Ich habe früher danach gesucht und es auf sehr einfache Weise gemacht. Ich hoffe, das würde dir gefallen.

 //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 zum Einblenden von Animationen.

    <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" />

endlich diese Methode aufrufen.

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

2

Sie können einfach den RoundedCornersTransformation-Konstruktor aufrufen, der über eine enT-Eingabe von CornerType verfügt. So was:

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

Aber zuerst müssen Sie Ihrem Projekt Gleittransformationen hinzufügen .


2

Hier ist eine modularere und übersichtlichere Methode, um Ihre Bitmap in Glide zu kreisen:

  1. Erstellen Sie eine benutzerdefinierte Umwandlung, indem Sie die Methode wie BitmapTransformationfolgt erweitern und überschreiben transform:

Für 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) {}

}

Für 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. Stellen Sie es dann im Glide Builder dort ein, wo Sie es benötigen:
Glide.with(yourActivity)
   .load(yourUrl)
   .asBitmap()
   .transform(new CircularTransformation())
   .into(yourView);

Hoffe das hilft :)


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

Kreisausschnitt + Platzhalter + Überblendung

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

Geben Sie hier die Bildbeschreibung ein


1

Glide Version 4.6.1

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

1

In diesem Fall muss ich Schatten hinzufügen und die imageView-Höhe funktioniert nicht

Implementierung "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>

Form zeichnbar

<?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>

Gleitkonfiguration

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

0

Sie müssen CircularImageView verwenden, um diesen Bildtyp anzuzeigen ...

Sie verwenden die Glide-Bibliothek, mit der Bilder geladen wurden.

Erstellen Sie eine Klassendatei in Ihrem Projekt und laden Sie sie in Imageview ... und Sie erhalten das gewünschte Ergebnis ...

Versuchen Sie, dem folgenden Code zu folgen ...

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;
    }
}

Hinweis :

Sie können verwenden

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

oder

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

Es hat keine Auswirkungen auf Ihre anderen Bibliotheken. Sie müssen Ihren Code zum Herunterladen von Bildern oder anderen Elementen nicht ändern. Es kann auch einfach mit XML definiert werden.


3
Ich habe Glide + CircularImageView (und RoundedImageView) ausprobiert und es funktioniert nicht gut, wenn Sie Platzhalter (während das Bild heruntergeladen wird) und Erscheinungsanimationen verwenden. Picasso hat dieses Problem nicht. Sie können hier mehr darüber
erfahren

Verwenden Sie einfach .asBitmap im Glide-Aufruf und es wird gut funktionieren.
Granko87

Erfordert das Aufrufen von .dontAnimate () beim Gleiten, was nicht akzeptabel ist
Greg Ennis
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.