android 手把手教你繪制圓形頭像

自從騰訊QQ中的圓形頭像，火了起來後，現在我們在一些應用中都能看到圓形頭像的身影，在個人首頁或者個人資料面闆中使用圓形頭像，會使整個布局變得更加優雅

現在我們來進行第一步，建立一個繼承ImageView的抽象類MakeRoundImage。讓他重寫onDraw方法，并且聲明一個畫筆

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by blue on 2016/8/19.
 */

public class MakeRoundImage extends ImageView {
     private Paint paint;

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

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

    public MakeRoundImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
    }


    @Override
    protected void onDraw(Canvas canvas) {

    }
}
           

然後就可以在onDraw 通過 getDrawable得到ImageView的drawable的屬性，然後将它轉換為bitmap，通過getRoundBitmap方法得到一個圓角的矩形的Bitmap，下面是getRoundRectBitmap方法

/*
    @author :blue-zj
    擷取到圓角矩形圖檔
     */
    private Bitmap getRoundRectBitmap(Bitmap bitmap) {
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        int r = width > height ? height: width; //去圓角正方形的邊長，取最短邊做邊長
        Bitmap backGround = Bitmap.createBitmap(width,
                height, Bitmap.Config.ARGB_8888); //建立一個與原圖大小一樣的32位ARGB位圖
        Canvas canvas = new Canvas(backGround);   //new一個Canvas，在backgroundBmp上畫圖
        Paint paint = new Paint();
        paint.setAntiAlias(true); //設定畫筆邊緣光滑，去掉鋸齒
        RectF rect = new RectF(, , r, r); //設定寬高相等，（正方形)
        //通過制定的rect畫一個圓角矩形，當圓角X軸方向的半徑等于Y軸方向的半徑時，
        //且都等于r/2時，畫出來的圓角矩形就是圓形
        canvas.drawRoundRect(rect, r >> , r >> , paint);
        //設定當兩個圖形相交時的模式，SRC_IN為取SRC圖形相交的部分，多餘的将被去掉
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        //canvas将bitmap畫在backgroundBmp上
        canvas.drawBitmap(bitmap, null, rect, paint);
        //傳回已經繪畫好的backgroundBmp
        return backGround;
    }
           

首先我們通過傳進去的Bitmap，得到了原圖的大小，建立了一個與原圖一樣大小的正方形圓角bitmap，然後我們在這個正方形圓角中将傳進來的bitmap，與建立的位圖通過畫筆的

來講bitmap進行裁剪成一個圓角矩形的bitmap，然後再傳回,

最後在onDraw方法中調用getRoundRectBitmap擷取到我們的圓角矩形圖檔，然後再在将原有的ImageView的canvas上進行裁剪

@Override  
    protected void onDraw(Canvas canvas) {  

        Drawable drawable = getDrawable();//得到ImageView的drawable屬性
        if (null != drawable) {  
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();  //擷取到ImageView的bitmap
            Bitmap b = toRoundBitmap(bitmap);//擷取圓角圖檔
            /*
            Rect src: 是對圖檔進行裁截，若是空null則顯示整個圖檔
             RectF dst：是圖檔在Canvas畫布中顯示的區域，
            大于src則把src的裁截區放大，
            小于src則把src的裁截區縮小。
             */
            final Rect rectSrc = new Rect(, , b.getWidth(), b.getHeight());  
            final Rect rectDest = new Rect(,,getWidth(),getHeight()   );
            paint.reset();  //重置畫筆
            canvas.drawBitmap(b, rectSrc, rectDest, paint);//在原有的畫布中裁剪出圓形圖檔
        } else {  
            super.onDraw(canvas);  
        }  
    }   
           

這個圖檔裁剪的類已經寫完了，最後就是在布局中調用了

<com.example.blue.makeroundimage.MakeRoundImage
    android:src="@drawable/my_head"
    android:layout_height="80dp"
    android:layout_width="80dp"

    tools:layout_editor_absoluteY="208dp"
    tools:layout_editor_absoluteX="157dp" />
           

下面是運作結果 :

最近越來越浮躁了，要時刻檢討自己，隻要能夠為了當時純粹的夢想和感動堅持努力下去，不管其它人怎麼樣，我也要保持自己的本色走下去。