使图像视图变圆（不是图像）

Question

要求是：

要求 1：从 url 获取图片

R2：将它们保存在缓存中

R3: 使 ImageView 变成圆形而不是图像

所以对于 R1 和 R2，我找到了一个库： http://loopj.com/android-smart-image-view/

对于 R3，我做了很多研发工作，我发现的所有东西都转换了图像而不是 ImageView。这是我搜索过的：

Mask ImageView with round corner background

How to make an ImageView with rounded corners?

https://github.com/vinc3m1/RoundedImageView

https://github.com/lopspower/CircularImageView

我知道可以使用 ImageView 位图并获得四舍五入的图像，但对于我想使用的特定库，这是不可能的（可能使用非常复杂的线程）。

所以请帮我把 ImageView 弄圆而不是图像。

Answer 1

所以这是极简版：

class RoundImageView extends ImageView {
    private static final int RADIUS = 32;
    private Paint mPaint;
    private Paint mSrcIn;
    private RectF mRect;

    public RoundImageView(Context context) {
        super(context);
//        setBackgroundColor(0xffffffff);
        mSrcIn = new Paint();
        mSrcIn.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mRect = new RectF();
    }

    @Override
    public void onDraw(Canvas canvas) {
        Drawable dr = getDrawable();
        if (dr != null) {
            mRect.set(dr.getBounds());
            getImageMatrix().mapRect(mRect);
            mRect.offset(getPaddingLeft(), getPaddingTop());

            int rtc = canvas.saveLayer(mRect, null, Canvas.ALL_SAVE_FLAG);
            // draw DST
            canvas.drawRoundRect(mRect, RADIUS, RADIUS, mPaint);

            canvas.saveLayer(mRect, mSrcIn, Canvas.ALL_SAVE_FLAG);
            // draw SRC
            super.onDraw(canvas);
            canvas.restoreToCount(rtc);
        }
    }
}

或者在不使用硬件加速的情况下使用更短的，你可以使用 Canvas.clipPath：

class RoundImageViewClipped extends ImageView {
    private static final int RADIUS = 32;
    private RectF mRect;
    private Path mClip;

    public RoundImageViewClipped(Context context) {
        super(context);
//        setBackgroundColor(0xffffffff);
        mRect = new RectF();
        mClip = new Path();
    }

    @Override
    public void onDraw(Canvas canvas) {
        Drawable dr = getDrawable();
        if (dr != null) {
            mRect.set(dr.getBounds());
            getImageMatrix().mapRect(mRect);
            mRect.offset(getPaddingLeft(), getPaddingTop());
            mClip.reset();
            mClip.addRoundRect(mRect, RADIUS, RADIUS, Direction.CCW);

            canvas.clipPath(mClip);
            super.onDraw(canvas);
        }
    }
}

Answer 2

我很确定你不能“让 ImageView 变成圆形”，因为所有视图实际上都是矩形的，所以你要做的就是伪造它。

使用这样的方法从图像中切出一个圆圈：

public Bitmap getRoundedBitmap(Bitmap scaleBitmapImage) {
    int targetRadius = scaleBitmapImage.getWidth();
    if(targetRadius > scaleBitmapImage.getHeight()) targetRadius = scaleBitmapImage.getHeight();

    Bitmap targetBitmap = Bitmap.createBitmap(targetRadius, targetRadius, Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(targetBitmap);
    Path path = new Path();
    path.addCircle(((float) scaleBitmapImage.getWidth() - 1) / 2, ((float) scaleBitmapImage.getHeight() - 1) / 2, (Math.min(((float) scaleBitmapImage.getWidth()), ((float) scaleBitmapImage.getHeight())) / 2), Path.Direction.CCW);

    canvas.clipPath(path);
    Bitmap sourceBitmap = scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap, new Rect(0, 0, sourceBitmap.getWidth(), sourceBitmap.getHeight()), new Rect(0, 0, scaleBitmapImage.getWidth(), scaleBitmapImage.getHeight()), null);

    return targetBitmap;
}

由于被剪裁的部分是透明的，所以它看起来就像实际的 View 是一个圆形一样。还要确保视图的边界是平方的（或 adjustViewBounds="true"），否则您可能会在宽度或高度方面出现视觉扭曲。

很确定这与您实际获得的“圆形视图”一样接近。

Answer 3

Romain Guy to use a custom Drawable 给出的解决方案怎么样？您的 ImageView 不会是圆形的，您的源图像将不会受到影响。

class StreamDrawable extends Drawable {

    private final float mCornerRadius;
    private final RectF mRect = new RectF();
    private final BitmapShader mBitmapShader;
    private final Paint mPaint;
    private final int mMargin;

    StreamDrawable(Bitmap bitmap, float cornerRadius, int margin) {
        mCornerRadius = cornerRadius;

        mBitmapShader = new BitmapShader(bitmap,
                Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setShader(mBitmapShader);

        mMargin = margin;
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        mRect.set(mMargin, mMargin, bounds.width() - mMargin, bounds.height() - mMargin);


    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawRoundRect(mRect, mCornerRadius, mCornerRadius, mPaint);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
        mPaint.setColorFilter(cf);
    }       
}

Answer 4

您可以使用 GradientDrawable 在 android 视图中添加圆角。 所以，

GradientDrawable gd = new GradientDrawable();
gd.setColor(Color.TRANSPARENT);
gd.setCornerRadius(15f);
gd.setStroke(1f,Color.BLACK);
yourImageView.setBackground(gd);

Answer 5

SmartImageView 扩展自 ImageView .. 所以你只需要扩展 SmartImageView

这是一个可行的解决方案（基于 pskink 代码和 smartImageView 库）

创建一个新类

public class RoundedCornersSmartImageView extends SmartImageView{

private int RADIUS = 0;
private RectF mRect;
private Path mClip;

public RoundedCornersSmartImageView(Context context) {
    super(context);
    init();
}

public RoundedCornersSmartImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public RoundedCornersSmartImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init();
}

@Override
public void onDraw(Canvas canvas) {
    Drawable dr = getDrawable();
    if (dr != null) {
        mRect.set(dr.getBounds());
        getImageMatrix().mapRect(mRect);
        mRect.offset(getPaddingLeft(), getPaddingTop());
        mClip.reset();
        mClip.addRoundRect(mRect, RADIUS, RADIUS, Path.Direction.CCW);

        canvas.clipPath(mClip);
        super.onDraw(canvas);
    }
}

public void setRadius(int radius){
    this.RADIUS = radius;
}

private void init(){
    mRect = new RectF();
    mClip = new Path();
}
}

用法

在您的布局文件中，您的 SmartimageView 应如下所示

<your.package.path.RoundedCornersSmartImageView
        android:id="@+id/list_image"
        android:layout_width="60dip"
        android:layout_height="60dip"
        android:src="@drawable/profile_anonyme_thumb"/>

..并以这种方式在代码中初始化视图

RoundedCornersSmartImageView thumb_image=(RoundedCornersSmartImageView) findViewById(R.id.list_image);

thumb_image.setRadius(4);
//SmartImageView methode 
thumb_image.setImageUrl(bla.MY_THUMB_URL));

编辑圆形图像的半径..