android自定义圆形头像

这几天看了项目框架里面的圆形头像，发现其实这个东西并不是很难的东西，学会了原理，无论圆形头像，五角星头像都可以实现。
目前我上传的Demo里用了两种实现方式，那么我们分别来讲讲这两种实现方式：

BitmapShader

Shader其实是遮罩的意思，能帮助我们在表层对图像进行简单处理，而无需那些深层的opengl，关于Shader，如需深入了解请参考sunqunsunqun的CSDN博客

基础知识准备Shader的实现：

• BitmapShader 图片填充某一区域（三种模式，拉伸，重叠，镜像），下面详讲
• ComposeShader 这个是用来混合其他Shader的
• LinearGradient 可实现某区域的线性渐变效果
• RadialShaderGradient 某一区域实现环形渐变
• SweepGradient 是指在某一中心以x轴正方向逆时针旋转一周而形成的扫描效果的渲染形式（不深入研究）
  接下来详细讲讲BitmapShader：

BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)

这是BitmapShader的构造函数，bitmap参数就是我们要处理的图片，TileMode有三个

• CLAMP 拉伸
• REPEAT 重复
• MIRROR 镜像重复
  一般情况下如果绘制区域大于我们的bitmap时这些参数会起效，反之则无效果
  CLAMP参数起效的情况下，是按照边缘像素进行拉伸的，这一点如果使用过.9图的应该比较清楚
  所以我们实现圆形头像的关键就是对源图的合理缩放与拉伸，因为drawXXX已经决定了图形的形状

BitmapShader实现圆形图像的过程

首先为了简便，我们继承ImageView，省略一些测量函数的重写，其次因为圆形就会带有半径的参数，圆角就会带角的半径参数，因此我们要自定义两个属性，一个是图形类型，这里只实现圆形与圆角矩形

    
    

   
 r    

接下来在构造函数内获得这两个属性的值

private void init(Context context, AttributeSet attrs) {    
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView);   
 type = ta.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);    
roundRadius = ta.getDimensionPixelSize(R.styleable.RoundImageView_cornerRadius, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()));    ta.recycle();
}

这个不多说了，自定义View内常用方法
然后，如果是圆的话，我们就要截取当前绘制区域，既然是截取所以只能去宽度，高度中小的作为直径

if (type == TYPE_CIRCLE) {    
viewWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());    
circleRadius = viewWidth / 2;  
setMeasuredDimension(viewWidth, viewWidth);}

接下来就是重点的shader处理了

private void setUpShader() {    
Drawable drawable = getDrawable();   
 if (drawable == null)       
         return;    
Bitmap bitmap = drawable2Bitmap(drawable);  
 mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
float scale = 1.0f; //bitmap:canvas ratio    
Log.i("------", "bitmap original width：" + bitmap.getWidth() + "height" + bitmap.getHeight());    
if (type == TYPE_CIRCLE) {        
int minWidth = Math.min(bitmap.getWidth(), bitmap.getHeight());        
scale = viewWidth * 1.0f / minWidth;    
} else {        
scale = Math.max(getWidth() * 1.0f / bitmap.getWidth(), getHeight() * 1.0f / bitmap.getHeight());   
 } 
mMatrix.setScale(scale, scale);    //显示图片中心    
if (bitmap.getWidth() * 1.0 / bitmap.getHeight() < 1) {  
mMatrix.postTranslate(0, -getHeight() / 2);    
} else {       
mMatrix.postTranslate(-getWidth() / 2, 0);    }    
mBitmapShader.setLocalMatrix(mMatrix);   
 Log.i("------", "bitmap new width：" + bitmap.getWidth() + "height" + bitmap.getHeight());   
 mPaint.setShader(mBitmapShader);}

此处的关键就在于获取拉伸缩放比，为了显示完全肯定要取消的比例，最后可能由于图片的比例与绘图区域不一致，导致我的图片主要内容不再正中，所以默认将图片移到中间
最后，就是画出形状

if (type == TYPE_CIRCLE) {    
canvas.drawCircle(circleRadius, circleRadius, circleRadius, mPaint);
} else {    
canvas.drawRoundRect(roundRec, roundRadius, roundRadius, mPaint);
}

关于Xfermode实现圆形，圆角

原理其实差不多，Xfermode解决了怎样将两张图片画到同一个区域的问题.其实上一个方法已经很好的解决了问题，那么为什么还要讲这种呢，因为Xfermode是个很强大的东西，可以实现很多效果。如果单独使用xfermode我们就要对图片源进行缩放拉伸，普通的方法就是我生成一张新的图片，这样其实是比较费内存的，这边就详细讲一下Xfermode

Xfermode图片绘制情况

黄色为下层，蓝色为上层图片
那么我们的过程就简单了，为了显示下层我们首先将源图绘制上去，当然是经过拉伸缩放的，然后再把形状贴上去，取到重叠的部分，显示下层图片也就是DstIn模式

@Overrideprotected void onDraw(Canvas canvas) {  
  Drawable drawable = getDrawable();    
if (drawable == null)        
return;   
 circleRadius = Math.min(getWidth() / 2, getHeight() / 2);    
float scale=1.0f;    
int actWidth=drawable.getIntrinsicWidth();   
 int actHeight=drawable.getIntrinsicHeight();    
Bitmap bmp=Bitmap.createBitmap(getWidth(),getHeight(), Bitmap.Config.ARGB_8888);    
Canvas temp=new Canvas(bmp);    
scale= Math.min(actWidth/getWidth(),actHeight/getHeight()); 
   drawable.setBounds(0,0, (int) (getHeight()*scale), (int) (getWidth()*scale));    
drawable.draw(temp);   
 Bitmap maskBmp = getMaskBitMap();    
mPaint.reset();    
mPaint.setFilterBitmap(false);    
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));    
temp.drawBitmap(maskBmp, 0, 0, mPaint);    
mPaint.setXfermode(null);    
canvas.drawBitmap(bmp,0,0,mPaint);}
Bitmap getMaskBitMap() {    
Bitmap result = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);    
Canvas canvas = new Canvas(result);    
Paint paint = new Paint();    
paint.setAntiAlias(true);    
canvas.drawCircle(circleRadius, circleRadius, circleRadius, paint);    
return result;}

环形最近也上传了，结合了SweepGradient，如果单是图形变换的话，推荐使用BitmapShader就够了，Xfermode的话用于实现混合的，其他代码就不贴了，送上我的github实现最后总结，Matrix是个好东西啊，实现3D图形的时候也要用，可惜大学矩阵学的差，只知道怎么用，不太懂原理啊，最后感谢csdn的Hongyang大神,文章参考Android Xfermode 实战 实现圆形、圆角图片