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,0);
    }

    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(0, 0, r, r); //设置宽高相等，（正方形)
        //通过制定的rect画一个圆角矩形，当圆角X轴方向的半径等于Y轴方向的半径时，
        //且都等于r/2时，画出来的圆角矩形就是圆形
        canvas.drawRoundRect(rect, r >> 1, r >> 1, 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，与创建的位图通过画笔的

paint.setXfermode(newPorterDuffXfermode(PorterDuff.Mode.SRC_IN));  //设置当两个图形相交时的模式，SRC_IN为取SRC图形相交的部分，多余的将被去掉

来讲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(0, 0, b.getWidth(), b.getHeight());
            final Rect rectDest = new Rect(0,0,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" />

下面是运行结果 :

最近越来越浮躁了，要时刻反省自己，只要能够为了当时纯粹的梦想和感动坚持努力下去，不管其它人怎么样，我也要保持自己的本色走下去。