Как объединить изображение с помощью библиотеки Glide?

Итак, кто-нибудь знает, как отображать изображение с закругленными углами с помощью Glide? Я загружаю изображение с помощью Glide, но я не знаю, как передать округленные параметры этой библиотеке.

Мне нужно отображать изображение, как показано ниже:

Введите описание изображения здесь

Glide V4:

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

Glide V3:

Вы можете использовать RoundedBitmapDrawable для круговых изображений с Glide. Нет пользовательского 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); } }); 

Проверьте этот пост, glide vs picasso …
Изменить : связанная запись не вызывает существенного различия в библиотеках. Glide автоматически перерабатывает. Подробнее см. Комментарий 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(); } } 

Попробуйте этот путь

код

 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> 

Его очень простой я видел библиотеку 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" /> 

Другие решения не сработали для меня. Я обнаружил, что все они имеют существенные недостатки:

  • Решения, использующие глиссивные преобразования, не работают с заполнителями
  • Решения, использующие закругленные образы изображений, не работают с анимацией (например, 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; } } 

Самый простой способ (требуется Glide 4.xx)

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

Используйте это преобразование, оно будет работать нормально.

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

Я нашел одно простое и простое решение для добавления границы над представлением изображения, в котором цвет хочет установить или добавить градиент над изображением.

ШАГИ:

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

Это сделает границу изображения просто без дополнительных дополнений и полей.

ПРИМЕЧАНИЕ . Белое изображение является обязательным для границы, иначе оно не будет работать.

Счастливая трещина 🙂

Я искал его раньше, и я сделал это самым простым способом, надеюсь, вам это понравится.

  //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 для выцветания в анимации.

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

Вы можете просто вызвать конструктор RoundedCornersTransformation, который имеет вкладку enum cornerType. Как это:

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

Но сначала вы должны добавить Glide Transformations в свой проект.

Вот более модульный и более чистый способ обрезать растровое изображение в Glide:

  1. Создайте собственное преобразование, расширив BitmapTransformation затем переопределите метод transform следующим образом:

Для 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) {} } 

Для 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. Затем установите его в Glide builder, где вам это нужно:
 Glide.with(yourActivity) .load(yourUrl) .asBitmap() .transform(new CircularTransformation()) .into(yourView); 

Надеюсь это поможет 🙂

Glid libary вы можете использовать этот код

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

Вы должны использовать CircularImageView для отображения этого типа изображения …

Вы используете библиотеку Glide, которая использовалась для загрузки изображений.

Создайте One 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 тоже ..