Android 圓形頭像的兩種實現方式

前言

這篇博客只是爲了做一個記錄而已，方便而後查詢，核心代碼都是直接採用鴻洋博客裏面的代碼的。

圓形頭像在實際開發中實際很常見，一般來說，主要有兩種實現方式：

第一種：使用 Paint 的 Xfermode 實戰
第二種方法：使用 BitmapShader 實現

第一種：使用 Paint 的 Xfermode 實戰

圓形頭像，我們可以看成是在原圖上面繪製一個圓，再取交集。

從代碼的角度來講，先繪製 Dst,再繪製 Src，顯示的區域是二者交集，由此可知 SrcIn 符合我們的要求。

圓形圖片的核心思路

取出 Bitmap，並根據圖片的寬高計算縮放比例
設置 Paint 的 setXfermode
在 onDraw 方法裏面繪製 Bitmap

核心代碼

  protected void onDraw(Canvas canvas)  
    {  
        //在緩存中取出bitmap  
        Bitmap bitmap = mWeakBitmap == null ? null : mWeakBitmap.get();  
  
        if (null == bitmap || bitmap.isRecycled())  
        {  
            //拿到Drawable  
            Drawable drawable = getDrawable();  
            //獲取drawable的寬和高  
            int dWidth = drawable.getIntrinsicWidth();  
            int dHeight = drawable.getIntrinsicHeight();  
  
            if (drawable != null)  
            {  
                //創建bitmap  
                bitmap = Bitmap.createBitmap(getWidth(), getHeight(),  
                        Config.ARGB_8888);  
                float scale = 1.0f;  
                //創建畫布  
                Canvas drawCanvas = new Canvas(bitmap);  
                //按照bitmap的寬高，以及view的寬高，計算縮放比例；因爲設置的src寬高比例可能和imageview的寬高比例不同，這裏我們不希望圖片失真；  
                if (type == TYPE_ROUND)  
                {  
                    // 如果圖片的寬或者高與view的寬高不匹配，計算出需要縮放的比例；縮放後的圖片的寬高，一定要大於我們view的寬高；所以我們這裏取大值；  
                    scale = Math.max(getWidth() * 1.0f / dWidth, getHeight()  
                            * 1.0f / dHeight);  
                } else  
                {  
                    scale = getWidth() * 1.0F / Math.min(dWidth, dHeight);  
                }  
                //根據縮放比例，設置bounds，相當於縮放圖片了  
                drawable.setBounds(0, 0, (int) (scale * dWidth),  
                        (int) (scale * dHeight));  
                drawable.draw(drawCanvas);  
                if (mMaskBitmap == null || mMaskBitmap.isRecycled())  
                {  
                    mMaskBitmap = getBitmap();  
                }  
                // Draw Bitmap.  
                mPaint.reset();  
                mPaint.setFilterBitmap(false);  
                mPaint.setXfermode(mXfermode);  
                //繪製形狀  
                drawCanvas.drawBitmap(mMaskBitmap, 0, 0, mPaint);  
                mPaint.setXfermode(null);  
                //將準備好的bitmap繪製出來  
                canvas.drawBitmap(bitmap, 0, 0, null);  
                //bitmap緩存起來，避免每次調用onDraw，分配內存  
                mWeakBitmap = new WeakReference<Bitmap>(bitmap);  
            }  
        }  
        //如果bitmap還存在，則直接繪製即可  
        if (bitmap != null)  
        {  
            mPaint.setXfermode(null);  
            canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);  
            return;  
        }  
  
    }  
    /** 
     * 繪製形狀 
     * @return 
     */  
    public Bitmap getBitmap()  
    {  
        Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),  
                Bitmap.Config.ARGB_8888);  
        Canvas canvas = new Canvas(bitmap);  
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);  
        paint.setColor(Color.BLACK);  
  
        if (type == TYPE_ROUND)  
        {  
            canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),  
                    mBorderRadius, mBorderRadius, paint);  
        } else  
        {  
            canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2,  
                    paint);  
        }  
  
        return bitmap;  
    }

以上代碼來自鴻洋大神的博客 Android Xfermode 實戰實現圓形、圓角圖片

第二種方法：使用 BitmapShader 實現

Shader used to draw a bitmap as a texture.

官方文檔說的很清楚了：BitmapShader的作用是使用特定的圖片來作爲紋理來使用。

BitmapShader 的構造函數

public BitmapShader(@NonNull Bitmap bitmap, TileMode tileX, TileMode tileY)

三個參數：

bitmap 指的是要作爲紋理的圖片，
tileX 指的是在ｘ方向紋理的繪製模式，
tileY 指的是Ｙ方向上的繪製模式。

TileMode 源碼：

public enum TileMode {
        /**
         * replicate the edge color if the shader draws outside of its
         * original bounds
         */
        CLAMP   (0),
        /**
         * repeat the shader's image horizontally and vertically
         */
        REPEAT  (1),
        /**
         * repeat the shader's image horizontally and vertically, alternating
         * mirror images so that adjacent images always seam
         */
        MIRROR  (2);
    
