Bagaimana cara membulatkan gambar dengan pustaka Glide?


197

Jadi, ada yang tahu cara menampilkan gambar dengan sudut bulat dengan Glide? Saya memuat gambar dengan Glide, tetapi saya tidak tahu cara meneruskan paro bulat ke perpustakaan ini.

Saya perlu menampilkan gambar seperti contoh berikut:

masukkan deskripsi gambar di sini


2
saya telah menggunakan github.com/hdodenhof/CircleImageView untuk tampilan gambar
ronded

1
Saya tahu cara menggunakan Glide lib dengan CircleImageView, tetapi saya mencari cara yang mungkin lakukan ini hanya dengan Glide lib. Punya metode apa pun di Glide lib untuk melakukan ini atau tidak didukung?
mr.boyfox

Jawaban:


486

Glide V4:

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

Glide V3:

Anda dapat menggunakan RoundedBitmapDrawableuntuk gambar lingkaran dengan Glide. Tidak diperlukan ImageView kustom.

 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
ini tidak membuat perbatasan.
ZakTaccardi

1
@ jimmy0251 Tidak, kamu tidak bisa. Drawable glide bukan BitmapDrawables. Mereka adalah gambar transisi dan gambar geser yang melintang dari placeholder ke gambar nyata. RoundedBitmapDrawable tidak bisa mengatasinya.
Greg Ennis

7
atur background dengan bentuk oval yang bisa digambar. dan berikan padding pada imageview untuk membuat border.
Lalit Jadav

2
Jika Anda memiliki masalah, PERIKSA SOLUSI BERIKUTNYA dari Roman Samoylenko yang berfungsi.
Pabel

1
Alih-alih .centerCrop()Anda mungkin berarti.circleCrop()
Thanasis Kapelonis

66

Periksa pos ini , luncuran vs picasso ...
Sunting : pos tertaut tidak menyebut perbedaan penting di perpustakaan. Glide melakukan daur ulang secara otomatis. Lihat komentar TWiStErRob untuk lebih lanjut.

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

terdengar menarik. Apakah ini bekerja dengan baik dengan Garis Besar API 21?
Teovald

hmm, saya mungkin menggunakan ini. Saya akan mencoba untuk hanya menggunakan tampilan kustom, saya ingin tidak harus membuat bitmap kedua :). Selain itu, Anda harus selalu menggunakan kumpulan bitmap untuk mencoba mendapatkan bitmap dari sana :)
Teovald

Hati-hati menggunakan public String getId()cara yang ditunjukkan dalam kode karena mengembalikan id yang sama untuk semua gambar dan dengan demikian bisa terjadi bahwa luncuran akan menetapkan gambar bulat lama sementara tanpa transformasi itu akan mengatur gambar yang benar! Saya tidak tahu bagaimana glide berfungsi tetapi sepertinya cache cache transformasi gambar (untuk menghindari hard calc saya kira). Dan id digunakan sebagai id dari gambar yang diubah. Saya menambahkan url gambar ke konstruktor dan membuat metode yang disebutkan mengembalikan id yang dihasilkan seperti:this.id = String.format("%s:%s",this.getClass().getSimpleName(),id);
Stan

2
Satu-satunya persyaratan Stan untuk id Transformasi adalah bahwa mereka unik di antara semua Transformasi, jadi penggunaan di sini benar. Kunci cache akan menyertakan id sumber dan id transformasi, sehingga id transformasi lebih merupakan mixin daripada pengganti. Lihat github.com/bumptech/glide/wiki/…
Sam Judd

4
Apakah ada cara untuk menerapkan transformasi pada placeholder?
Sinigami

45

Cara termudah (membutuhkan Glide 4.xx)

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

ini bahkan tidak dapat dikompilasi ... RequestOptions ()?
Rafael Lima

3
@ RafaelLima Ada tertulis di Kotlin.
Roman Samoylenko

1
Perhatikan, itu .apply()terjadi setelah itu .load().
Johnny Five

adalah RequestOptions.circleCropTransform (), bukan RequestOptions ().
Tersenyum

Anda perlu menulis Glide.with (konteks) .load (uri) .apply (circleCrop ()). ke (imageView) lihat pada fungsi apply.
Jaspal

25

Coba dengan cara ini

kode

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

sangat sederhana saya telah melihat Glide library perpustakaan yang sangat bagus dan esai berdasarkan perpustakaan Google volley

gunakan perpustakaan ini untuk tampilan gambar bulat

https://github.com/hdodenhof/CircleImageView

sekarang

// Untuk tampilan sederhana:

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

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

// Untuk daftar:

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

dan dalam 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
Seperti disebutkan dalam komentar jawaban sebelumnya cara ini tidak berfungsi dengan baik. Setidaknya untuk 'de.hdodenhof: circleimageview: 1.2.2' + 'com.github.bumptech.glide: glide: 3.5.2'. Diperiksa dan diperiksa dua kali. Juga masalah yang sama dengan glide 3.4. + Dan circleimageview 1.2.1
Stan

+1 untuk .centerCrop (). Bekerja untuk saya dengan DiamondImageView plus .asBitmap ().
felippe

1
Membutuhkan panggilan .dontAnimate () di meluncur yang tidak dapat diterima
Greg Ennis

+1 Tetapi juga perhatikan bahwa Memuat Gambar Internet dengan Glide
hedgehog

9

Solusi lain tidak berhasil untuk saya. Saya menemukan mereka semua memiliki kelemahan signifikan:

  • Solusi menggunakan transformasi luncuran tidak bekerja dengan placeholder
  • Solusi menggunakan tampilan gambar membulat tidak berfungsi dengan animasi (mis. Crossfade)
  • Solusi menggunakan metode generik dari orang tua yang klip anak-anaknya (yaitu jawaban yang diterima di sini ) tidak berfungsi dengan baik dengan glide

