Làm thế nào để làm tròn một hình ảnh với thư viện Glide?


197

Vì vậy, có ai biết làm thế nào để hiển thị một hình ảnh với các góc tròn với Glide? Tôi đang tải một hình ảnh với Glide, nhưng tôi không biết làm thế nào để chuyển các thông số tròn cho thư viện này.

Tôi cần hình ảnh hiển thị như ví dụ sau:

nhập mô tả hình ảnh ở đây


2
tôi đã sử dụng github.com/hdodenhof/CircleImageView để xem hình ảnh được yêu thích
MilapTank

1
Tôi biết cách sử dụng Glide lib với CircleImageView, nhưng tôi tìm kiếm cách có thể làm điều này chỉ với Glide lib. Có bất kỳ phương pháp nào trong Glide lib để làm điều này hoặc nó không được hỗ trợ?
mr.boyfox

Câu trả lời:


486

Lướt V4:

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

Lướt V3:

Bạn có thể sử dụng RoundedBitmapDrawablecho hình ảnh tròn với Glide. Không có ImageView tùy chỉnh được yêu cầu.

 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
điều này không tạo ra một biên giới, mặc dù.
ZakTaccardi

1
@ jimmy0251 Không, bạn không thể. Các drawable glide không phải là BitmapDrawables. Chúng là transitiondrawables và glidedrawables mà crossfade từ giữ chỗ đến hình ảnh thực. RoundedBitmapDrawable không thể xử lý điều đó.
Greg Enni

7
thiết lập nền với hình dạng có thể vẽ hình bầu dục. và cung cấp phần đệm cho hình ảnh để tạo đường viền.
Lalit Jadav

2
Nếu bạn gặp phải một số vấn đề, vui lòng KIỂM TRA GIẢI PHÁP TIẾP THEO của Roman Samoylenko hoạt động.
Pabel

1
Thay vì .centerCrop()bạn có thể có nghĩa là.circleCrop()
Thanasis Kapelonis

66

Kiểm tra bài đăng này , lướt qua picasso ...
Chỉnh sửa : bài đăng được liên kết không gọi ra một sự khác biệt quan trọng trong các thư viện. Glide thực hiện tái chế tự động. Xem bình luận của TWiStErRob để biết thêm.

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

Nghe có vẻ thú vị. Nó có hoạt động tốt với Outline của API 21 không?
Teovald

hmm, tôi có thể sử dụng nó sau đó Tôi sẽ cố gắng chỉ đơn giản là sử dụng một chế độ xem tùy chỉnh, tôi muốn không phải tạo một bitmap thứ hai :). Ngoài ra, bạn nên luôn luôn sử dụng nhóm bitmap để cố lấy bitmap từ đó :)
Teovald

Cảnh giác với việc sử dụng public String getId()cách hiển thị trong mã vì nó trả về cùng một id cho tất cả các hình ảnh và do đó có thể xảy ra rằng glide sẽ thiết lập các hình ảnh tròn cũ trong khi không có biến đổi, nó sẽ đặt đúng hình ảnh! Tôi không biết làm thế nào glide hoạt động nhưng có vẻ như nó lưu trữ các biến đổi hình ảnh (để tránh calcs cứng tôi giả sử). Và id được sử dụng làm id của hình ảnh được chuyển đổi. Tôi đã thêm một url hình ảnh vào hàm tạo và thực hiện phương thức được đề cập trả về id kết quả như:this.id = String.format("%s:%s",this.getClass().getSimpleName(),id);
Stan

2
Yêu cầu duy nhất của Stan đối với id chuyển đổi là chúng là duy nhất trong số tất cả các Biến đổi, vì vậy cách sử dụng ở đây là chính xác. Các khóa bộ đệm sẽ bao gồm cả id nguồn và id chuyển đổi, vì vậy id chuyển đổi là một hỗn hợp thay vì thay thế. Xem github.com/bumptech/glide/wiki/ khăn
Sam Judd

