Как сделать границу для кругового обрезанного изображения в скольжении

По умолчанию изображение, которое обрезано с помощью скольжения, не имеет границы, мне нужно иметь границу в изображении круга.

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

Версия 4

Я сделал это так, RoundedCorners Class:

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

Теперь в вашей деятельности вы должны это сделать:

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

Вы можете проверить мой пример в github .

Также вы можете проверить этот пост и эту библиотеку для Версии 3 .

Возможность рисования для границы круга 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" /> 

И макет будет таким:

Убедитесь, что высота и ширина вашего ImageView ниже, чем высота и ширина 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> 

И задайте Image с циркуляром, как это возможно

 Glide.with(mContext) .load(imagePath)//<= path of image .bitmapTransform(new CropCircleTransform(mContext))//<= For Circuler image .into(ivProfileImage);//<= your Imageview 

Хороший способ сделать это без использования внешнего макета

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

Для добавления границы с растровым изображением

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