วิธีการปัดเศษรูปภาพด้วยไลบรารี Glide


198

มีใครรู้วิธีแสดงภาพที่มีมุมมนด้วย Glide หรือไม่? ฉันกำลังโหลดภาพด้วย Glide แต่ฉันไม่รู้วิธีส่ง params ที่โค้งมนไปยังห้องสมุดนี้

ฉันต้องการภาพที่แสดงเช่นตัวอย่างต่อไปนี้:

ป้อนคำอธิบายรูปภาพที่นี่


2
ฉันใช้github.com/hdodenhof/CircleImageViewเพื่อดูภาพ
ronded

1
ฉันรู้วิธีใช้ Glide lib กับ CircleImageView แต่ฉันค้นหาวิธีที่เป็นไปได้ด้วย Glide lib เท่านั้น มีวิธีการใดใน Glide lib เพื่อทำสิ่งนี้หรือไม่รองรับ?
mr.boyfox

คำตอบ:


491

ร่อน V4:

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

ร่อน V3:

คุณสามารถใช้RoundedBitmapDrawableสำหรับภาพเป็นวงกลมด้วยเหิน ไม่จำเป็นต้องใช้ ImageView แบบกำหนดเอง

 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
สิ่งนี้ไม่ได้สร้างเส้นขอบ
ZakTaccardi

1
@ jimmy0251 ไม่คุณไม่สามารถ Drawable ร่อนไม่ใช่ BitmapDrawables พวกเขาคือการถอนการเปลี่ยนแปลงและ glidesrawables ซึ่งข้ามจากตัวยึดกับภาพที่แท้จริง RoundedBitmapDrawable ไม่สามารถจัดการได้
เกร็กเอนนิส

7
ตั้งค่าพื้นหลังด้วยวงรีรูปร่าง drawable และให้ช่องว่างภายในไปยัง imageview เพื่อสร้างเส้นขอบ
Lalit Jadav

2
หากคุณมีปัญหาบางอย่างโปรดตรวจสอบวิธีแก้ไขปัญหาต่อไปของ Roman Samoylenko ที่ใช้งานได้
Pabel

1
แทนที่จะเป็น.centerCrop()คุณอาจหมายถึง.circleCrop()
Thanasis Kapelonis

66

ตรวจสอบโพสต์นี้เหิน vs picasso ...
แก้ไข : โพสต์ที่เชื่อมโยงไม่ได้เรียกความแตกต่างที่สำคัญในห้องสมุด ร่อนรีไซเคิลโดยอัตโนมัติ ดูความคิดเห็นของ 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();
    }
} 

ฟังดูน่าสนใจ. มันทำงานได้ดีกับโครงร่าง API 21 หรือไม่
Teovald

อืมฉันอาจใช้มันในตอนนั้น ฉันจะพยายามใช้มุมมองที่กำหนดเอง แต่ฉันไม่ต้องการสร้างบิตแมปที่สอง :) นอกจากนี้คุณควรใช้สระว่ายน้ำบิตแมปในการสั่งซื้อเพื่อให้ได้รับบิตแมปจากที่นั่น :)
Teovald

ระวังการใช้public String getId()วิธีการที่แสดงในรหัสเพราะมันจะส่งคืน id เดียวกันสำหรับทุกรูปภาพและมันอาจเกิดขึ้นได้ว่าร่อนจะตั้งภาพที่โค้งมนเก่าในขณะที่ไม่มีการเปลี่ยนแปลงมันจะตั้งภาพที่ถูกต้อง! ฉันไม่รู้ว่าร่อนทำงานอย่างไร แต่ดูเหมือนว่ามันเก็บการเปลี่ยนแปลงของภาพ (เพื่อหลีกเลี่ยงการคิดหนัก ๆ ) และ id นั้นถูกใช้เป็น id ของภาพที่ถูกแปลง ฉันเพิ่ม URL ของภาพลงในคอนสตรัคเตอร์และทำให้วิธีการดังกล่าวส่งคืนผลลัพธ์เช่น:this.id = String.format("%s:%s",this.getClass().getSimpleName(),id);
Stan

2
ข้อกำหนดเฉพาะของ Stan สำหรับรหัสการแปลงสภาพคือความพิเศษในการแปลงทั้งหมดดังนั้นการใช้ที่นี่ถูกต้อง คีย์แคชจะมีทั้งรหัสแหล่งที่มาและรหัสการแปลงดังนั้นรหัสการแปลงจึงเป็นมิกซ์อินมากกว่าการแทนที่ ดูgithub.com/bumptech/glide/wiki/…
Sam Judd

4
มีวิธีการนำการแปลงไปใช้กับตัวยึดตำแหน่งหรือไม่?
Sinigami

46

วิธีที่ง่ายที่สุด (ต้องการ Glide 4.xx)

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

สิ่งนี้ไม่ได้รวบรวม ... RequestOptions ()
Rafael Lima