4
Có cách nào để áp dụng chuyển đổi cho giữ chỗ?
Sinigami

45

Cách dễ nhất (yêu cầu Glide 4.xx)

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

điều này thậm chí không biên dịch ... RequestOptions ()?
Rafael Lima

3
@RafaelLima Nó được viết bằng Kotlin.
La Mã Samoylenko

1
Thông báo, mà .apply()đi sau .load().
Johnny Five

là RequestOptions.circleCropTransform (), không phải RequestOptions ().
Nụ cười

bạn cần viết Glide.with (bối cảnh) .load (uri) .apply (circleCrop ()). vào (imageView) xem xét chức năng áp dụng.
Jaspal

25

Hãy thử cách này

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

rất đơn giản tôi đã thấy thư viện Glide thư viện và bài tiểu luận rất hay về thư viện bóng chuyền của Google

thư viện usethis để xem hình ảnh tròn

https://github.com/hdodenhof/CircleImageView

hiện nay

// Để xem đơn giản:

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

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

// Đối với danh sách:

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

và trong 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
Giống như đã đề cập trong bình luận trả lời trước, cách này cũng không hoạt động tốt. Ít nhất là đối với 'de.hdodenhof: circleimageview: 1.2.2' + 'com.github.bumptech.glide: glide: 3.5.2'. Đã kiểm tra và kiểm tra lại. Cũng là vấn đề tương tự với glide 3.4. + Và circleimageview 1.2.1
Stan

+1 cho .centerCrop (). Đã làm việc với tôi với DiamondImageView cộng .asBitmap ().
felippe

1
Yêu cầu gọi .dontAnimate () trên glide không được chấp nhận
Greg Enni


9

Các giải pháp khác không làm việc cho tôi. Tôi thấy tất cả chúng đều có nhược điểm đáng kể:

  • Các giải pháp sử dụng biến đổi trượt không hoạt động với trình giữ chỗ
  • Các giải pháp sử dụng chế độ xem hình ảnh tròn không hoạt động với hình ảnh động (ví dụ: crossfade)
  • Các giải pháp sử dụng phương pháp chung của cha mẹ mà cắt con của nó (tức là câu trả lời được chấp nhận ở đây ) không hoạt động tốt với lướt

Điều thực sự thú vị là sau khi tìm hiểu kỹ về điều này, tôi đã tìm thấy trang thư viện Fresco về các góc và vòng tròn trong đó chúng liệt kê các hạn chế cơ bản giống nhau và kết luận với tuyên bố:

không có giải pháp nào thực sự tốt cho việc làm tròn các góc trên Android và người ta phải lựa chọn giữa các sự đánh đổi nói trên

Không thể tin được rằng tại thời điểm này chúng tôi vẫn chưa có một giải pháp thực sự. Tôi có một giải pháp thay thế dựa trên liên kết tôi đặt ở trên. Hạn chế của phương pháp này là nó cho rằng nền của bạn là một màu đặc (các góc không thực sự trong suốt). Bạn sẽ sử dụng nó như thế này:

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

Ý chính ở đây và mã đầy đủ ở đây:

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

Bây giờ trong Glide V4, bạn có thể trực tiếp sử dụng CircleCrop ()

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

Được xây dựng trong các loại

  • CenterCrop
  • FitCenter
  • CircleCrop

5

Sử dụng chuyển đổi này, nó sẽ hoạt động tốt.

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

Cho Glide 4.xx

sử dụng

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

từ doc nó nói rằng