Sangat menarik bahwa setelah meraba-raba dengan ini saya menemukan halaman perpustakaan Fresco tentang sudut dan lingkaran membulat di mana mereka pada dasarnya menuliskan batasan yang sama dan menyimpulkan dengan pernyataan:

tidak ada solusi yang benar-benar baik untuk membulatkan sudut di Android dan kita harus memilih antara trade-off yang disebutkan di atas

Sulit dipercaya bahwa saat ini kami masih belum memiliki solusi nyata. Saya memiliki solusi alternatif berdasarkan tautan yang saya letakkan di atas. Kelemahan dari pendekatan ini adalah mengasumsikan latar belakang Anda adalah warna solid (sudutnya tidak terlalu transparan). Anda akan menggunakannya seperti ini:

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

Intinya ada di sini dan kode lengkap di sini:

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

Sekarang di Glide V4 Anda dapat langsung menggunakan CircleCrop ()

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

Tipe bawaan

  • CenterCrop
  • FitCenter
  • CircleCrop

5

Gunakan transformasi ini, itu akan berfungsi dengan baik.

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

Untuk Glide 4.xx

menggunakan

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

dari doc disebutkan bahwa

Gambar Bulat: CircleImageView / CircularImageView / RoundedImageView diketahui memiliki masalah dengan TransitionDrawable (.crossFade () dengan .thumbnail () atau .placeholder ()) dan animasi GIF, gunakan BitmapTransformation (.circleCrop () akan tersedia di v4) atau .dontAnimate () untuk memperbaiki masalah ini


4

Menurut jawaban ini , cara termudah dalam kedua bahasa adalah:

Kotlin:

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

Jawa:

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

Ini berfungsi pada Glide 4.XX


4

Jawaban Roman Samoylenko benar, kecuali fungsinya telah berubah. Jawaban yang benar adalah

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

3

Saya menemukan satu solusi mudah dan sederhana untuk menambahkan batas atas tampilan gambar di mana warna ingin mengatur atau menambahkan gradien di atas gambar.

LANGKAH:

  1. Ambil satu tata letak bingkai dan tambahkan dua gambar. Anda dapat mengatur ukuran sesuai kebutuhan Anda. Untuk imgPlaceHolder, Anda memerlukan satu gambar putih atau warna yang ingin Anda atur.

        <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. Setelah menempatkan kode ini pada file xml, letakkan di bawah baris dalam file 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);
        }
    });

Ini akan membuat batas tampilan gambar hanya tanpa bantalan dan margin tambahan.

CATATAN : Gambar putih adalah wajib untuk perbatasan jika tidak maka tidak akan berfungsi.

Selamat codding :)


3

Dengan pustaka glide Anda dapat menggunakan kode ini:

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

Anda juga dapat membuat gambar bulat menggunakan melalui perpustakaan glid.
priti

2

Saya mencari sebelumnya dan saya membuatnya dengan cara yang paling mudah, saya harap Anda akan menyukai ini.

 //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 untuk fade dalam animasi.

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

akhirnya memanggil metode ini.

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

2

Anda cukup memanggil konstruktor RoundedCornersTransformation, yang memiliki input enum cornerType. Seperti ini:

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

tetapi pertama-tama Anda harus menambahkan Glide Transformations ke proyek Anda.


2

Berikut ini adalah cara yang lebih modular dan lebih bersih untuk memotong crop bitmap Anda di Glide:

  1. Buat transformasi khusus dengan memperluas BitmapTransformationlalu mengganti transformmetode seperti ini:

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

}

Untuk 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. Kemudian atur di Glide builder di mana Anda membutuhkannya:
Glide.with(yourActivity)
   .load(yourUrl)
   .asBitmap()
   .transform(new CircularTransformation())
   .into(yourView);

Semoga ini membantu :)


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

Crop lingkaran + placeholder + crossfade

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

masukkan deskripsi gambar di sini


1

Glide versi 4.6.1

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

1

Dalam hal ini saya perlu menambahkan bayangan, dan ketinggian imageView tidak berfungsi

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

Bentuknya bisa digambar

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

Konfigurasi Glide

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

0

Anda harus menggunakan CircularImageView untuk Menampilkan jenis Gambar ...

Anda menggunakan pustaka Glide yang digunakan untuk memuat gambar ..

Buat Satu ClassFile di Proyek Anda dan Muat di Imageview ... dan Anda akan mendapatkan Hasil yang Diinginkan ...

Coba Ikuti Kode ...

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

Catatan :

Kamu bisa memakai

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

atau

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

itu tidak akan mempengaruhi perpustakaan Anda yang lain ... tidak perlu mengubah kode Anda untuk mengunduh gambar atau apa pun ... itu hanya dapat didefinisikan menggunakan XML juga ..


3
Saya telah mencoba Glide + CircularImageView (dan RoundedImageView) dan tidak berfungsi dengan baik jika Anda mulai menggunakan placeholder (saat gambar Anda diunduh) dan animasi tampilan. Picasso tidak memiliki masalah ini. Anda dapat merah lebih banyak tentang hal ini di sini: github.com/vinc3m1/RoundedImageView/issues/76
zmicer

Cukup gunakan .asBitmap dalam panggilan Glide dan itu akan berfungsi dengan baik.
granko87

Membutuhkan panggilan .dontAnimate () di meluncur yang tidak dapat diterima
Greg Ennis
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.