Android自定義圓角ImageView 支持網絡圖片

jopen 10年前發布 | 132K 次閱讀 Android開發移動開發

先看下效果圖

我們再來看一張CSDN的圓角圖片

從布局可以看出csdn app 的頭像也是圓角的Image，但可以看到，有明顯的毛刺感，不知道是csdn 程序員的疏忽還是我手機的問題，本人手機（小米note）。不知道其他的小伙伴顯示效果也是這樣。

好回到主題。其實實現圓角Image的方式有很多，今天所講的是我認為比較簡單的一種。首先我們需要了解Xfermode屬性，什么意思呢？看一張圖你就明白了

這是Xfermode屬性的幾種模式和效果，簡單說明一下

Src和Dst分別是一張矩形和原型圖片，當我們設置不同的模式，顯示的效果就如上圖所示。關于Xfermode這里不過多闡述，免得把大家繞暈了，我們這里只需要關注其中的SrcIn模式，可以看到這個模式取的是兩張圖片的交集部分。這就好辦了，我們通常拿到img圖片都是矩形，我們可以利用canvas畫一個圓，然后利用SrcIn屬性，取img和圓的交集，那么圓角ImageView是不是就輕易實現了呢？

這里先理一下思路，1、自定義兩個屬性來設置圓角的弧度，以及當前是否畫純圓。2、設置Xfermode屬性為SrcIn 。就這簡單兩步圓角ImageView就實現了，接下來直接上代碼。

import wu.han.himan_library.R;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * 
 * @author Mr.Himan
 * @version 1.0<br>
 *          2015年12月16日 09:28:25<br>
 *          圖片圓角實現
 * 
 */
public class CustomImageView extends ImageView {
    private Paint paint;
    private Paint paintBorder;
    private Bitmap mSrcBitmap;
    /**
     * 圓角的弧度
     */
    private float mRadius;
    private boolean mIsCircle;

    public CustomImageView(final Context context) {
        this(context, null);
    }

    public CustomImageView(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.customImageViewStyle);
    }

    public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        TypedArray ta = context.obtainStyledAttributes(attrs,
                R.styleable.CustomImageView, defStyle, 0);
        mRadius = ta.getDimension(R.styleable.CustomImageView_radius, 0);
        mIsCircle = ta.getBoolean(R.styleable.CustomImageView_circle, false);
        int srcResource = attrs.getAttributeResourceValue(
                "http://schemas.android.com/apk/res/android", "src", 0);
        if (srcResource != 0)
            mSrcBitmap = BitmapFactory.decodeResource(getResources(),
                    srcResource);
        ta.recycle();
        paint = new Paint();
        paint.setAntiAlias(true);
        paintBorder = new Paint();
        paintBorder.setAntiAlias(true);
    }

    @Override
    public void onDraw(Canvas canvas) {
        int width = canvas.getWidth() - getPaddingLeft() - getPaddingRight();
        int height = canvas.getHeight() - getPaddingTop() - getPaddingBottom();
        Bitmap image = drawableToBitmap(getDrawable());
        if (mIsCircle) {
            Bitmap reSizeImage = reSizeImageC(image, width, height);
            canvas.drawBitmap(createCircleImage(reSizeImage, width, height),
                    getPaddingLeft(), getPaddingTop(), null);

        } else {

            Bitmap reSizeImage = reSizeImage(image, width, height);
            canvas.drawBitmap(createRoundImage(reSizeImage, width, height),
                    getPaddingLeft(), getPaddingTop(), null);
        }
    }

    /**
     * 畫圓角
     * 
     * @param source
     * @param width
     * @param height
     * @return
     */
    private Bitmap createRoundImage(Bitmap source, int width, int height) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);
        Canvas canvas = new Canvas(target);
        RectF rect = new RectF(0, 0, width, height);
        canvas.drawRoundRect(rect, mRadius, mRadius, paint);
        // 核心代碼取兩個圖片的交集部分
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(source, 0, 0, paint);
        return target;
    }

    /**
     * 畫圓
     * 
     * @param source
     * @param width
     * @param height
     * @return
     */
    private Bitmap createCircleImage(Bitmap source, int width, int height) {

        Paint paint = new Paint();
        paint.setAntiAlias(true);
        Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);
        Canvas canvas = new Canvas(target);
        canvas.drawCircle(width / 2, height / 2, Math.min(width, height) / 2,
                paint);
        // 核心代碼取兩個圖片的交集部分
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(source, (width - source.getWidth()) / 2,
                (height - source.getHeight()) / 2, paint);
        return target;

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    /**
     * drawable轉bitmap
     * 
     * @param drawable
     * @return
     */
    private Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable == null) {
            if (mSrcBitmap != null) {
                return mSrcBitmap;
            } else {
                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;
    }

    /**
     * 重設Bitmap的寬高
     * 
     * @param bitmap
     * @param newWidth
     * @param newHeight
     * @return
     */
    private Bitmap reSizeImage(Bitmap bitmap, int newWidth, int newHeight) {
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        // 計算出縮放比
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        // 矩陣縮放bitmap
        Matrix matrix = new Matrix();

        matrix.postScale(scaleWidth, scaleHeight);
        return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
    }

    /**
     * 重設Bitmap的寬高
     * 
     * @param bitmap
     * @param newWidth
     * @param newHeight
     * @return
     */
    private Bitmap reSizeImageC(Bitmap bitmap, int newWidth, int newHeight) {
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        int x = (newWidth - width) / 2;
        int y = (newHeight - height) / 2;
        if (x > 0 && y > 0) {
            return Bitmap.createBitmap(bitmap, 0, 0, width, height, null, true);
        }

        float scale = 1;

        if (width > height) {
            // 按照寬度進行等比縮放
            scale = ((float) newWidth) / width;

        } else {
            // 按照高度進行等比縮放
            // 計算出縮放比
            scale = ((float) newHeight) / height;
        }
        Matrix matrix = new Matrix();
        matrix.postScale(scale, scale);
        return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
    }
}

attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="Theme">
        <attr name="customImageViewStyle" format="reference" />
    </declare-styleable>
    <!-- 自定義圓角ImageView -->
    <declare-styleable name="CustomImageView">
        <attr name="circle" format="boolean" />
        <attr name="radius" format="dimension" />
    </declare-styleable>

</resources>

到這里圓角ImageView就實現了，代碼比較簡單，同樣的我們可以根據Xfermode設置不痛的模式，來實現不同的效果。需要注意的是，在上面代碼中我做了圖片的壓縮和縮放操作，當我們有時在加載網絡圖片的時候，圖片寬高往往是不確定的，所以這里的壓縮和縮放處理，需要大家根據自己的業務需求進行相應的改動

來自： http://blog.csdn.net/soul_code/article/details/50323481

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1452320356339.html

Android開發移動開發

Android自定義圓角ImageView 支持網絡圖片

相關經驗

相關資訊

相關文檔

目錄