Android自定义控件(五)——圆形头像最简单的实现方式

着色器

今天将接着上一节的内容，讲解着色器Shader更多的用法，不知道大家关注过其他的圆形头像实现方式没有，是不是都有一个共同点，那就是代码非常的长，而博主今天实现的方式，只需要自己写13行代码就可以实现。

着色器函数

经过上一篇的讲解，我们都知道，着色器Shader是一个基类，那么它其实也是有两个函数的，分别是：

setLocalMatrix(Matrix localM)
getLocalMatrix(Matrix localM)

这两个函数是用来设置坐标变换矩阵，比如你可以进行缩放，平移变换等等等等，可以说非常的方便快捷。

实现圆形头像

我们的实现方法，也就用到上面两个函数，所以我们可以直接使用起来，这样看起来也更加的形象，方便于理解，首先，我们自定义一个View：

/***
 * 原型头像自定义控件
 */
public class CircleHeadView extends View {
    private Paint paint;//画笔
    private Bitmap bitmap;//图片
    private BitmapShader bitmapShader;//图片着色器
    public CircleHeadView(Context context) {
        super(context);
    }

    public CircleHeadView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.paint=new Paint();//初始化画笔工具
        this.bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.head_img);//获取头像图片
        this.bitmapShader=new BitmapShader(this.bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);//设置着色器为边缘填充
    }

    public CircleHeadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

在这里我们初始化了一个图片着色器BitmapShader，X,Y轴填充模式都是TileMode.CLAMP，虽然没什么用，但参数还是不能少的。

绘图实现

绘图是最关键的地方，我们来理清一下思路，要怎么才能显示圆形头像呢？

首先，因为要用到上面两个函数，所以肯定会要运用矩阵运算工具Matrix类，假如我们的图片很大，或者很小，而我要设置的头像为屏幕宽度，应该怎么做？先来看下代码：

Matrix matrix=new Matrix();
float scale=(float)getWidth()/this.bitmap.getWidth();
matrix.setScale(scale,scale);

因为不管图片大小，我们都需要它显示在整个头像之中，所以必须缩放到控件大小宽度，又因为它是个圆形，必须缩放成一个正方形，所以X,Y轴缩放大小一样。接着我们来看整体的OnDraw()实现：

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Matrix matrix=new Matrix();//初始化矩阵运算类
    float scale=(float)getWidth()/this.bitmap.getWidth();//获取图片要缩放的比例
    matrix.setScale(scale,scale);//设置缩放
    this.bitmapShader.setLocalMatrix(matrix);//设置变换矩阵
    this.paint.setShader(this.bitmapShader);//画笔设置着色器
    float half=(float) getWidth()/2;//获取圆心位置
    canvas.drawCircle(half,half,half,this.paint);//画出头像
}

注释其实很详细，不过，还是解释一下，因为我们的头像宽度为整个屏幕match_parent，所以圆心坐标的横坐标肯定是宽度的一半，又因为它是个正方形，纵坐标也应该和横坐标一样，所以相同，半径同样是整个屏幕的一半，所以最后的一行代码三个参数都是half。

XML代码如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <com.liyuanjinglyj.circleheadapplication.CircleHeadView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>

</LinearLayout>

Github下载地址：点击下载