我們可以看到很多app都采用了圓形頭像，那么怎么繪制圓形頭像才是性能最好？代碼復用性最強？也最方便呢？本博主做了一些探究。為了更全面解析，沒做得很漂亮，可是這樣更助于你理解。本博主不喜歡華而不實的東西。
文章結構：1.利用shape來制作圓形頭像（一種死方案，要求是美工愿意配合你） 2.結合一個會導致oom的實現圓形頭像方案進行性能分析 3.最優的圓形頭像方案
先給效果圖大家看看，上面的是用shape實現，下面的是用剛剛所說的最優方案實現
![]()
這里寫圖片描述
這里寫圖片描述
一、利用shape來制作圓形頭像（要求是美工愿意配合你）
為什么要求美工配合你呢？？因為這個方案是在ImageView直接調用資源文件的，也就是直接用了ImageView的LayoutParams的match_parent模式。不能按照那個圓的大小來適配。
給出代碼講解：drawable文件的shape標簽
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- Corner的屬性是設置圓角的半徑的-->
<solid android:color="#FFFFFF" />
<stroke
android:width="2dp"
android:color="#777777"></stroke>
<size
android:width="120dp"
android:height="120dp" />
</shape>
在xml文件中的調用：
<?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" />
<!--最優方案，也就是本文的第三種方案 -->
<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>
二、對一種容易導致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);
}
}
}
還有在自定義屬性的代碼，因為本博文不只是解析嘛，順便封裝給大家使用。可以看到有三個屬性，邊框寬度，背景顏色以及圓環顏色
<declare-styleable name="CircleHead">
<attr name="circleBorderHeadWidth" format="dimension" />
<attr name="ringHeadColor" format="color" />
<attr name="backgroundHeadColor" format="color" />
</declare-styleable>
