我們可以看到很多app都采用了圓形頭像，那么怎么繪制圓形頭像才是性能最好莱衩？代碼復(fù)用性最強爵嗅？也最方便呢？本博主做了一些探究笨蚁。為了更全面解析睹晒，沒做得很漂亮，可是這樣更助于你理解括细。本博主不喜歡華而不實的東西伪很。

文章結(jié)構(gòu)：1.利用shape來制作圓形頭像（一種死方案，要求是美工愿意配合你） 2.結(jié)合一個會導(dǎo)致oom的實現(xiàn)圓形頭像方案進(jìn)行性能分析 3.最優(yōu)的圓形頭像方案

先給效果圖大家看看奋单，上面的是用shape實現(xiàn)锉试，下面的是用剛剛所說的最優(yōu)方案實現(xiàn)

這里寫圖片描述

一、利用shape來制作圓形頭像（要求是美工愿意配合你）

為什么要求美工配合你呢览濒？呆盖？因為這個方案是在ImageView直接調(diào)用資源文件的，也就是直接用了ImageView的LayoutParams的match_parent模式贷笛。不能按照那個圓的大小來適配应又。

給出代碼講解：drawable文件的shape標(biāo)簽

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!-- Corner的屬性是設(shè)置圓角的半徑的-->

    <solid android:color="#FFFFFF" />
    <stroke
        android:width="2dp"
        android:color="#777777"></stroke>
    <size
        android:width="120dp"
        android:height="120dp" />
</shape>

在xml文件中的調(diào)用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.demo.fuzhucheng.someShapesImageview.ImageViewActivity">
<!--第一種方案 -->
    <ImageView
        android:id="@+id/shapecircle"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@drawable/activity_circle_circleimageview"
        android:src="@drawable/activity_imageview_photo" />

    <!--最優(yōu)方案，也就是本文的第三種方案 -->
<com.demo.fuzhucheng.someShapesImageview.CircleImageview
        android:id="@+id/mycircle"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:background="@color/white"
        android:src="@drawable/timg"
        app:backgroundHeadColor="@color/yellow"
        app:circleBorderHeadWidth="5dp"
        app:ringHeadColor="@color/colorAccent" />
</LinearLayout>

二乏苦、對一種容易導(dǎo)致OOM的方案進(jìn)行分析：

給出代碼分析：下面這個是別人的代碼株扛，由于點評就不給鏈接的。

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;

        //重新定義的一個畫布汇荐，這一步很關(guān)鍵
        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));
        //一定要用之前的畫布洞就，不然會出現(xiàn)邊角是黑色
        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設(shè)置的imageview的畫布就是占據(jù)了一個矩形我們需要重新定義一個畫布掀淘，而怎么重新定義畫布呢旬蟋，就是重寫onDraw然后在他繼承父類方法屬性前重新定義畫布，也就是在super方法前面啦８锫Α咖为！可是秕狰，這個方法涉及到渲染多層，很容易o(hù)om躁染。

2.首先我們要知道畫布是怎樣一個原理鸣哀，是基于渲染層的（其實是一個bitmap層存給畫布canvas），而這里就先重定義畫布一層來作為覆蓋掉原來的canvas一層吞彤，然后再new了一個canvas進(jìn)而在里面畫一個圓來限定圓形頭像來覆蓋掉剛剛新建的下面一層canvas我衬。然后利用在super前新建的畫布來drawBitmap來畫圖，進(jìn)而顯示出一個圓形頭像（同樣經(jīng)過裁剪）饰恕。所以這個涉及渲染多層的方案不可取挠羔，而且這段代碼設(shè)計太過于混亂。

三埋嵌、最優(yōu)的圓形頭像方案

在這里說明一下整體的思路：1.還是繼承ImageView破加，覆寫ImageView，在得到圖片后進(jìn)行處理雹嗦，沒設(shè)置圖片的時候不處理范舀。 2.使用BitmapShader畫圓形的，只要把bitmap傳進(jìn)去了罪，然后把Matrix也傳進(jìn)去作為圖片縮放的工具（同樣是大圖片經(jīng)過裁剪的方案锭环，無法避免），然后就是set給畫筆

