Comment créer une bordure pour une image recadrée en cercle en mode plané
par défaut, l’image recadrée par glissement n’a pas de bordure. Il est nécessaire d’avoir une bordure dans l’image circulaire.
Version 4
J'ai fait de cette façon, RoundedCorners Classe:
import Android.content.Context;
import Android.graphics.Bitmap;
import Android.graphics.BitmapShader;
import Android.graphics.Canvas;
import Android.graphics.Color;
import Android.graphics.Paint;
import Android.graphics.RectF;
import Android.graphics.Shader;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.Transformation;
import com.bumptech.glide.load.engine.Resource;
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapResource;
import Java.security.MessageDigest;
public class RoundedCornersTransformation implements Transformation<Bitmap> {
public enum CornerType {
ALL,
TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,
TOP, BOTTOM, LEFT, RIGHT,
OTHER_TOP_LEFT, OTHER_TOP_RIGHT, OTHER_BOTTOM_LEFT, OTHER_BOTTOM_RIGHT,
DIAGONAL_FROM_TOP_LEFT, DIAGONAL_FROM_TOP_RIGHT, BORDER
}
private BitmapPool mBitmapPool;
private int mRadius;
private int mDiameter;
private int mMargin;
private CornerType mCornerType;
private String mColor;
private int mBorder;
public RoundedCornersTransformation(Context context, int radius, int margin) {
this(context, radius, margin, CornerType.ALL);
}
public RoundedCornersTransformation(Context context, int radius, int margin, String color, int border) {
this(context, radius, margin, CornerType.BORDER);
mColor = color;
mBorder = border;
}
public RoundedCornersTransformation(BitmapPool pool, int radius, int margin) {
this(pool, radius, margin, CornerType.ALL);
}
public RoundedCornersTransformation(Context context, int radius, int margin,
CornerType cornerType) {
this(Glide.get(context).getBitmapPool(), radius, margin, cornerType);
}
public RoundedCornersTransformation(BitmapPool pool, int radius, int margin,
CornerType cornerType) {
mBitmapPool = pool;
mRadius = radius;
mDiameter = mRadius * 2;
mMargin = margin;
mCornerType = cornerType;
}
@Override
public Resource<Bitmap> transform(Context context, Resource<Bitmap> resource, int outWidth, int outHeight) {
Bitmap source = resource.get();
int width = source.getWidth();
int height = source.getHeight();
Bitmap bitmap = mBitmapPool.get(width, height, Bitmap.Config.ARGB_8888);
if (bitmap == null) {
bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
}
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
Paint.setAntiAlias(true);
Paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
drawRoundRect(canvas, Paint, width, height);
return BitmapResource.obtain(bitmap, mBitmapPool);
}
private void drawRoundRect(Canvas canvas, Paint paint, float width, float height) {
float right = width - mMargin;
float bottom = height - mMargin;
switch (mCornerType) {
case ALL:
canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, Paint);
break;
case TOP_LEFT:
drawTopLeftRoundRect(canvas, Paint, right, bottom);
break;
case TOP_RIGHT:
drawTopRightRoundRect(canvas, Paint, right, bottom);
break;
case BOTTOM_LEFT:
drawBottomLeftRoundRect(canvas, Paint, right, bottom);
break;
case BOTTOM_RIGHT:
drawBottomRightRoundRect(canvas, Paint, right, bottom);
break;
case TOP:
drawTopRoundRect(canvas, Paint, right, bottom);
break;
case BOTTOM:
drawBottomRoundRect(canvas, Paint, right, bottom);
break;
case LEFT:
drawLeftRoundRect(canvas, Paint, right, bottom);
break;
case RIGHT:
drawRightRoundRect(canvas, Paint, right, bottom);
break;
case OTHER_TOP_LEFT:
drawOtherTopLeftRoundRect(canvas, Paint, right, bottom);
break;
case OTHER_TOP_RIGHT:
drawOtherTopRightRoundRect(canvas, Paint, right, bottom);
break;
case OTHER_BOTTOM_LEFT:
drawOtherBottomLeftRoundRect(canvas, Paint, right, bottom);
break;
case OTHER_BOTTOM_RIGHT:
drawOtherBottomRightRoundRect(canvas, Paint, right, bottom);
break;
case DIAGONAL_FROM_TOP_LEFT:
drawDiagonalFromTopLeftRoundRect(canvas, Paint, right, bottom);
break;
case DIAGONAL_FROM_TOP_RIGHT:
drawDiagonalFromTopRightRoundRect(canvas, Paint, right, bottom);
break;
case BORDER:
drawBorder(canvas, Paint, right, bottom);
break;
default:
canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, Paint);
break;
}
}
private void drawTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter),
mRadius, mRadius, Paint);
canvas.drawRect(new RectF(mMargin, mMargin + mRadius, mMargin + mRadius, bottom), Paint);
canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), Paint);
}
private void drawTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius,
mRadius, Paint);
canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), Paint);
canvas.drawRect(new RectF(right - mRadius, mMargin + mRadius, right, bottom), Paint);
}
private void drawBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom),
mRadius, mRadius, Paint);
canvas.drawRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom - mRadius), Paint);
canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), Paint);
}
private void drawBottomRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius,
mRadius, Paint);
canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), Paint);
canvas.drawRect(new RectF(right - mRadius, mMargin, right, bottom - mRadius), Paint);
}
private void drawTopRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius,
Paint);
canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right, bottom), Paint);
}
private void drawBottomRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius,
Paint);
canvas.drawRect(new RectF(mMargin, mMargin, right, bottom - mRadius), Paint);
}
private void drawLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius,
Paint);
canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), Paint);
}
private void drawRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius,
Paint);
canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), Paint);
}
private void drawOtherTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius,
Paint);
canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius,
Paint);
canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), Paint);
}
private void drawOtherTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius,
Paint);
canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius,
Paint);
canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom - mRadius), Paint);
}
private void drawOtherBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius,
Paint);
canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius,
Paint);
canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mRadius, bottom), Paint);
}
private void drawOtherBottomRightRoundRect(Canvas canvas, Paint paint, float right,
float bottom) {
canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius,
Paint);
canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius,
Paint);
canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), Paint);
}
private void drawDiagonalFromTopLeftRoundRect(Canvas canvas, Paint paint, float right,
float bottom) {
canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter),
mRadius, mRadius, Paint);
canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius,
mRadius, Paint);
canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mDiameter, bottom), Paint);
canvas.drawRect(new RectF(mMargin + mDiameter, mMargin, right, bottom - mRadius), Paint);
}
private void drawDiagonalFromTopRightRoundRect(Canvas canvas, Paint paint, float right,
float bottom) {
canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius,
mRadius, Paint);
canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom),
mRadius, mRadius, Paint);
canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), Paint);
canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), Paint);
}
private void drawBorder(Canvas canvas, Paint paint, float right,
float bottom) {
// stroke
Paint strokePaint = new Paint();
strokePaint.setStyle(Paint.Style.STROKE);
if (mColor != null) {
strokePaint.setColor(Color.parseColor(mColor));
} else {
strokePaint.setColor(Color.BLACK);
}
strokePaint.setStrokeWidth(mBorder);
canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, Paint);
// stroke
canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, strokePaint);
}
@Override
public void updateDiskCacheKey(MessageDigest messageDigest) {
}
public String getId() {
return "RoundedTransformation(radius=" + mRadius + ", margin=" + mMargin + ", diameter="
+ mDiameter + ", cornerType=" + mCornerType.name() + ")";
}
}
Maintenant, dans votre activité, vous devez mettre ceci:
public static int sCorner = 15;
public static int sMargin = 2;
public static int sBorder = 10;
public static String sColor = "#7D9067";
...
ImageView imageView = (ImageView) findViewById(R.id.activity_main_image_view);
ImageView mImageViewBorder = (ImageView) findViewById(R.id.activity_main_image_view_border);
....
// Rounded corners
Glide.with(this).load("http://scareface.jpeg")
.apply(RequestOptions.bitmapTransform(
new RoundedCornersTransformation(this, sCorner, sMargin))).into(mImageView);
// Rounded corners with border
Glide.with(this).load("http://scareface.jpeg")
.apply(RequestOptions.bitmapTransform(
new RoundedCornersTransformation(this, sCorner, sMargin, sColor, sBorder))).into(mImageViewBorder);
Vous pouvez consulter mon exemple dans github .
Vous pouvez aussi vérifier ceci post et cette bibliothèque pour Version 3.
Dessins pour la bordure de cercle de ImageView circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="oval">
<solid Android:color="@Android:color/transparent" />
<stroke
Android:width="@dimen/et_thick"
Android:color="@color/profile_pic_round" />
<corners Android:radius="@dimen/default_corner_radius" />
</shape>
et la mise en page sera comme ça
Assurez-vous que la hauteur et la largeur de votre ImageView sont inférieures à celles de RelativeLayout.
<RelativeLayout
Android:layout_width="150dp"
Android:layout_height="150dp"
Android:background="@drawable/circle">// set circle drawable here
<ImageView
Android:id="@+id/profile_pic"
Android:layout_width="145dp"
Android:layout_height="145dp"
Android:layout_centerInParent="true" />
</RelativeLayout>
et définir l'image avec circuler comme ceci programmétiquement
Glide.with(mContext)
.load(imagePath)//<= path of image
.bitmapTransform(new CropCircleTransform(mContext))//<= For Circuler image
.into(ivProfileImage);//<= your Imageview
Bonne façon de faire cette chose sans utiliser aucune mise en page externe
public static <T> void circleImage(final ImageView imageView, T uri, final boolean border) {
Glide.with(imageView.getContext()).load(uri).asBitmap().centerCrop().into(new BitmapImageViewTarget(imageView) {
@Override
protected void setResource(Bitmap resource) {
RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(imageView.getContext().getResources(), border ? addWhiteBorder(resource, imageView.getContext()) : resource);
circularBitmapDrawable.setCircular(true);
imageView.setImageDrawable(circularBitmapDrawable);
}
});
}
Pour ajouter une bordure avec bitmap
private static Bitmap addBorder(Bitmap resource, Context context) {
int w = resource.getWidth();
int h = resource.getHeight();
int radius = Math.min(h / 2, w / 2);
Bitmap output = Bitmap.createBitmap(w + 8, h + 8, Bitmap.Config.ARGB_8888);
Paint p = new Paint();
p.setAntiAlias(true);
Canvas c = new Canvas(output);
c.drawARGB(0, 0, 0, 0);
p.setStyle(Paint.Style.FILL);
c.drawCircle((w / 2) + 4, (h / 2) + 4, radius, p);
p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
c.drawBitmap(resource, 4, 4, p);
p.setXfermode(null);
p.setStyle(Paint.Style.STROKE);
p.setColor(ContextCompat.getColor(context, R.color.colorPrimary));
p.setStrokeWidth(3);
c.drawCircle((w / 2) + 4, (h / 2) + 4, radius, p);
return output;
}
Basé sur la réponse de @ wadali pour que cela fonctionne avec Glide 4.x et kotlin. Ce n'est pas un coin arrondi comme la réponse acceptée, mais un cercle complet.
Copiez et modifiez ce code en fonction de votre condition
fun Bitmap.addBorder(borderSize: Float): Bitmap {
val borderOffset = (borderSize * 2).toInt()
val radius = Math.min(height / 2, width / 2).toFloat()
val output = Bitmap.createBitmap(width + borderOffset, height + borderOffset, Bitmap.Config.ARGB_8888)
val Paint = Paint()
val borderX = width / 2 + borderSize
val borderY = height / 2 + borderSize
val canvas = Canvas(output)
Paint.isAntiAlias = true
canvas.drawARGB(0, 0, 0, 0)
Paint.style = Paint.Style.FILL
canvas.drawCircle(borderX, borderY, radius, Paint)
Paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
canvas.drawBitmap(this, borderSize, borderSize, Paint)
Paint.xfermode = null
Paint.style = Paint.Style.STROKE
Paint.color = Color.WHITE
Paint.strokeWidth = borderSize
canvas.drawCircle(borderX, borderY, radius, Paint)
return output
}
fun <T> ImageView.circleImage(uri: T, borderSize: Float) {
Glide.with(context)
.asBitmap()
.load(uri)
.apply(RequestOptions.circleCropTransform())
.into(object : BitmapImageViewTarget(this) {
override fun setResource(resource: Bitmap?) {
val circularBitmapDrawable = RoundedBitmapDrawableFactory.create(
context.resources,
if (borderSize > 0) {
resource?.addBorder(borderSize)
} else {
resource
}
)
circularBitmapDrawable.isCircular = true
setImageDrawable(circularBitmapDrawable)
}
})
}
Comment utiliser?
yourImageView.circleImage(
imageUrl,
borderSizeInPx
)
C'est facile avec une mise en page extérieure:
your_layout.xml
<RelativeLayout
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:padding="5dp"
Android:background="@drawable/round_border_style">
<ImageView
Android:id="@+id/imageView"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_centerInParent="true"/>
</RelativeLayout>
res/drawable/round_border_style.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
<shape>
<gradient Android:angle="0" Android:endColor="@color/white" Android:startColor="@color/white" Android:centerColor="@color/white" Android:gradientRadius="10sp" />
<corners Android:radius="5dp" />
<stroke Android:width="2dp"
Android:color="@color/gray"/>
</shape>
</item>
</selector>
Controller.Java
GlideApp.with(context).load(url).fitCenter().into(imageView);
c'est la meilleure façon sans classe supplémentaire dans Glide V4. +
Glide.with(this)
.load(url)
.apply(new RequestOptions().circleCrop())
.into(view);