自定义View：自定义CircleImageView实现及图形渲染

在很多应用中头像是以圆形图片展示的，默认图片的话可以让UI切一套圆形的，但是用户设置头像的话不可能也让UI切。其实已经有很多前辈牛人已经写了成熟完善的工具类供程序猿使用。当然实现方式也多种多样。这里道长使用图形渲染实现CircleImageView，然后说一下图形渲染的一些知识。

一、CircleImageView实现

• 构造方法初始化变量

    public CircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mMatrix = new Matrix();
        mBitmapPaint = new Paint();
        mBitmapPaint.setAntiAlias(true);

    }

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

• 测量并设置控件宽高

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
        mRadius = mWidth / 2;
        setMeasuredDimension(mWidth, mWidth);

    }

• 给Paint设置渲染规则

    private void setPaintShader() {
        Drawable drawable = getDrawable();
        if (drawable == null) {
            return;
        }

        Bitmap bitmap = drawable2Bitmap(drawable);
        // 创建Bitmap渲染对象
        mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        float scale = 1.0f;
        // 比较bitmap宽和高，获得较小值
        int bSize = Math.min(bitmap.getWidth(), bitmap.getHeight());
        scale = mWidth * 1.0f / bSize;

        // shader的变换矩阵，用于放大或者缩小
        mMatrix.setScale(scale, scale);
        // 设置变换矩阵
        mBitmapShader.setLocalMatrix(mMatrix);
        // 设置shader
        mBitmapPaint.setShader(mBitmapShader);
    }

    /**
     * drawable转bitmap
     *
     * @param drawable
     * @return
     */
    private Bitmap drawable2Bitmap(Drawable drawable) {

        if (drawable instanceof BitmapDrawable) {
            BitmapDrawable bd = (BitmapDrawable) drawable;
            return bd.getBitmap();
        }

        int w = drawable.getIntrinsicWidth();
        int h = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, w, h);
        drawable.draw(canvas);
        return bitmap;
    }

• 在画布上绘制图片

    @Override
    protected void onDraw(Canvas canvas) {

        if (getDrawable() == null) {
            return;
        }

        try {
            setPaintShader();
            canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

• 在布局中添加如下代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">


    <ImageView
        android:id="@+id/iv_default"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:src="@drawable/head" />

    <com.yushan.picturerenderdemo.CircleImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_below="@id/iv_default"
        android:layout_margin="5dp"
        android:src="@drawable/head" />

</RelativeLayout>

• 上面的为原图，下面的为CircleImageView，效果图如下

就这么简单，是不是so easy~当然这个代码中有一个弊端道长没有处理，就是在测量设置控件宽高时道长只是简单的取了一个宽高最小值，然后除以2就设置了。这就导致了CircleImageView最大只能展示原图大小。这个大家可以自行处理。然后我们说一下图形渲染……

二、图形渲染

在实现自定义CircleImageView中道长使用了图形渲染中的图像渲染，而前面道长说过的画布实现自定义View(折线图实现)，在绘制限制区域时道长使用的就是图形渲染中的线性渲染。这里道长就不贴代码了，前面有链接童鞋们可以去看一下。图形渲染大概分为五种：

• BitmapShader（图像渲染）

    /**
     * @param bitmap 用来作为纹理填充的位图
     * @param tileX 在位图X方向上位图衔接形式
     * @param tileY 在位图Y方向上位图衔接形式
     */
    public BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY);

　　Shader.TileMode有3种参数可供选择，分别为CLAMP、REPEAT和MIRROR。

　　CLAMP - 如果渲染器超出原始边界范围，则会复制边缘颜色对超出范围的区域进行着色。
　　REPEAT - 在横向和纵向上以平铺的形式重复渲染位图。
　　MIRROR - 在横向和纵向上以镜像的方式重复渲染位图。

简单使用：

    /**
     * 图像渲染
     *
     * @param canvas
     * @param paint
     */
    private void drawBitmapShader(Canvas canvas, Paint paint) {

        // 加载图像资源
        Bitmap mBitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.head)).getBitmap();

        // 创建Bitmap渲染对象
        Shader mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        // 绘制Bitmap渲染的圆
        paint.setShader(mBitmapShader);
        canvas.drawCircle(100, 100, 100, paint);
    }

• LinearGradient（线性渲染）

    /**
     * @param x0 渐变的起始点x坐标
     * @param y0 渐变的起始点y坐标
     * @param x1 渐变的终点x坐标
     * @param y1 渐变的终点y坐标
     * @param colors 渐变的颜色数组
     * @param positions 指定颜色数组的相对位置
     * @param tile 平铺方式
     */
    public LinearGradient (float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile);

