Glide kütüphanesi ile bir görüntü nasıl yuvarlanır?


198

Peki Glide ile köşeleri yuvarlatılmış bir görüntünün nasıl görüntüleneceğini bilen var mı? Glide ile bir resim yüklüyorum, ancak bu kütüphaneye yuvarlatılmış params nasıl geçirileceğini bilmiyorum.

Aşağıdaki örnek gibi görüntü gerekir:

resim açıklamasını buraya girin


2
i kullanmak zorunda github.com/hdodenhof/CircleImageView ronded görüntü görünümü için
MilapTank

1
CircleImageView ile Glide lib nasıl kullanılacağını biliyorum, ama ben sadece Glide lib ile bunu yapmak olası bir şekilde arama. Glide lib'de bunu yapmak için herhangi bir yöntem var mı yoksa desteklenmiyor mu?
mr.boyfox

Yanıtlar:


491

Glide V4:

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

Glide V3:

RoundedBitmapDrawableGlide ile dairesel görüntüler için kullanabilirsiniz . Özel bir ImageView gerekmez.

 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
bu bir sınır oluşturmaz.
ZakTaccardi

1
@ jimmy0251 Hayır, yapamazsın. Süzülme çekilebilirleri BitmapDrawables değil. Bunlar, yer tutucusundan gerçek görüntüye çapraz geçiş yapan transitiondrawables ve glidedrawable'lardır. RoundedBitmapDrawable bunu işleyemez.
Greg Ennis

7
arka plan çekilebilir şekil oval ile ayarlayın. ve kenarlık oluşturmak için görsel görünüme dolgu ekleyin.
Lalit Jadav

2
Eğer bir sorun yaşarsanız lütfen Roma Samoylenko'nun SONRAKİ ÇÖZÜMÜNÜ KONTROL EDİN.
Pabel

1
Bunun yerine .centerCrop()muhtemelen demek istiyorsun.circleCrop()
Thanasis Kapelonis

66

Bu gönderiyi kontrol edin , kayma vs picasso ...
Düzenle : bağlantılı gönderi kütüphanelerde önemli bir fark yaratmaz. Glide geri dönüşümü otomatik olarak yapar. Daha fazla bilgi için TWiStErRob'un yorumuna bakın .

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

kulağa ilginç geliyor. API 21'in Anahatları ile iyi çalışır mı?
Teovald

hmm, bunu o zaman kullanabilirim. Sadece özel bir görünüm kullanmaya çalışacağım, ikinci bir bitmap oluşturmak zorunda kalmam :). Ayrıca, oradan bir bitmap almaya çalışmak için her zaman bitmap havuzunu kullanmalısınız :)
Teovald

public String getId()Tüm görüntüler için aynı kimliği döndürdüğü için kodda gösterilen yolu kullanmaya dikkat edin ve bu nedenle, glide eski yuvarlak görüntüleri ayarlarken dönüşümler olmadan doğru görüntüyü ayarlayacaktır! Kaymanın nasıl çalıştığını bilmiyorum ama görüntü dönüşümlerini önbelleğe alıyor gibi görünüyor (sanırım sert hesaplamaları önlemek için). Ve id, dönüştürülmüş görüntünün kimliği olarak kullanılır. Oluşturucuya bir url resim ekledim ve sonuçta ortaya çıkan kimliği döndüren söz konusu yöntem yaptım:this.id = String.format("%s:%s",this.getClass().getSimpleName(),id);
Stan

2
Dönüşüm kimlikleri için tek gereklilik, tüm Dönüşümler arasında benzersiz olmalarıdır, bu nedenle buradaki kullanım doğrudur. Önbellek anahtarları hem kaynak kimliği hem de dönüşüm kimliğini içereceğinden, dönüşüm kimliği bir değiştirme yerine bir mixin olur. Bkz. Github.com/bumptech/glide/wiki/…
Sam Judd

4
Dönüşümün yer tutucuya uygulanmasının bir yolu var mı?
Sinigami

46

En kolay yol (Glide 4.xx gerektirir)

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

Bu bile derleme ... RequestOptions ()?
Rafael Lima

3
@RafaelLima Kotlin dilinde yazılmış.
Roman Samoilenko

1
Dikkat, .apply()sonra gider .load().
Johnny Five

RequestOptions.circleCropTransform () yöntemidir, RequestOptions () değil.
Gülümseme

Glide.with (context) .load (uri) .apply (circleCrop ()). yazmanız gerekir.
Jaspal

25

Bu şekilde dene

kod

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

onun çok basit ben Glide kütüphane gördüm çok iyi kütüphane ve makale tabanı volley Google'ın kütüphane

yuvarlak görüntü görünümü için usethis kütüphanesi

https://github.com/hdodenhof/CircleImageView

şimdi

// Basit bir görünüm için:

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

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

// Bir liste için:

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

ve XML biçiminde

<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
Önceki cevap yorumunda belirtildiği gibi bu şekilde de iyi çalışmıyor. En azından 'de.hdodenhof: circleimageview: 1.2.2' + 'com.github.bumptech.glide: glide: 3.5.2'. Kontrol edildi ve iki kez kontrol edildi. Ayrıca kayma 3.4. + Ve circleimageview 1.2.1 ile aynı sorun
Stan

.CenterCrop () için +1. Benim için DiamondImageView artı .asBitmap () ile çalıştı .
felippe

1
Kabul edilemez olan kaymada .dontAnimate () çağrılmasını gerektirir
Greg Ennis


9

Diğer çözümler benim için işe yaramadı. Hepsinin önemli dezavantajları olduğunu gördüm:

  • Kayma dönüşümlerini kullanan çözümler yer tutucularla çalışmaz
  • Yuvarlak görüntü görünümleri kullanan çözümler animasyonlarla çalışmaz (örn. Crossfade)
  • Bir ebeveyni, çocuklarını klipsleyen genel bir yöntem kullanarak çözümler (yani burada kabul edilen cevap ) kayma ile iyi çalışmıyor