下面給出方案的詳解泊藕，結(jié)合代碼有詳細(xì)解釋

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;          //圖片變換處理器-用來縮放圖片以適應(yīng)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);//將獲取的屬性轉(zhuǎn)化為我們最先設(shè)好的屬性
        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);                     //設(shè)置圓邊界寬度
        //附加效果設(shè)置陰影
        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() {
        //將圖片轉(zhuǎn)換成Bitmap
        Drawable drawable = getDrawable();
        BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
        Bitmap bitmap = bitmapDrawable.getBitmap();
        //將bitmap放進(jìn)圖像著色器玫锋，后面兩個模式是x，y軸的縮放模式讼呢，CLAMP表示拉伸
        mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        //初始化圖片與view之間伸縮比例撩鹿，因為比例一般非整數(shù)，所以用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;
        /**注意這里吧寺，我使用的是圖片最長的（就是寬度）來伸縮窜管，那么用這個的話，
         * 我們就會發(fā)現(xiàn)稚机，較短的那邊（就是高度）在經(jīng)過Matrix的拉伸后會發(fā)現(xiàn)失真幕帆，強行地被拉長，
         * 一赖条、因為圖片為了適應(yīng)最長的那邊可以完全在view上展示失乾，把長的給壓縮了常熙，而短的比長的那邊短，所以要強行拉伸碱茁，那么就會導(dǎo)致短的這邊被拉伸時候失真
         *二裸卫、因為圖像的變換是針對每一個像素點的，所以有些變換可能發(fā)生像素點的丟失纽竣，
         * 這里需要使用Paint.setAnitiAlias(boolean)設(shè)置來消除鋸齒墓贿，這樣圖片變換后的效果會好很多。
        
         */

        //計算縮放比例蜓氨，view的大小和圖片的大小比例
        scale = mWidth * 1.0f / bitmapSize;
        //利用這個圖像變換處理器聋袋，設(shè)置伸縮比例，長寬以相同比例伸縮
        mMatrix.setScale(scale, scale);
        //給那個圖像著色器設(shè)置變換矩陣穴吹，繪制時就根據(jù)view的size幽勒，設(shè)置圖片的size
        //使圖片的較小的一邊縮放到view的大小一致，這樣就可以避免圖片過小導(dǎo)致CLAMP拉伸模式或過大導(dǎo)致顯示不全
        mBitmapShader.setLocalMatrix(mMatrix);
        //為畫筆套上一個Shader的筆套
        mPaintCircle.setShader(mBitmapShader);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * 在這里設(shè)置高度寬度港令，以設(shè)置的較小值為準(zhǔn)啥容，防止不成圓
         */
        mWidth = getWidth();
        mHeight = getHeight();
        int mCircleSize = Math.min(mHeight, mWidth);
        //圓的半徑短的二分之一作為半徑
        mRadius = mCircleSize / 2 - mCircleBorderWidth;
    }

    /**
     * 我們可以知道，如果我們直接用imageview然后引用shape弄成圓形的話缠借，意味著我們在這個imageview的邏輯只能寫在fragment等等里面了干毅，而很難去進(jìn)行邏輯的分層.。而且Ｆ梅怠硝逢！只能用矢量圖并且美工要配合你
     * 因此我們重寫imageview就是為了更好地封裝好點擊imageview的邏輯
     * 一、因為我們在xml設(shè)置的imageview的畫布就是占據(jù)了一個矩形我們需要重新定義一個畫布
     * 而怎么重新定義畫布呢绅喉，就是重寫onDraw然后在他繼承父類方法屬性前重新定義畫布渠鸽，也就是在super方法前面啦！柴罐！可是徽缚，這個方法涉及到渲染多層，很容易o(hù)om
     * 二革屠、然而我們將用另一種方法凿试，使用BitmapShader畫圓形的，只要把bitmap傳進(jìn)去似芝，然后把Matrix也傳進(jìn)去作為圖片縮放的工具
     */

    /*
       * Canvas理解成系統(tǒng)提供給我們的一塊內(nèi)存區(qū)域(但實際上它只是一套畫圖的API那婉，真正的內(nèi)存是下面的Bitmap)，
        *而且它還提供了一整套對這個內(nèi)存區(qū)域進(jìn)行操作的方法党瓮，所有的這些操作都是畫圖API详炬。
        *也就是說在這種方式下我們已經(jīng)能一筆一劃或者使用Graphic來畫我們所需要的東西了，要畫什么要顯示什么都由我們自己控制寞奸。
     */
    @Override
    protected void onDraw(Canvas canvas) {
        //這里注釋掉onDraw是為了不繪制原來的畫布,如果使用的話就意味著又是渲染一層呛谜，就會像第二個方案那樣容易OOM
        //        super.onDraw(canvas);
        if (getDrawable() != null) {
            setBitmapShader();
            canvas.drawRect(0, 0, mWidth, mHeight, mPaintBackgroud);//直接構(gòu)造在跳，畫背景的，為什么畫背景隐岛？因為畫布是方的猫妙，市面上所有圓形頭像都是沒有直接處理邊角的，而是用Framelayout來進(jìn)去覆蓋聚凹，所以這里定義個背景色告訴大家吐咳，當(dāng)然也封裝好給大家使用
            canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mPaintCircle);
            //畫邊框
            canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius + mCircleBorderWidth / 2, mPaintBorder);
        } else {
        //如果在xml中這個繼承ImageView的類沒有被set圖片就用默認(rèn)的ImageView方案咯
            super.onDraw(canvas);
        }

    }
}

還有在自定義屬性的代碼，因為本博文不只是解析嘛元践，順便封裝給大家使用韭脊。可以看到有三個屬性单旁，邊框?qū)挾然Ω幔尘邦伾约皥A環(huán)顏色

    <declare-styleable name="CircleHead">
        <attr name="circleBorderHeadWidth" format="dimension" />
        <attr name="ringHeadColor" format="color" />
        <attr name="backgroundHeadColor" format="color" />
    </declare-styleable>

至于調(diào)用的方式就在第一種方案中已經(jīng)給出就不重復(fù)貼代碼了。

另外大家有沒有留意到我寫的那兩個方案以及別人的方案（本文第二個方案）都是有邊角沒處理的象浑？因為畫布是方的蔫饰，市面上所有圓形頭像都是沒有直接處理邊角的，而是用Framelayout來進(jìn)去覆蓋愉豺，所以這里定義個背景色告訴大家篓吁，當(dāng)然也封裝好給大家使用。福利好吧蚪拦？

好了杖剪，自定義view之圓形頭像的各類方案已經(jīng)解說完畢。歡迎在下面指出錯誤驰贷，共同學(xué)習(xí)盛嘿！

轉(zhuǎn)載請注明：【JackFrost的博客】

更多精彩的內(nèi)容，可以訪問JackFrost的博客

本博主最近會一直更新各類自定義view的方案括袒，歡迎關(guān)注次兆。