web-dev-qa-db-ja.com

グライドで円をトリミングした画像の境界線を作成する方法

デフォルトでは、グライドによって切り取られた画像には境界線がありません。サークル画像に境界線が必要です。

androidandroid-glide
20
Nima

enter image description here

バージョン4

このようにして、RoundedCornersクラスを作成しました。

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 で私の例を確認できます。

また、これを確認することができます post およびこの library forVersion 3。

37
Cabezas

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>

レイアウトは次のようになります

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>

そして、このようにプログラム的にサーキュラーで画像を設定します

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

Glide 4.xおよびKotlinプログラミング言語。また、コードを少し最適化したので、きれいになりました。色を直接変更したり、Kotlin拡張機能を活用したりすることもできます。受け入れられた答えのように丸い角ではなく、下のサンプル画像のように完全に丸くなっています。

image result

このコードをプロジェクトに追加します

/**
 * Load model into ImageView as a circle image with borderSize (optional) using Glide
 *
 * @param model - Any object supported by Glide (Uri, File, Bitmap, String, resource id as Int, ByteArray, and Drawable)
 * @param borderSize - The border size in pixel
 * @param borderColor - The border color
 */
fun <T> ImageView.loadCircularImage(
    model: T,
    borderSize: Float = 0F,
    borderColor: Int = Color.WHITE
) {
    Glide.with(context)
        .asBitmap()
        .load(model)
        .apply(RequestOptions.circleCropTransform())
        .into(object : BitmapImageViewTarget(this) {
            override fun setResource(resource: Bitmap?) {
                setImageDrawable(
                    resource?.run {
                        RoundedBitmapDrawableFactory.create(
                            resources,
                            if (borderSize > 0) {
                                createBitmapWithBorder(borderSize, borderColor)
                            } else {
                                this
                            }
                        ).apply {
                            isCircular = true
                        }
                    }
                )
            }
        })
}

/**
 * Create a new bordered bitmap with the specified borderSize and borderColor
 *
 * @param borderSize - The border size in pixel
 * @param borderColor - The border color
 * @return A new bordered bitmap with the specified borderSize and borderColor
 */
fun Bitmap.createBitmapWithBorder(borderSize: Float, borderColor: Int = Color.WHITE): Bitmap {
    val borderOffset = (borderSize * 2).toInt()
    val halfWidth = width / 2
    val halfHeight = height / 2
    val circleRadius = Math.min(halfWidth, halfHeight).toFloat()
    val newBitmap = Bitmap.createBitmap(
        width + borderOffset,
        height + borderOffset,
        Bitmap.Config.ARGB_8888
    )

    // Center coordinates of the image
    val centerX = halfWidth + borderSize
    val centerY = halfHeight + borderSize

    val Paint = Paint()
    val canvas = Canvas(newBitmap).apply {
        // Set transparent initial area
        drawARGB(0, 0, 0, 0)
    }

    // Draw the transparent initial area
    Paint.isAntiAlias = true
    Paint.style = Paint.Style.FILL
    canvas.drawCircle(centerX, centerY, circleRadius, Paint)

    // Draw the image
    Paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
    canvas.drawBitmap(this, borderSize, borderSize, Paint)

    // Draw the createBitmapWithBorder
    Paint.xfermode = null
    Paint.style = Paint.Style.STROKE
    Paint.color = borderColor
    Paint.strokeWidth = borderSize
    canvas.drawCircle(centerX, centerY, circleRadius, Paint)
    return newBitmap
}

そしてそれを使用する

yourImageView.loadCircularImage(
        imageUrl, // or any object supported by Glide
        borderSizeInPx,
        Color.RED // optional, default is white
)
8
HendraWD

外部レイアウトを使用せずにこのことを行う良い方法

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

外側のレイアウトで簡単です：

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);
1
Daniel Hernández

Glide V4。+で余分なクラスを使わないで最良の方法です

Glide.with(this)
                .load(url)
                .apply(new RequestOptions().circleCrop())
                .into(view);
0
reza Esfandiary