Bununla uğraştıktan sonra, temel olarak aynı sınırlamaları listeledikleri ve ifadeyle sonuçladıkları yuvarlak köşeler ve daireler hakkında Fresco kütüphane sayfasını bulduğum gerçekten ilginçtir :

Android'de köşeleri yuvarlamak için gerçekten iyi bir çözüm yoktur ve yukarıda bahsedilen ödünleşmeler arasında seçim yapmak gerekir

Şu anda hala gerçek bir çözümümüz yok. Yukarıda verdiğim bağlantıya dayalı alternatif bir çözümüm var. Bu yaklaşımın dezavantajı, arka planınızın düz bir renk olduğunu varsaymasıdır (köşeler gerçekten şeffaf değildir). Bunu şöyle kullanırsınız:

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

Gist burada ve tam kod burada:

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

Şimdi Glide V4'te CircleCrop () öğesini doğrudan kullanabilirsiniz

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

Dahili tipler

  • CenterCrop
  • FitCenter
  • CircleCrop

5

Bu dönüşümü kullanın, iyi çalışır.

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

İçin Kayma 4.xx

kullanım

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

doc dan belirtti

Yuvarlak Resimleri: CircleImageView / CircularImageView / RoundedImageView olduğu bilinen sorunlar bir kullanın (.thumbnail ile .crossFade () () veya .placeholder ()) TransitionDrawable ve animasyonlu GIF'lerle BitmapTransformation (v4 satışa sunulacak .circleCrop ()) veya Sorunu çözmek için .dontAnimate ()


4

Bu cevaba göre , her iki dilde de en kolay yol:

Kotlin:

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

Java:

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

Bu Glide 4.XX üzerinde çalışır


4

Roman Samoylenko'nun cevabı, fonksiyonun değişmesi dışında doğruydu. Doğru cevap

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

3

Görüntünün üzerine renk eklemek veya görüntünün üzerine degrade eklemek istediğiniz görsel görüntüleme üzerine kenarlık eklemek için kolay ve basit bir çözüm buldum.

ADIMLAR:

  1. Bir kare düzeni alın ve iki resim ekleyin.İhtiyacınıza göre boyutu ayarlayabilirsiniz. Çünkü imgPlaceHolderayarlamak istediğiniz bir beyaz resme veya renge ihtiyacınız vardır.

        <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. Bu kodu xml dosyasına yerleştirdikten sonra, java dosyasına satırın altına koyun.

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

Bu, herhangi bir ekstra dolgu ve kenar boşluğu olmadan görsel görüntüleme sınırını basitleştirecektir.

NOT : Beyaz görüntü kenarlık için zorunludur, aksi takdirde çalışmaz.

Mutlu kodlama :)


3

Glide kütüphanesi ile şu kodu kullanabilirsiniz:

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

ayrıca, kayma kütüphanesi aracılığıyla yuvarlak görüntü de oluşturabilirsiniz.
priti

2

Daha önce arıyordum ve çok kolay bir şekilde yaptım, umarım bunu beğenirsiniz.

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

animasyonda solma için fade_in.xml .

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

nihayet bu yöntemi çağırmak.

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

2

CornerType enum girdisine sahip RoundedCornersTransformation yapıcısını çağırabilirsiniz. Bunun gibi:

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

ama önce projenize Glide Dönüşümleri eklemelisiniz .


2

Bitmap'inizi Glide'da daire haline getirmenin daha modüler ve daha temiz bir yolu:

  1. Genişleterek özel bir dönüşüm oluşturun ve BitmapTransformationardından transformbu yöntemi geçersiz kılın :

Glide 4.xx için

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

}

Glide 3.xx için

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. Ardından Glide oluşturucuya ihtiyacınız olan yere yerleştirin:
Glide.with(yourActivity)
   .load(yourUrl)
   .asBitmap()
   .transform(new CircularTransformation())
   .into(yourView);

Bu yardımcı olur umarım :)


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

Daire kırpma + yer tutucu + crossfade

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

resim açıklamasını buraya girin


1

Glide sürüm 4.6.1

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

1

Bu durumda gölgeler eklemem gerekiyor ve imageView yükselmesi çalışmıyor

"com.github.bumptech.glide: glide: 4.10.0" uygulaması

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>

Şekil çekilebilir

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

Glide Yapılandırması

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

0

Bu tür bir görüntüyü görüntülemek için CircularImageView kullanmanız gerekir ...

Görüntüleri yüklemek için kullanılan Glide kütüphanesini kullanıyorsunuz .

Projenizde bir ClassFile oluşturun ve Imageview'a yükleyin ... Ve İstediğiniz Sonuç elde edeceksiniz ...

Kodu Takip Etmeyi Deneyin ...

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

Not :

Kullanabilirsiniz

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

veya

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

diğer kütüphanelerinizi etkilemez ... resim veya başka bir şey indirmek için kodunuzu değiştirmek zorunda değilsiniz ... sadece XML kullanarak da tanımlanabilir ..


3
Glide + CircularImageView (ve RoundedImageView) denedim ve (görüntü indirilirken) yer tutucu ve görünüm animasyonları kullanmaya başlarsanız iyi çalışmaz. Picasso'nun bu sorunu yok. Burada daha fazla kırmızı olabilir: github.com/vinc3m1/RoundedImageView/issues/76
zmicer

Sadece Glide çağrısında .asBitmap kullanın ve iyi çalışır.
granko87

Kabul edilemez olan kaymada .dontAnimate () çağrılmasını gerektirir
Greg Ennis
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.