使用 Picasso 来实现圆形头像

阅读 1443
收藏 96
2016-11-20
原文链接:blog.csdn.net

先看一下未处理的矩形头像,显得有些许生硬和不协调,再看看圆形的头像,是不是感觉美感倍增啊。
这里写图片描述

这里写图片描述

那么 怎样 才能实现各种各样的图片样式呢?对于此问题,我们的贴心小棉袄Picasso 为我们供了Transformation这个非常好用的接口。既然如此,我们想实现圆形头像就显得很容易了。

实现步骤:
1.自定义一个圆形头像类继承与Transformation 接口

//    自定义一个圆形头像类继承与Transformation 接口
    class CircleTransform implements Transformation{
        /**
         * @param source :还未处理的矩形的Bitmap对象
         * @return :返回的是处理后的圆形Bitmap对象
         */
        @Override
        public Bitmap transform(Bitmap source) {

            return null;
        }

        /**
         * 该方法没有什么实际意义,但是要保证其返回的值不能为null!
         * @return
         */
        @Override
        public String key() {
            return "";
        }
    }

2.写一个BitmapUtils工具类,让其实现两个方法:
①对bitmap进行压缩处理的方法
②将矩形的Bitmap对象转换为圆形的Bitmap的方法
原理图:
这里写图片描述

代码如下(功能性代码略微了解即可):

public class BitmapUtils {
    /**将矩形的Bitmap对象转换为圆形的Bitmap
     * @param source:待处理的 矩形的Bitmap
     * @return  :需返回的圆形的Bitmap
     */
    public static Bitmap circleBitmap(Bitmap source){
        //获取Bitmap的宽度
        int width = source.getWidth();
        //返回一个正方形的Bitmap对象
        Bitmap bitmap = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888);
        //提供指定宽高的canvas
        Canvas canvas = new Canvas(bitmap);
        //提供画笔
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        //背景:在画布上绘制一个圆
        canvas.drawCircle(width / 2, width / 2, width / 2, paint);

        //设置图片相交情况下的处理方式
        //setXfermode:设置当绘制的图像出现相交情况时候的处理方式的,它包含的常用模式有哪几种
        //PorterDuff.Mode.SRC_IN 取两层图像交集部门,只显示上层图像,注意这里是指取相交叉的部分,然后显示上层图像
        //PorterDuff.Mode.DST_IN 取两层图像交集部门,只显示下层图像
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        //前景:在画布上绘制一个bitmap
        canvas.drawBitmap(source, 0, 0, paint);

        return bitmap;

    }

    /**对bitmap进行压缩处理
     * @param source  :需要被处理的Bitmap
     * @param width  需要压缩成的宽度 必须为浮点型
     * @param height  需要压缩成的高度 必须为浮点型
     * @return  返回压缩后的Bitmap
     * 注意!必须提供参数2,3为浮点型。
     */
    public static Bitmap zoom(Bitmap source,float width,float height){
        Matrix matrix = new Matrix();
        float scaleX = width / source.getWidth();
        float scaleY = height / source.getHeight();
        matrix.postScale(scaleX, scaleY);

        Bitmap bitmap = Bitmap.createBitmap(source,0,0,source.getWidth(),source.getHeight(),matrix,true);
        return bitmap;
    }

}

3.调用工具类中的方法:
完善自定义的CircleTransform类

class CircleTransform implements Transformation{
        /**
         * @param source :还未处理的矩形的Bitmap对象
         * @return :返回的是处理后的圆形Bitmap对象
         */
        @Override
        public Bitmap transform(Bitmap source) {
            //1.压缩处理
            Bitmap zoomBitmp = BitmapUtils.zoom(source, JMUiUtils.dp2px(62), JMUiUtils.dp2px(62));
            //2.圆形处理
            Bitmap bitmap = BitmapUtils.circleBitmap(zoomBitmp);
            //必须要回收source,否则会报错
            source.recycle();
            return bitmap;//返回圆形的Bitmap对象
        }

        /**
         * 该方法没有什么实际意义,但是要保证其返回的值不能为null!
         * @return
         */
        @Override
        public String key() {
            return "";
        }
    }

4.调用transform方法,并把CircleTransform的对象传进去

Picasso.with(getActivity()).load(user.UF_AVATAR_URL).transform(new CircleTransform()).into(imageView1);

最终效果:
这里写图片描述

评论