在很多應用中頭像是以圓形圖片展示的，預設圖片的話可以讓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中還是比較常用的。好了，希望這篇部落格能夠為你提供一些幫助。