Android-解析自定义view之圆形头像的各类方案

我们可以看到很多app都采用了圆形头像,那么怎么绘制圆形头像才是性能最好?代码复用性最强?也最方便呢?本博主做了一些探究。为了更全面解析,没做得很漂亮,可是这样更助于你理解。本博主不喜欢华而不实的东西。


文章结构:1.利用shape来制作圆形头像(一种死方案,要求是美工愿意配合你) 2.结合一个会导致oom的实现圆形头像方案进行性能分析 3.最优的圆形头像方案


先给效果图大家看看,上面的是用shape实现,下面的是用刚刚所说的最优方案实现
Android-解析自定义view之圆形头像的各类方案_第1张图片
这里写图片描述


一、利用shape来制作圆形头像(要求是美工愿意配合你)

为什么要求美工配合你呢??因为这个方案是在ImageView直接调用资源文件的,也就是直接用了ImageView的LayoutParams的match_parent模式。不能按照那个圆的大小来适配。

给出代码讲解:drawable文件的shape标签



    

    
    
    

在xml文件中的调用:




    

    



二、对一种容易导致OOM的方案进行分析:

给出代码分析:下面这个是别人的代码,由于点评就不给链接的。

public class CircleImageView extends ImageView{
    public CircleImageView(Context context, AttributeSet    attrs) {
        super(context, attrs);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        //获得图片的宽度
        int width=getWidth();
        //获得图片的高度
        int height=getHeight();
        //短的二分之一作为半径
        int radius=height>width?width/2:height/2;

        //重新定义的一个画布,这一步很关键
        Paint mPaint = new Paint();
        //抗锯齿
        mPaint.setAntiAlias(true);
        Bitmap bitmap = Bitmap.createBitmap(width,height,
                Bitmap.Config.ARGB_8888);
        Canvas bitmapCanvas = new Canvas(bitmap);
        super.onDraw(bitmapCanvas);

        //圆形的框
        Bitmap cB = Bitmap.createBitmap(width, height,
                Bitmap.Config.ARGB_8888);
        Canvas cCanv = new Canvas(cB);
        //在控件中间画一个
        cCanv.drawCircle(width/ 2, height/ 2, radius,
                mPaint);

        canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
        //dst是后画的图形
        mPaint.setXfermode(new PorterDuffXfermode(
                PorterDuff.Mode.DST_IN));
        //一定要用之前的画布,不然会出现边角是黑色
        bitmapCanvas.drawBitmap(cB, 0.0f, 0.0f, mPaint);

        //给图形加边框
        Paint paint =new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        paint.setColor(Color.BLACK);
        canvas.drawCircle(width/ 2, height/ 2, radius,
                paint);

    }
}

分析:在这个方案中,1.因为我们在xml设置的imageview的画布就是占据了一个矩形我们需要重新定义一个画布,而怎么重新定义画布呢,就是重写onDraw然后在他继承父类方法属性前重新定义画布,也就是在super方法前面啦!!可是,这个方法涉及到渲染多层,很容易oom。

2.首先我们要知道画布是怎样一个原理,是基于渲染层的(其实是一个bitmap层存给画布canvas),而这里就先重定义画布一层来作为覆盖掉原来的canvas一层,然后再new了一个canvas进而在里面画一个圆来限定圆形头像来覆盖掉刚刚新建的下面一层canvas。然后利用在super前新建的画布来drawBitmap来画图,进而显示出一个圆形头像(同样经过裁剪)。所以这个涉及渲染多层的方案不可取,而且这段代码设计太过于混乱。


三、最优的圆形头像方案

在这里说明一下整体的思路:1.还是继承ImageView,覆写ImageView,在得到图片后进行处理,没设置图片的时候不处理。 2.使用BitmapShader画圆形的,只要把bitmap传进去,然后把Matrix也传进去作为图片缩放的工具(同样是大图片经过裁剪的方案,无法避免),然后就是set给画笔


下面给出方案的详解,结合代码有详细解释

package com.demo.fuzhucheng.someShapesImageview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

import com.demo.fuzhucheng.R;

/**
 * Created by ${符柱成} on 2016/8/21.
 */