3
@RafaelLima มันเขียนใน Kotlin
Roman Samoilenko

1
แจ้งให้ทราบว่าไปหลังจาก.apply() .load()
Johnny Five

คือ RequestOptions.circleCropTransform () ไม่ใช่ RequestOptions ()
รอยยิ้ม

คุณต้องเขียน Glide.with (บริบท) .load (uri) .apply (circleCrop ()). ลงใน (imageView) ดูที่ฟังก์ชั่นการใช้
Jaspal

25

ลองด้วยวิธีนี้

รหัส

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>
  • ฉันใช้ไลบรารีการแปลงนี้ -> https://github.com/wasabeef/glide-transformations
  • ความกว้างของลายเส้นวงกลมคือการขยายของ ImageView

9

มันง่ายมากที่ฉันได้เห็นห้องสมุด Glide มันเป็นห้องสมุดที่ดีมากและเรียงความจากห้องสมุดวอลเลย์ของ Google

usethis ไลบรารี่สำหรับการดูภาพแบบโค้งมน

https://github.com/hdodenhof/CircleImageView

ตอนนี้

// สำหรับมุมมองง่ายๆ:

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

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

// สำหรับรายการ:

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

และใน 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
เช่นเดียวกับที่กล่าวถึงในคำตอบก่อนหน้าแสดงความคิดเห็นวิธีนี้ใช้งานไม่ได้ดี อย่างน้อยสำหรับ 'de.hdodenhof: circleimageview: 1.2.2' + 'com.github.bumptech.glide: ร่อน: 3.5.2' ตรวจสอบและตรวจสอบสองครั้ง ยังเป็นปัญหาเดียวกันกับร่อน 3.4. + และ circleimageview 1.2.1
สแตน

+1 สำหรับ. centerCrop () ทำงานให้ฉันด้วยDiamondImageView plus .asBitmap ()
felippe

1
ต้องโทร .ontAnimate () บนเครื่องร่อนซึ่งไม่สามารถใช้ได้
Greg Ennis


9

โซลูชันอื่นไม่ทำงานสำหรับฉัน ฉันพบว่าพวกเขาทุกคนมีข้อบกพร่องที่สำคัญ:

  • โซลูชันที่ใช้การแปลงร่อนไม่ทำงานกับตัวยึดตำแหน่ง
  • โซลูชันที่ใช้มุมมองภาพแบบโค้งมนไม่สามารถใช้งานได้กับภาพเคลื่อนไหว (เช่น crossfade)
  • โซลูชันที่ใช้วิธีการทั่วไปของผู้ปกครองที่คลิปลูก (เช่นคำตอบที่ยอมรับได้ที่นี่ ) ทำงานได้ไม่ดีกับการร่อน

เป็นเรื่องที่น่าสนใจจริง ๆ หลังจากคลำไปรอบ ๆ ด้วยสิ่งนี้ฉันพบหน้าห้องสมุด Fresco เกี่ยวกับมุมโค้งมนและวงกลมที่พวกเขาแสดงรายการข้อ จำกัด เดียวกันโดยทั่วไปและสรุปด้วยคำสั่ง:

ไม่มีทางออกที่ดีสำหรับการปัดเศษมุมบน Android และอย่างใดอย่างหนึ่งต้องเลือกระหว่างการแลกเปลี่ยนดังกล่าว

ไม่น่าเชื่อว่าในเวลานี้เรายังไม่มีทางออกที่แท้จริง ฉันมีโซลูชันสำรองตามลิงก์ที่ฉันวางไว้ด้านบน ข้อเสียเปรียบด้วยวิธีนี้คือมันถือว่าพื้นหลังของคุณเป็นสีทึบ (มุมไม่โปร่งใสจริงๆ) คุณจะใช้มันแบบนี้:

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

ส่วนสำคัญอยู่ที่นี่และรหัสเต็มที่นี่:

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

ตอนนี้ใน Glide V4 คุณสามารถใช้ CircleCrop () ได้โดยตรง

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

สร้างขึ้นในประเภท

  • CenterCrop
  • FitCenter
  • CircleCrop

5

ใช้การแปลงนี้มันจะทำงานได้ดี

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

สำหรับร่อน 4.xx

ใช้

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

จากdocมันระบุไว้ว่า

Round Round: CircleImageView / CircularImageView / RoundedImageView เป็นที่ทราบกันดีว่ามีปัญหาเกี่ยวกับ TransitionDrawable (.crossFade () กับ. thumbnail () หรือ. placeholder ()) และ GIF แบบเคลื่อนไหวใช้ BitmapTransformation (.circleCrop () ในรูปแบบ v4) หรือ .dontAnimate () เพื่อแก้ไขปัญหา


4

ตามคำตอบนี้วิธีที่ง่ายที่สุดในทั้งสองภาษาคือ:

Kotlin:

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

Java:

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