Hình ảnh tròn: CircleImageView / trònImageView / RoundedImageView được biết là có vấn đề với TransitionDrawable (.crossFade () với .thumbnail () hoặc .placeholder ()) và GIF hoạt hình, sử dụng BitmapTransifying (.circleCrop () .dontAnimate () để khắc phục sự cố


4

Theo câu trả lời này , cách dễ nhất trong cả hai ngôn ngữ là:

Kotlin:

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

Java:

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

Điều này hoạt động trên Glide 4.XX


4

Câu trả lời của Roman Samoylenko là chính xác, ngoại trừ chức năng đã thay đổi. Đáp án đúng là

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

3

Tôi đã tìm thấy một giải pháp đơn giản và dễ dàng để thêm viền trên hình ảnh trong đó màu muốn đặt hoặc thêm độ dốc trên hình ảnh.

CÁC BƯỚC:

  1. Lấy bố cục một khung và thêm hai hình ảnh. Bạn có thể đặt kích thước theo yêu cầu của mình. Đối với imgPlaceHolder, bạn cần một hình ảnh hoặc màu trắng mà bạn muốn thiết lập.

        <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. Sau khi đặt mã này vào tệp xml, hãy đặt dòng dưới đây vào tệp 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);
        }
    });

Điều này sẽ làm cho đường viền của hình ảnh chỉ đơn giản là không có thêm phần đệm và lề.

GHI CHÚ : Hình ảnh trắng là bắt buộc đối với đường viền nếu không nó sẽ không hoạt động.

Chúc mừng mã hóa :)


3

Với thư viện glide bạn có thể sử dụng mã này:

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

bạn cũng có thể tạo hình ảnh tròn bằng thư viện glid.
priti

2

Tôi đã tìm kiếm nó sớm hơn và tôi đã làm nó theo cách rất dễ dàng, tôi hy vọng bạn sẽ thích điều này.

 //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 để làm mờ dần trong hình ảnh động.

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

cuối cùng để gọi phương thức này.

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

2

Bạn có thể chỉ cần gọi hàm tạo của RoundedCornersTransifying, có đầu vào enum gócType. Như thế này:

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

nhưng trước tiên bạn phải thêm Glide Transformations vào dự án của bạn.


2

Đây là một cách đơn giản và gọn gàng hơn để khoanh tròn ảnh bitmap của bạn trong Glide:

  1. Tạo một chuyển đổi tùy chỉnh bằng cách mở rộng BitmapTransformationsau đó ghi đè transformphương thức như thế này:

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

}

Cho 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. Sau đó đặt nó trong trình tạo Glide nơi bạn cần:
Glide.with(yourActivity)
   .load(yourUrl)
   .asBitmap()
   .transform(new CircularTransformation())
   .into(yourView);

Hi vọng điêu nay co ich :)


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

Cắt vòng tròn + giữ chỗ + crossfade

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

nhập mô tả hình ảnh ở đây


1

Glide phiên bản 4.6.1

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

1

Trong trường hợp này tôi cần thêm bóng và độ cao imageView không hoạt động

triển khai "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>

Hình dạng có thể vẽ

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

Cấu hình trượt

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

0

Bạn phải sử dụng ThongImageView để hiển thị loại hình ảnh đó ...

Bạn đang sử dụng thư viện Glide dùng để tải hình ảnh ..

Tạo One ClassFile trong Dự án của bạn và tải nó trong Imageview ... và bạn sẽ nhận được kết quả mong muốn ...

Hãy thử theo dõi mã ...

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

Thông tưImageView.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;
    }
}

Ghi chú :

Bạn có thể dùng

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

hoặc là

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

nó sẽ không ảnh hưởng đến các thư viện khác của bạn ... không phải thay đổi mã của bạn để tải xuống hình ảnh hoặc bất cứ điều gì khác ... đơn giản là nó có thể được xác định bằng XML.


3
Tôi đã thử Glide + trònImageView (và RoundedImageView) và nó không hoạt động tốt nếu bạn bắt đầu sử dụng trình giữ chỗ (trong khi hình ảnh của bạn đang được tải xuống) và xuất hiện hình ảnh động. Picasso không có vấn đề này. Bạn có thể tô màu thêm về nó ở đây: github.com/vinc3m1/RoundedImageView/issues/76
zmicer

Chỉ cần sử dụng .asBitmap trong cuộc gọi Glide và nó sẽ hoạt động tốt.
granko87

Yêu cầu gọi .dontAnimate () trên glide không được chấp nhận
Greg Enni
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.