Android 完美實現圖片圓角和圓形（對實現進行分析）

分類： 【android 進階之路】2014-04-26 21:44 41707人閱讀 評論(81) 收藏 舉報

圓角圖片自定義View

目錄(?)[+]

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/24555655

本來想在網上找個圓角的例子看一看，不盡人意啊，基本都是官方的Demo的那張原理圖，稍後會貼出。於是自己自定義了個View，實現圖片的圓角以及圓形效果。效果圖：

第一個是原圖，第二個是圓形效果，第三第四設置了不同的圓角大小。

準備改變一個博客的風格，首先給大家講一下原理，讓大家明白了，然後再貼代碼，不然可以直接看那麼長的代碼也比較痛苦，核心代碼其實就那麼幾行：

核心代碼分析：

/**
     * 根據原圖和變長繪製圓形圖片
     *
     * @param source
     * @param min
     * @return
     */
    private Bitmap createCircleImage(Bitmap source, int min)
    {
        final Paint paint = new Paint();
        paint.setAntiAlias(true);
        Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
        /**
         * 產生一個同樣大小的畫布
         */
        Canvas canvas = new Canvas(target);
        /**
         * 首先繪製圓形
         */
        canvas.drawCircle(min / 2, min / 2, min / 2, paint);
        /**
         * 使用SRC_IN
         */
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        /**
         * 繪製圖片
         */
        canvas.drawBitmap(source, 0, 0, paint);
        return target;
    }

其實主要靠：paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));這行代碼，爲什麼呢，我給大家解釋下，SRC_IN這種模式，兩個繪製的效果疊加後取交集展現後圖，怎麼說呢，咱們第一個繪製的是個圓形，第二個繪製的是個Bitmap，於是交集爲圓形，展現的是BItmap，就實現了圓形圖片效果。圓角，其實就是先繪製圓角矩形，是不是很簡單，以後別人再說實現圓角，你就把這一行代碼給他就行了。

從Android的示例中，給大家證明一下：

下面有一張PorterDuff.Mode的16中效果圖，咱們的只是其一：

源碼咱們只關心誰先誰後繪製的：

canvas.translate(x, y);
              canvas.drawBitmap(mDstB, 0, 0, paint);
              paint.setXfermode(sModes[i]);
              canvas.drawBitmap(mSrcB, 0, 0, paint);
              paint.setXfermode(null);
              canvas.restoreToCount(sc);

可以看出先繪製的Dst,再繪製的Src，最後的展示是SrcIn那個圖：顯示的區域是二者交集，展示的是Src(後者)。和咱們前面結論一致。效果16種，大家可以自由組合展示不同的效果。

好了，原理和核心代碼解釋完成。下面開始寫自定義View。

1、自定義屬性：

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

    <attr name="borderRadius" format="dimension" />
    <attr name="type">
        <enum name="circle" value="0" />
        <enum name="round" value="1" />
    </attr>
    <attr name="src" format="reference"></attr>

    <declare-styleable name="CustomImageView">
        <attr name="borderRadius" />
        <attr name="type" />
        <attr name="src" />
    </declare-styleable>

</resources>

2、構造中獲取自定義的屬性：

/**
 * TYPE_CIRCLE / TYPE_ROUND
 */
private int type;
private static final int TYPE_CIRCLE = 0;
private static final int TYPE_ROUND = 1;

/**
 * 圖片
 */
private Bitmap mSrc;

/**
 * 圓角的大小
 */
private int mRadius;

/**
 * 控件的寬度
 */
private int mWidth;
/**
 * 控件的高度
 */
private int mHeight;

public CustomImageView(Context context, AttributeSet attrs)
{
    this(context, attrs, 0);
}

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

/**
 * 初始化一些自定義的參數
 *
 * @param context
 * @param attrs
 * @param defStyle
 */
public CustomImageView(Context context, AttributeSet attrs, int defStyle)
{
    super(context, attrs, defStyle);

    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);

    int n = a.getIndexCount();
    for (int i = 0; i < n; i++)
    {
        int attr = a.getIndex(i);
        switch (attr)
        {
        case R.styleable.CustomImageView_src:
            mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
            break;
        case R.styleable.CustomImageView_type:
            type = a.getInt(attr, 0);// 默認爲Circle
            break;
        case R.styleable.CustomImageView_borderRadius:
            mRadius= a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,
                    getResources().getDisplayMetrics()));// 默認爲10DP
            break;
        }
    }
    a.recycle();
}

3、onMeasure中獲取控件寬高：

/**
     * 計算控件的高度和寬度
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * 設置寬度
         */
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);

        if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
        {
            mWidth = specSize;
        } else
        {
            // 由圖片決定的寬
            int desireByImg = getPaddingLeft() + getPaddingRight()
                    + mSrc.getWidth();
            if (specMode == MeasureSpec.AT_MOST)// wrap_content
            {
                mWidth = Math.min(desireByImg, specSize);
            } else

                mWidth = desireByImg;
        }

        /***
         * 設置高度
         */

        specMode = MeasureSpec.getMode(heightMeasureSpec);
        specSize = MeasureSpec.getSize(heightMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
        {
            mHeight = specSize;
        } else
        {
            int desire = getPaddingTop() + getPaddingBottom()
                    + mSrc.getHeight();

            if (specMode == MeasureSpec.AT_MOST)// wrap_content
            {
                mHeight = Math.min(desire, specSize);
            } else
                mHeight = desire;
        }

        setMeasuredDimension(mWidth, mHeight);

    }

4、根據Type繪製：

/**
     * 繪製
     */
    @Override
    protected void onDraw(Canvas canvas)
    {

        switch (type)
        {
        // 如果是TYPE_CIRCLE繪製圓形
        case TYPE_CIRCLE:

            int min = Math.min(mWidth, mHeight);
            /**
             * 長度如果不一致，按小的值進行壓縮
             */
            mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);

            canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);
            break;
        case TYPE_ROUND:
            canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);
            break;

        }

    }

    /**
     * 根據原圖和變長繪製圓形圖片
     *
     * @param source
     * @param min
     * @return
     */
    private Bitmap createCircleImage(Bitmap source, int min)
    {
        final Paint paint = new Paint();
        paint.setAntiAlias(true);
        Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
        /**
         * 產生一個同樣大小的畫布
         */
        Canvas canvas = new Canvas(target);
        /**
         * 首先繪製圓形
         */
        canvas.drawCircle(min / 2, min / 2, min / 2, paint);
        /**
         * 使用SRC_IN，參考上面的說明
         */
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        /**
         * 繪製圖片
         */
        canvas.drawBitmap(source, 0, 0, paint);
        return target;
    }

    /**
     * 根據原圖添加圓角
     *
     * @param source
     * @return
     */
    private Bitmap createRoundConerImage(Bitmap source)
    {
        final Paint paint = new Paint();
        paint.setAntiAlias(true);
        Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);
        Canvas canvas = new Canvas(target);
        RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());
        canvas.drawRoundRect(rect, mRadius, mRadius, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(source, 0, 0, paint);
        return target;
    }

好了，我就不解析代碼了，自定義View這是第五篇了，，，，寫得好惡心，，，，

各位贊一個或者留個言，算是對我的支持~

源碼點擊下載

=========================================簡單修復了一下，在ScrollView以及AdapterView中的headview的顯示異常的bug============

修復後代碼下載：

源碼點擊下載

相關博文，同時也推薦使用：

Android Xfermode 實戰 實現圓形、圓角圖片

Android BitmapShader 實戰 實現圓形、圓角圖片

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。