        TileMode(int nativeInt) {
            this.nativeInt = nativeInt;
        }
        final int nativeInt;
    }

TileMode 是一個枚舉類型，有３個可能的值：

CLMP 如果需要填充的內容大小超過了bitmap size 就選bitmap 邊界的顏色進行擴展
REPEAT重複，不斷的重複bitmap去填滿，如果繪製的區域大於紋理圖片的話，紋理圖片會在這片區域不斷重複
MIRROR鏡像的去填滿。如果繪製的區域大於紋理圖片的話，紋理圖片會以鏡像的形式重複出現

BitmapShader 實戰實現圓形、圓角圖片核心思路

取出 bitmap
用 BitmapShader 去裝飾 bitmap，並設置給畫筆
在 onDraw 方法中，調用 canvas 的 draw 方法繪製

僞代碼實現思路

//創建
BitmapShader shader=new BitmapShader(bitmap,TileMode.CLAMP,TileMode.CLAMP);
Paint paint=new Paint();
//爲paint 設置 Shader
paint.setShader(shader);
//這樣就可以使用shader的紋理去覆蓋繪製的圖形的表面了,其中根據：CLAMP,REPEAT,MIRROR，
//來確定紋理的繪製模式
canvas.draw**(***,paint);

核心代碼實心思路

@Override  
    protected void onDraw(Canvas canvas)  
    {  
        if (getDrawable() == null)  
        {  
            return;  
        }  
        setUpShader();  
  
        if (type == TYPE_ROUND)  
        {  
            canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius,  
                    mBitmapPaint);  
        } else  
        {  
            canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);  
            // drawSomeThing(canvas);  
        }  
    }  
      
    @Override  
    protected void onSizeChanged(int w, int h, int oldw, int oldh)  
    {  
        super.onSizeChanged(w, h, oldw, oldh);  
        // 圓角圖片的範圍  
        if (type == TYPE_ROUND)  
            mRoundRect = new RectF(0, 0, getWidth(), getHeight());  
    }  
    
    
    /** 
     * 初始化BitmapShader 
     */  
    private void setUpShader()  
    {  
        Drawable drawable = getDrawable();  
        if (drawable == null)  
        {  
            return;  
        }  
  
        Bitmap bmp = drawableToBitamp(drawable);  
        // 將bmp作爲着色器，就是在指定區域內繪製bmp  
        mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);  
        float scale = 1.0f;  
        if (type == TYPE_CIRCLE)  
        {  
            // 拿到bitmap寬或高的小值  
            int bSize = Math.min(bmp.getWidth(), bmp.getHeight());  
            scale = mWidth * 1.0f / bSize;  
  
        } else if (type == TYPE_ROUND)  
        {  
            // 如果圖片的寬或者高與view的寬高不匹配，計算出需要縮放的比例；縮放後的圖片的寬高，一定要大於我們view的寬高；所以我們這裏取大值；  
            scale = Math.max(getWidth() * 1.0f / bmp.getWidth(), getHeight()  
                    * 1.0f / bmp.getHeight());  
        }  
        // shader的變換矩陣，我們這裏主要用於放大或者縮小  
        mMatrix.setScale(scale, scale);  
        // 設置變換矩陣  
        mBitmapShader.setLocalMatrix(mMatrix);  
        // 設置shader  
        mBitmapPaint.setShader(mBitmapShader);  
    }

以上代碼來自鴻洋大神的 Android BitmapShader 實戰實現圓形、圓角圖片

參考博客：

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

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

Android 圓形頭像的兩種實現方式

前言

第一種：使用 Paint 的 Xfermode 實戰

圓形圖片的核心思路

核心代碼

第二種方法：使用 BitmapShader 實現

BitmapShader 實戰實現圓形、圓角圖片核心思路

核心代碼實心思路

推薦閱讀

Android啓動過程-萬字長文(Android14)

這種嵌套字典類型的數據，我想把它讀取到df裏，如何操作？

微調真的能讓LLM學到新東西嗎:引入新知識可能讓模型產生更多的幻覺

iNeuOS工業互聯網操作系統，增加電力IEC104協議

微服務實踐k8s&dapr開發部署實驗（3）訂閱發佈

kbgressdb之數據結構V0.2

Android 面試必備 - JVM 及類加載機制

Android 圓形頭像的兩種實現方式

Android 面試必備 - 線程

幹起來，你就超過了 50% 的人

2019-08-03

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Android 圓形頭像的兩種實現方式

前言

第一種： 使用 Paint 的 Xfermode 實戰

圓形圖片的核心思路

核心代碼

第二種方法： 使用 BitmapShader 實現

BitmapShader 實戰 實現圓形、圓角圖片 核心思路

核心代碼實心思路

推薦閱讀

第一種：使用 Paint 的 Xfermode 實戰

第二種方法：使用 BitmapShader 實現

BitmapShader 實戰實現圓形、圓角圖片核心思路