自定义View示例-03 圆形头像

自定义View 简单实践-03 圆形头像

1.成品展示

image.png

呃，这头像有点大，不过，就这个意思了。。。。。。

2.思路分析

这里分两步走，第一，先取出Bitmap图片。第二，将领导Bitmap图片裁切出圆形来。第三，完工。

3.具体实现

3.1 取出Bitmap图片，绘制在固定大小矩形内

工具方法

getAvatar(Resources res,int width)
    public static Bitmap getAvatar(Resources res,int width){
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(res, R.drawable.avatar,options);
        options.inJustDecodeBounds = false;
        options.inDensity = options.outWidth;
        options.inTargetDensity = width;
        return BitmapFactory.decodeResource(res,R.drawable.avatar,options);
    }

设置 图片宽度WIDTH，和图片左上角PADDING

 private static final float WIDTH = DpToPxUtil.dp2px(200);
 private static final float PADDING = DpToPxUtil.dp2px(50);

//获取图片Bitmap
Bitmap bitmap = CMBitMapUtils.getAvatar(getResources(),(int) WIDTH);
 //在onDraw()方法中，绘制bitmap图片
canvas.drawBitmap(bitmap, PADDING, PADDING, paint);

3.1 需要用到Xfermode，将我们的bitmap取出圆形

关于Xfermode（自定义View paint 详解-1中 1.3有介绍）

创建Xfermode
Xfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);

image.png

裁剪

int saved = canvas.saveLayer(savedArea, paint);
canvas.drawOval(PADDING + EDGE_WIDTH, PADDING + EDGE_WIDTH, PADDING + WIDTH - EDGE_WIDTH, PADDING + WIDTH - EDGE_WIDTH, paint);
            paint.setXfermode(xfermode);
            canvas.drawBitmap(bitmap, PADDING, PADDING, paint);
            paint.setXfermode(null);
            canvas.restoreToCount(saved);

这里的savedArea 为固定大小的矩形

    savedArea.set(PADDING, PADDING, PADDING + WIDTH, PADDING + WIDTH);

这里需要注意的是，使用到了Xfermode，这里需要注意离屏缓冲。

成品

image.png

成品这里添加了一个黑边，这是在绘制圆形头像之前绘制了一个比圆形头像大一点的黑色圆形。

Demo：CMViewDemo Github地址