public class CircleImageview extends ImageView {
    private Paint mPaintCircle;      //画圆形图像的笔
    private Paint mPaintBorder;          //画圆形边界的笔
    private Paint mPaintBackgroud;      //画背景颜色的笔
    private BitmapShader mBitmapShader;      //图像着色器,可以用来画圆
    private Matrix mMatrix;          //图片变换处理器-用来缩放图片以适应view控件的大小
    private int mWidth;        //获得控件宽度
    private int mHeight;             //获得控件高度
    private int mRadius;             //中心园的半径
    private int mCircleBorderWidth;        //边界宽度
    private int mCirlcleBorderColor;             //边界边框颜色
    private int mCircleBackgroudColor;      //圆形头像背景色

    public CircleImageview(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleHead);//将获取的属性转化为我们最先设好的属性
        int n = typedArray.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.CircleHead_circleBorderHeadWidth:
                    mCircleBorderWidth = (int) typedArray.getDimension(attr, 0);
                    break;
                case R.styleable.CircleHead_ringHeadColor:
                    mCirlcleBorderColor = typedArray.getColor(attr, Color.GREEN);
                    break;
                case R.styleable.CircleHead_backgroundHeadColor:
                    mCircleBackgroudColor = typedArray.getColor(attr, Color.YELLOW);
                    break;
            }
        }
        init();
    }

    private void init() {
        //初始化图片变换处理器
        mMatrix = new Matrix();

        mPaintCircle = new Paint();
        mPaintCircle.setAntiAlias(true);//抗锯齿,没有消除锯齿的话,图片变换会很难看的,因为有些像素点会失真
        mPaintCircle.setStrokeWidth(12);                     //设置圆边界宽度
        //附加效果设置阴影
        this.setLayerType(LAYER_TYPE_SOFTWARE, mPaintCircle);
        mPaintCircle.setShadowLayer(13.0f, 5.0f, 5.0f, Color.GRAY);


        //给图形加边框
        mPaintBorder = new Paint();
        mPaintBorder.setAntiAlias(true);
        mPaintBorder.setStyle(Paint.Style.STROKE);
        mPaintBorder.setStrokeWidth(mCircleBorderWidth);
        mPaintBorder.setColor(mCirlcleBorderColor);

        //画背景颜色的笔
        mPaintBackgroud = new Paint();
        mPaintBackgroud.setColor(mCircleBackgroudColor);
        mPaintBackgroud.setAntiAlias(true);
        mPaintBackgroud.setStyle(Paint.Style.FILL);
    }

    //使用BitmapShader画圆图形
    private void setBitmapShader() {
        //将图片转换成Bitmap
        Drawable drawable = getDrawable();
        BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
        Bitmap bitmap = bitmapDrawable.getBitmap();
        //将bitmap放进图像着色器,后面两个模式是x,y轴的缩放模式,CLAMP表示拉伸
        mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        //初始化图片与view之间伸缩比例,因为比例一般非整数,所以用float,免得精度丢失
        float scale = 1.0f;
//        float scaleX = 1.0f;
        //将图片的宽度高度的最小者作为图片的边长,用来和view来计算伸缩比例
//        int bitmapSize = Math.min(bitmap.getWidth(), bitmap.getHeight());
        int bitmapSize = Math.min(bitmap.getHeight(), bitmap.getWidth());


        //        int bitmapSizeX = bitmap.getWidth();
        //      scaleX = mWidth * 1.0f / bitmapSizeX;
        /**注意这里,我使用的是图片最长的(就是宽度)来伸缩,那么用这个的话,
         * 我们就会发现,较短的那边(就是高度)在经过Matrix的拉伸后会发现失真,强行地被拉长,
         * 一、因为图片为了适应最长的那边可以完全在view上展示,把长的给压缩了,而短的比长的那边短,所以要强行拉伸,那么就会导致短的这边被拉伸时候失真
         *二、因为图像的变换是针对每一个像素点的,所以有些变换可能发生像素点的丢失,
         * 这里需要使用Paint.setAnitiAlias(boolean)设置来消除锯齿,这样图片变换后的效果会好很多。
        
         */

        //计算缩放比例,view的大小和图片的大小比例
        scale = mWidth * 1.0f / bitmapSize;
        //利用这个图像变换处理器,设置伸缩比例,长宽以相同比例伸缩
        mMatrix.setScale(scale, scale);
        //给那个图像着色器设置变换矩阵,绘制时就根据view的size,设置图片的size
        //使图片的较小的一边缩放到view的大小一致,这样就可以避免图片过小导致CLAMP拉伸模式或过大导致显示不全
        mBitmapShader.setLocalMatrix(mMatrix);
        //为画笔套上一个Shader的笔套
        mPaintCircle.setShader(mBitmapShader);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * 在这里设置高度宽度,以设置的较小值为准,防止不成圆
         */
        mWidth = getWidth();
        mHeight = getHeight();
        int mCircleSize = Math.min(mHeight, mWidth);
        //圆的半径短的二分之一作为半径
        mRadius = mCircleSize / 2 - mCircleBorderWidth;
    }

    /**
     * 我们可以知道,如果我们直接用imageview然后引用shape弄成圆形的话,意味着我们在这个imageview的逻辑只能写在fragment等等里面了,而很难去进行逻辑的分层.。而且!!只能用矢量图并且美工要配合你
     * 因此我们重写imageview就是为了更好地封装好点击imageview的逻辑
     * 一、因为我们在xml设置的imageview的画布就是占据了一个矩形我们需要重新定义一个画布
     * 而怎么重新定义画布呢,就是重写onDraw然后在他继承父类方法属性前重新定义画布,也就是在super方法前面啦!!可是,这个方法涉及到渲染多层,很容易oom
     * 二、然而我们将用另一种方法,使用BitmapShader画圆形的,只要把bitmap传进去,然后把Matrix也传进去作为图片缩放的工具
     */

    /*
       * Canvas理解成系统提供给我们的一块内存区域(但实际上它只是一套画图的API,真正的内存是下面的Bitmap),
        *而且它还提供了一整套对这个内存区域进行操作的方法,所有的这些操作都是画图API。
        *也就是说在这种方式下我们已经能一笔一划或者使用Graphic来画我们所需要的东西了,要画什么要显示什么都由我们自己控制。
     */
    @Override
    protected void onDraw(Canvas canvas) {
        //这里注释掉onDraw是为了不绘制原来的画布,如果使用的话就意味着又是渲染一层,就会像第二个方案那样容易OOM
        //        super.onDraw(canvas);
        if (getDrawable() != null) {
            setBitmapShader();
            canvas.drawRect(0, 0, mWidth, mHeight, mPaintBackgroud);//直接构造,画背景的,为什么画背景?因为画布是方的,市面上所有圆形头像都是没有直接处理边角的,而是用Framelayout来进去覆盖,所以这里定义个背景色告诉大家,当然也封装好给大家使用
            canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mPaintCircle);
            //画边框
            canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius + mCircleBorderWidth / 2, mPaintBorder);
        } else {
        //如果在xml中这个继承ImageView的类没有被set图片就用默认的ImageView方案咯
            super.onDraw(canvas);
        }

    }
}

还有在自定义属性的代码,因为本博文不只是解析嘛,顺便封装给大家使用。可以看到有三个属性,边框宽度,背景颜色以及圆环颜色

    
        
        
        
    

至于调用的方式就在第一种方案中已经给出就不重复贴代码了。


另外大家有没有留意到我写的那两个方案以及别人的方案(本文第二个方案)都是有边角没处理的?因为画布是方的,市面上所有圆形头像都是没有直接处理边角的,而是用Framelayout来进去覆盖,所以这里定义个背景色告诉大家,当然也封装好给大家使用。福利好吧?


好了,自定义view之圆形头像的各类方案已经解说完毕。欢迎在下面指出错误,共同学习!

转载请注明:【JackFrost的博客】

更多精彩的内容,可以访问JackFrost的博客

本博主最近会一直更新各类自定义view的方案,欢迎关注。

你可能感兴趣的:(Android-解析自定义view之圆形头像的各类方案)