ใช้งานได้กับ Glide 4.XX


4

คำตอบของ Roman Samoylenko นั้นถูกต้องยกเว้นฟังก์ชันมีการเปลี่ยนแปลง คำตอบที่ถูกต้องคือ

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

3

ฉันพบโซลูชันที่ง่ายและง่ายสำหรับการเพิ่มเส้นขอบบน imageview ซึ่งสีต้องการตั้งค่าหรือเพิ่มการไล่ระดับสีเหนือรูปภาพ

ขั้นตอน:

  1. ใช้เค้าโครงหนึ่งเฟรมและเพิ่มสองภาพคุณสามารถกำหนดขนาดตามความต้องการของคุณ สำหรับimgPlaceHolderคุณต้องมีหนึ่งภาพสีขาวหรือสีที่คุณต้องการตั้งค่า

        <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. หลังจากวางโค้ดนี้ในไฟล์ xml แล้วให้วางบรรทัดด้านล่างในไฟล์ 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);
        }
    });

นี่จะทำให้เส้นขอบของภาพดูง่ายโดยไม่ต้องมีช่องว่างภายในและขอบเพิ่มเติม

หมายเหตุ : ภาพสีขาวเป็นข้อบังคับสำหรับเส้นขอบมิฉะนั้นจะไม่ทำงาน

Happy codding :)


3

ด้วยไลบรารีร่อนคุณสามารถใช้รหัสนี้:

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

คุณยังสามารถสร้างภาพโค้งมนโดยใช้ผ่านห้องสมุด glid
priti

2

ฉันค้นหามันมาก่อนหน้านี้และทำมันด้วยวิธีที่ง่ายที่สุดฉันหวังว่าคุณจะชอบสิ่งนี้

 //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สำหรับ fade in animation

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

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

ในที่สุดก็จะเรียกวิธีนี้

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

2

คุณสามารถเรียกตัวสร้าง RoundedCornersTransformation ซึ่งมี inputType enum แบบนี้:

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

แต่ก่อนอื่นคุณต้องเพิ่มการแปลงร่อนลงในโครงการของคุณ


2

ต่อไปนี้เป็นวิธีแยกส่วนและทำความสะอาดเพิ่มเติมเพื่อวงกลมครอบตัดบิตแมปของคุณใน Glide:

  1. สร้างการแปลงที่กำหนดเองโดยการขยายBitmapTransformationแล้วแทนที่transformวิธีการเช่นนี้:

สำหรับร่อน 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) {}

}

สำหรับร่อน 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. จากนั้นตั้งค่าในเครื่องมือสร้างร่อนที่คุณต้องการ:
Glide.with(yourActivity)
   .load(yourUrl)
   .asBitmap()
   .transform(new CircularTransformation())
   .into(yourView);

หวังว่าจะช่วย :)


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

ครอบตัดวงกลม + ตัวยึด + กากบาท

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

ป้อนคำอธิบายรูปภาพที่นี่



1

ในกรณีนี้ฉันต้องเพิ่มเงาและ imageView ระดับความสูงไม่ทำงาน

การใช้งาน "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>

รูปร่าง drawable

<?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.with(this)
    .asBitmap()
    .load(item.image)
    .apply(RequestOptions.circleCropTransform())
    .into(iv_item_employee)

0

คุณต้องใช้CircularImageViewเพื่อแสดงรูปภาพประเภทนั้น ...

คุณกำลังใช้ห้องสมุด Glideที่ใช้ในการโหลดภาพ ..

สร้างหนึ่ง ClassFile ในโครงการของคุณและโหลดใน Imageview ... และคุณจะได้รับผลลัพธ์ที่ต้องการ ...

ลองใช้รหัสต่อไปนี้ ...

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

บันทึก :

คุณสามารถใช้ได้

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

หรือ

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

มันจะไม่ส่งผลกระทบต่อห้องสมุดอื่น ๆ ของคุณ ... ไม่จำเป็นต้องเปลี่ยนรหัสของคุณสำหรับการดาวน์โหลดรูปภาพหรืออะไรก็ตาม ... มันสามารถกำหนดได้โดยใช้ XML เช่นกัน


3
ฉันได้ลองใช้ Glide + CircularImageView (และ RoundedImageView) และมันใช้งานไม่ได้ถ้าคุณเริ่มใช้ตัวยึดตำแหน่ง (ในขณะที่คุณดาวน์โหลดรูปภาพ) และภาพเคลื่อนไหวที่ปรากฏ Picasso ไม่มีปัญหานี้ คุณสามารถ red more เกี่ยวกับที่นี่: github.com/vinc3m1/RoundedImageView/issues/76
zmicer

เพียงแค่ใช้. asBitmap ใน Glide call และมันจะทำงานได้ดี
granko87

ต้องโทร .ontAnimate () บนเครื่องร่อนซึ่งไม่สามารถใช้ได้
Greg Ennis
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.