注意：参数positions设为null，表示颜色数组以斜坡线的形式均匀分布。

简单使用：

    /**
     * 线性渲染
     *
     * @param canvas
     * @param paint
     */
    private void drawLinearGradient(Canvas canvas, Paint paint) {

        // 创建线性渲染对象
        int mColorLinear[] = {Color.WHITE, Color.YELLOW, Color.GREEN, Color.BLUE};
        Shader mLinearGradient = new LinearGradient(150, 150, 100, 100, mColorLinear, null, Shader.TileMode.REPEAT);

        // 绘制线性渐变的矩形
        paint.setShader(mLinearGradient);
        canvas.drawRect(100, 300, 400, 500, paint);
    }

• ComposeShader（混合渲染）

    /**
     * @param shaderA 一种渲染效果
     * @param shaderB 一种渲染效果
     * @param mode 两种渲染效果的叠加模式
     */
    public ComposeShader (Shader shaderA, Shader shaderB, PorterDuff.Mode mode);

　　PorterDuff.Mode有16种参数可供选择，分别为：CLEAR、SRC、DST、SRC_OVER、DST_OVER、SRC_IN、DST_IN、SRC_OUT、DST_OUT、SRC_ATOP、DST_ATOP、XOR、DARKEN、LIGHTEN、MULTIPLY、SCREEN。

　　叠加模式的具体叠加效果如下图所示：

简单使用：

   /**
     * 混合渲染
     *
     * @param canvas
     * @param paint
     */
    private void drawComposeShader(Canvas canvas, Paint paint) {
        // 创建线性渲染对象
        int mColorLinear[] = {Color.WHITE, Color.YELLOW, Color.GREEN, Color.BLUE};
        Shader mLinearGradient = new LinearGradient(150, 150, 100, 100, mColorLinear, null, Shader.TileMode.REPEAT);

        // 创建环形渲染对象
        int mColorRadial[] = {Color.GREEN, Color.RED, Color.BLUE, Color.WHITE};
        Shader mRadialGradient = new RadialGradient(300, 300, 75, mColorRadial, null, Shader.TileMode.REPEAT);

        //创建混合渲染对象
        Shader mComposeShader = new ComposeShader(mLinearGradient, mRadialGradient, PorterDuff.Mode.DARKEN);
        //绘制混合渐变(线性与环形混合)的矩形
        paint.setShader(mComposeShader);
        canvas.drawRect(10, 420, 250, 570, paint);
    }

• RadialGradient（环形渲染）

    /**
     * @param x 圆心x坐标
     * @param y 圆心y坐标
     * @param radius 半径
     * @param colors 渐变的颜色数组
     * @param positions 颜色数组的相对位置
     * @param tile 平铺的方式
     */
    public RadialGradient (float x, float y, float radius, int[] colors, float[] positions, Shader.TileMode tile);

简单使用：

    /**
     * 环形渲染
     *
     * @param canvas
     * @param paint
     */
    private void drawRadialGradient(Canvas canvas, Paint paint) {
        // 创建环形渲染对象
        int mColorRadial[] = {Color.WHITE, Color.YELLOW, Color.GREEN, Color.BLUE};
        Shader mRadialGradient = new RadialGradient(500, 500, 100, mColorRadial, null, Shader.TileMode.REPEAT);
        // 绘制环形渐变的圆
        paint.setShader(mRadialGradient);
        canvas.drawCircle(500, 500, 100, paint);
    }

• SweepGradient（梯度渲染）

    /**
     * @param cx 扫描的中心x坐标
     * @param cy 扫描的中心y坐标
     * @param colors 渐变的颜色数组
     * @param positions 颜色数组的相对位置
     */
    public SweepGradient (float cx, float cy, int[] colors, float[] positions);

简单使用：

    /**
     * 梯度渲染
     *
     * @param canvas
     * @param paint
     */
    private void drawSweepGradient(Canvas canvas, Paint paint) {
        // 创建梯形渲染对象
        int mColorSweep[] = {Color.GREEN, Color.RED, Color.BLUE, Color.YELLOW, Color.GREEN};
        Shader mSweepGradient = new SweepGradient(650, 700, mColorSweep, null);
        // 绘制梯形渐变的矩形
        paint.setShader(mSweepGradient);
        canvas.drawRect(600, 600, 700, 800, paint);
    }

到了这里关于自定义CircleImageView的实现以及图形渲染已经说完了，其实道长说自定义CircleImageView是一个引子，重点是说一下图形渲染，这个图形渲染在自定义View中还是比较常用的。好了，希望这篇博客能够为你提供一些帮助。

---